next img

Next.js Plugin para incorporar imagens otimizadas.

Características

• Importar imagens PNG/JPG
• saída para formato webp
• redimensione para vários tamanhos de tela e densidades
• Otimize imagens Webp e Fallback usando sharp
• Carga preguiçosa em navegadores modernos com encaminhamento de suporte ( loading="lazy" )
• Evite a mudança de layout com atributos automáticos de largura/altura
• Uso simplificado com o componente embutido <Picture />
• direção de arte com imagens diferentes para diferentes pontos de interrupção
• Fluxo de trabalho rápido de implantação e desenvolvimento usando cache persistente

Por padrão, o próximo-IMG está configurado para usar:

• 1 ponto de interrupção em 768px
• 2 densidades de pixels de 1x, 2x
• Para produzir os formatos originais e webp

Todas essas configurações e mais podem ser alteradas em seu next.config.js ou nas importações de imagem individuais.

Desenvolvido e usado por Humaans.

Motivação

Por padrão, Next.js ou Webpack não ajudam muito a otimizar imagens. Isso significa configuração ou script personalizado, processando imagens manualmente, usando uma imagem CDN ou não otimizando imagens. O próximo-IMG fornece uma abordagem simplificada alternativa para adicionar imagens aos seus próximos projetos. Ele combina um plug -in Next.js, um carregador de webpack personalizado e um componente React para tornar as imagens de servir de uma maneira ideal de uma maneira quase tão fácil quanto digitar <img src='foo.png' /> .

Em suma, é preciso o seguinte:

 < Picture src = { require ( './images/jelly.jpg?sizes=375,800' ) } alt = 'Jellyfish' />

Importações, redimensionar, otimizar, caches (persistentemente no repositório do Git) e produz o seguinte HTML:

 < picture >
  < source
    type =" image/webp "
    srcset ="
      /_next/static/images/[email protected]  375w,
      /_next/static/images/[email protected]  750w,
      /_next/static/images/[email protected]  800w,
      /_next/static/images/[email protected] 1600w
    "
    sizes =" (max-width: 768px) 375px, 800px "
  />
  < source
    type =" image/jpeg "
    srcset ="
      /_next/static/images/[email protected]  375w,
      /_next/static/images/[email protected]  750w,
      /_next/static/images/[email protected]  800w,
      /_next/static/images/[email protected] 1600w
    "
    sizes =" (max-width: 768px) 375px, 800px "
  />

  < img
    src =" /_next/static/images/[email protected] "
    srcset ="
      /_next/static/images/[email protected]  375w,
      /_next/static/images/[email protected]  750w,
      /_next/static/images/[email protected]  800w,
      /_next/static/images/[email protected] 1600w
    "
    width =" 375 "
    height =" 250 "
    alt =" Jellyfish "
  />
</ picture >

Ver exemplos.

Uso

Instale o pacote

 npm install next-img

Adicione o plugin ao seu next.config.js :

 const withImg = require ( 'next-img/plugin' )

module . exports = withImg ( {
  nextImg : {
    breakpoints : [ 768 ] ,
  } ,
} )

Em seu aplicativo, importe as imagens e incorpore usando o componente <Picture /> :

 import { Picture } from 'next-img'
import jelly from './images/jelly.jpg?sizes=375,800'

export default ( ) => < Picture src = { jelly } />

Ou embutido:

 import { Picture } from 'next-img'

export default ( ) => < Picture src = { require ( './images/jelly.jpg?sizes=375,800' ) } />

Este exemplo em particular gerará as seguintes imagens:

• Imagem larga de 375px para mostrar em telas pequenas com baixa densidade de pixels de 1x
• Imagem de 750px de largura para mostrar em telas pequenas com alta densidade de pixels de 2x ou mais
• Imagem de 800px de largura para mostrar em telas grandes com baixa densidade de pixels de 1x
• Imagem larga de 1600px para mostrar em telas grandes com alta densidade de pixels de 2x ou mais

As imagens redimensionadas e otimizadas serão salvas no diretório resources na raiz do seu projeto durante o desenvolvimento. Isso significa que, se você ajustar os parâmetros de importação da imagem ou a configuração do plug -in, poderá gerar imagens extras que não são mais usadas pelo seu projeto. Nesse caso, execute o comando next-img para remover imagens desnecessárias e criar as que faltavam:

 npx next-img

Agora verifique o diretório resources para o seu controle de origem a ser reutilizado posteriormente para obter o desenvolvimento e a produção. Você pode desativar esse recurso definindo persistentCache: false na configuração do plug -in; nesse caso, as imagens serão armazenadas apenas em um cache temporário dentro do diretório .next .

Veja mais exemplos de uso.

Configuração

Opções de configuração de plug -in padrão:

 {
  // global settings for images, can be overriden per image
  breakpoints : [ 768 ] ,
  densities : [ '1x' , '2x' ] ,

  // output image quality configuration
  jpeg : {
    quality : 80 ,
    webp : {
      quality : 90 ,
      reductionEffort : 6 ,
    } ,
  } ,

  png : {
    quality : 100 ,
    webp : {
      reductionEffort : 6 ,
      lossless : true ,
    } ,
  } ,

  // the directory within Next.js build output
  imagesDir : 'images' ,
  // the output image name template
  imagesName : '[name]-[size]@[density]-[hash].[ext]' ,
  // advanced - customise the image public path
  imagesPublicPath : null ,
  // advanced - customise the image output path
  imagesOutputPath : null ,

  // persistent cache allows for fast deploy and
  // development workflow by avoiding reprocessing
  // images that were previously processed
  persistentCache : true ,
  persistentCacheDir : 'resources' ,

  // this directory within .next is used in case persistent cache is turned off
  cacheDir : path . join ( 'cache' , 'next-img' )
}

Consulte a documentação nítida para opções de compactação jpeg/png/webp .

Importar params

Ao importar uma imagem, você pode usar parâmetros de consulta para personalizar a otimização:

• Tamanhos - Uma lista de tamanhos separados por vírgula em que você exibirá imagens. Observe que você não precisa levar em consideração as densidades de pixels aqui. Ou seja, se você estiver mostrando uma imagem em 320px de largura em seu site, basta especificar 320 aqui, o plug -in produzirá as versões maiores necessárias com base na configuração de densities .
• Densidades - Uma lista de densidades separadas por vírgula em que você precisa de cada tamanho de imagem a ser produzido. Por padrão, os tamanhos 1x e 2x das imagens serão produzidos, especifique 1x se você quiser produzir apenas uma imagem por tamanho ou 1x,2x,3x , etc. se você deseja mais densidades.
• JPEG - Opções de configuração de qualidade para imagens jpeg . Observe que as configurações jpeg->webp precisam ser aninhadas sob este parâmetro, por exemplo ?jpeg[webp][quality]=95
• PNG - Opções de configuração de qualidade para imagens png . Observe que as configurações de png->webp precisam ser aninhadas sob este parâmetro, por exemplo ?png[webp][lossless]=false&png[webp][nearLossless]=true

Exemplos:

 import img1 from './images/img.jpg'
import img2 from './images/img.jpg?sizes=375,900'
import img3 from './images/img.jpg?sizes=375,900&densities=1x'
import img4 from './images/img.jpg?sizes=375,900&densities=1x,2x,3x'
import img5 from './images/img.jpg?sizes=375,900&densities=1x,2x,3x&jpeg[quality]=70&jpeg[webp][quality]=70' 

Adereços de imagem

next-img vem com um componente REACT, facilitando a incorporação de imagens.

Aqui estão os adereços que este componente Acesso:

• SRC A imagem importada ou uma variedade de imagens importadas.
• Pontos de interrupção - Uma lista de pontos de interrupção para substituir a configuração global.
• Tamanhos - Um atributo HTML personalizado, por padrão, o atributo de tamanhos é gerado com base nas imagens e pontos de interrupção disponíveis.
• O restante dos adereços e REF são encaminhados para a tag img . Isso permite o uso de atributos como alt , loading="lazy" , etc ..

Uma nota sobre como os tamanhos/atributos de mídia são gerados

Quando uma única imagem é fornecida através do suporte src , cada tamanho será configurado para aparecer de acordo com cada ponto de interrupção disponível usando o atributo sizes attribute HTML.

Por exemplo sizes <Picture> pontos de interrupção [375, 768] e ?sizes=100,400,800

 (max-width: 375px) 100px,
(max-width: 768px) 400px,
                   800px

Quando uma variedade de imagens é fornecida através do suporte src , cada imagem será configurada para aparecer de acordo com cada ponto de interrupção disponível usando o media attribute HTML.

Por exemplo, com pontos de interrupção [375, 768] e src=[img1, img2, img3] o componente <Picture> aplicará o seguinte atributo media :

 < picture >
  < source media =" (max-width: 480px) " sizes =" {{img1 width}} " />
  < source media =" (max-width: 768px) " sizes =" {{img2 width}} " />
  < source sizes =" {{img3 width}} " />
  < img ... />
</ picture > 

Perguntas frequentes

Eu tenho que usar o componente <Picture /> ?

O componente da imagem é opcional. Você pode lidar com o objeto de imagem importado como quiser.

As imagens não poderiam ser otimizadas ainda mais?

Sim, você provavelmente poderá obter ~ 10% -20% ou mais de compactação se passar pelo jpg/png através do ImageOptim ou outras ferramentas. A coisa é que, como este plug -in produz um WebP já bem otimizado e você estará servindo o WebP para a maioria dos navegadores modernos, isso remove a necessidade de espremer esse tamanho extra de arquivo para jpg/png , pois são as imagens de fallback . No entanto, pode haver casos de uso em que os algoritmos de compactação personalizados sejam necessitados e podemos adicionar suporte para transformações arbitrárias neste plug -in no futuro.

Desenvolvimento

Para desenvolver este projeto, você precisará executar um vigia do componente <Picture /> :

 npm install
npm run watch

Você pode usar o exemplo como o playground:

 cd example
npm install
next

Para executar o comando next-img no exemplo dir:

 node ../bin/next-img

Futuro

Roteiro

• Permitir diferente configuração para jpg->webp e png->webp conversions
• Permitir desativar a saída webp/jpg/png
• Adicionar ?raw que não processa a imagem de forma alguma
• Remova a necessidade do comando next-img conectando-se diretamente à next build
• Adicione suporte para imagens CSS, além das imagens HTML
• Imagens pequenas embutidas

E algumas idéias para onde este projeto poderiam ser levadas no futuro:

• Permita a adição de plugins de otimização imagemin ao pipeline via configuração. Dessa forma, os usuários podem controlar como otimizar suas imagens mais granuarly.
• Traduzir tamanhos relativos ?sizes=100vw,50vw,900px a pixels com base na configuração do ponto de interrupção, isso permitiria um tipo dinâmico de importações que dependem do seu sistema de design e do dimensionamento relativo das imagens, por exemplo, se o CSS disser "50VW", você não precisará fazer esse cálculo manualmente.
• Modo de depuração que imprime os tamanhos das imagens em próprias imagens, para que você possa ver o que é mostrado quando corretamente no navegador Inside Images (ou sobrepondo -as usando JS no tempo de execução).
• Analisador de código -fonte que analisa o código das imagens para evitar a necessidade de require() .
• Otimize as operações de leitura/gravação/hash de arquivo para melhorar o desempenho.
• Um script de marionetistas para renderizar o site em todos os pontos de interrupção predefinidos e analisar automaticamente todos os tamanhos de imagem necessários.
• Adicione suporte para GIF e WebP como imagens de origem.