next img

Next.js complemento para incrustar imágenes optimizadas.

Características

• Importar imágenes PNG/JPG
• Salida al formato WebP
• cambiar el tamaño a múltiples tamaños y densidades de pantalla
• Optimizar las imágenes webp e alternativas utilizando sharp
• Carga perezosa en navegadores modernos con reenvío de apoyo ( loading="lazy" )
• Evite el cambio de diseño con atributos automáticos de ancho/altura
• Uso optimizado con el componente incorporado <Picture />
• Dirección de arte con diferentes imágenes para diferentes puntos de interrupción
• Flujo de trabajo de implementación y desarrollo rápido utilizando caché persistente

De forma predeterminada, el siguiente-IMG está configurado para usar:

• 1 punto de interrupción en 768px
• Densidades de 2 píxeles de 1x, 2x
• Para obtener los formatos originales y webp

Todas estas configuraciones y más se pueden cambiar en su next.config.js o en las importaciones de imágenes individuales.

Desarrollado y utilizado por Humaans.

Motivación

De forma predeterminada, Next.js o Webpack no le ayuda mucho con la optimización de imágenes. Esto significa configuración o secuencia de comandos personalizados, procesando imágenes a mano, utilizando una imagen CDN o no optimizar las imágenes. Next-IMG proporciona un enfoque alternativo optimizado para agregar imágenes a sus proyectos Next.js. Combina un complemento Next.js, un cargador web personalizado y un componente React para hacer imágenes de servicio de una manera óptima de una manera que sea casi tan fácil como escribir <img src='foo.png' /> .

En resumen, se necesita lo siguiente:

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

Importa, cambia de tamaño, optimiza, cachés (persistentemente en el repositorio de git) y genera el siguiente 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 ejemplos.

Uso

Instalar el paquete

 npm install next-img

Agregue el complemento a su next.config.js :

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

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

En su aplicación, importe las imágenes e incrustado utilizando el componente <Picture /> :

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

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

O en línea:

 import { Picture } from 'next-img'

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

Este ejemplo en particular generará las siguientes imágenes:

• Imagen de 375 px de ancho para mostrar en pantallas pequeñas con baja densidad de píxeles de 1x
• Imagen de 750px de ancho para mostrar en pantallas pequeñas con alta densidad de píxeles de 2x o más
• Imagen de 800 px de ancho para mostrar en pantallas grandes con baja densidad de píxeles de 1x
• Imagen de 1600 px de ancho para mostrar en pantallas grandes con alta densidad de píxeles de 2x o más

Las imágenes redimensionadas y optimizadas se guardarán en el directorio resources en la raíz de su proyecto durante el desarrollo. Esto significa que si modifica los parámetros de importación de imágenes o la configuración del complemento, puede generar imágenes adicionales que ya no son utilizadas por su proyecto. En ese caso, ejecute el comando next-img para eliminar cualquier imagen innecesaria y construir otras faltantes:

 npx next-img

Ahora verifique el directorio resources a su control de origen para ser reutilizado más tarde para las compilaciones de desarrollo y producción. Puede desactivar esta función configurando persistentCache: false en la configuración del complemento, en cuyo caso las imágenes solo se almacenarán en un caché temporal dentro del directorio .next .

Ver más ejemplos de uso.

Configuración

Opciones de configuración de complemento predeterminadas:

 {
  // 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 la documentación nítida para las opciones de compresión jpeg/png/webp .

Importar parámetros

Al importar una imagen, puede usar parámetros de consulta para personalizar la optimización:

• Tamaños : una lista de tamaños separados por comas en los que mostrará imágenes. Tenga en cuenta que no necesita tener en cuenta las densidades de píxeles aquí. Es decir, si muestra una imagen a 320px de ancho en su sitio web, simplemente especifique 320 aquí, el complemento producirá cualquier versiones más grandes necesarias basadas en la configuración de densities .
• Densidades : una lista de densidades separadas por comas en las que necesita que se produzca cada tamaño de imagen. Por defecto, se producirán 1x y 2x tamaños de imágenes, especifique 1x si desea producir solo una imagen por tamaño, o 1x,2x,3x , etc. si desea más densidades.
• JPEG - Opciones de configuración de calidad para imágenes jpeg . Tenga en cuenta que la configuración jpeg->webp debe anidarse bajo este parámetro, por ejemplo ?jpeg[webp][quality]=95
• PNG - Opciones de configuración de calidad para imágenes png . Tenga en cuenta que la configuración png->webp debe anidarse bajo este parámetro, por ejemplo ?png[webp][lossless]=false&png[webp][nearLossless]=true

Ejemplos:

 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' 

Accesorios de imágenes

next-img viene con un componente React que facilita la incrustación de imágenes.

Aquí están los accesorios este acceso de componente:

• SRC la imagen importada, o una matriz de imágenes importadas.
• Puntos de interrupción : una lista de puntos de interrupción para anular la configuración global.
• Tamaños : un atributo de tamaños HTML personalizado, de forma predeterminada, el atributo de tamaños se genera en función de las imágenes y los puntos de interrupción disponibles.
• El resto de los accesorios y el árbitro se envían a la etiqueta img . Esto permite el uso de atributos como alt , loading="lazy" , etc.

Una nota sobre cómo se generan los atributos de los tamaños/medios

Cuando se proporciona una sola imagen a través del PROP src , se configurará cada tamaño para que se muestre por cada punto de interrupción disponible utilizando el atributo sizes attribute .

Por ejemplo, <Picture> los puntos sizes interrupción [375, 768] y ?sizes=100,400,800

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

Cuando se proporciona una matriz de imágenes a través del PROP src , cada imagen se configurará para aparecer según cada punto de interrupción disponible utilizando el media attribute HTML.

Por ejemplo, con los puntos de interrupción [375, 768] y src=[img1, img2, img3] El componente <Picture> aplicará el siguiente 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 > 

Preguntas frecuentes

¿Tengo que usar el componente <Picture /> ?

El componente de la imagen es opcional. Puede manejar el objeto de imagen importado como desee.

¿No podrían las imágenes optimizar más?

Sí, probablemente podría obtener ~ 10% -20% o más de compresión si pasa el jpg/png a través de ImageOptim u otras herramientas. La cosa es que este complemento genera una WebP ya bien optimizada y servirá WebP para la mayoría de los navegadores modernos, eso elimina la necesidad de apretar ese tamaño de archivo adicional para jpg/png ya que son las imágenes alternativas . Sin embargo, puede haber casos de uso en los que se necesitan algorhitmos de compresión personalizados y podríamos agregar soporte para transformaciones arbitrarias en este complemento en el futuro.

Desarrollo

Para desarrollar este proyecto, deberá ejecutar un observador para el componente <Picture /> :

 npm install
npm run watch

Puedes usar el ejemplo como el patio de recreo:

 cd example
npm install
next

Para ejecutar el comando next-img en el Dir de ejemplo:

 node ../bin/next-img

Futuro

Hoja de ruta

• Permitir una configuración diferente para jpg->webp y png->webp
• Permitir apagar la salida webp/jpg/png
• Agregar ?raw que no procesa la imagen de ninguna manera
• Elimine la necesidad del comando next-img conectando directamente a next build
• Agregar soporte para imágenes CSS, además de las imágenes HTML
• Imágenes pequeñas en línea

Y algunas ideas sobre dónde podría tomarse este proyecto en el futuro:

• Permitir agregar complementos de optimización imagemin a la tubería a través de la configuración. De esta manera, los usuarios pueden controlar cómo optimizar sus imágenes de manera más granulada.
• Traducir los tamaños relativos de ?sizes=100vw,50vw,900px a los píxeles según la configuración del punto de interrupción, esto permitiría que las importaciones dinámicas dependan de su sistema de diseño y el tamaño relativo de las imágenes, por ejemplo, si CSS dice "50VW", no necesitará hacer ese cálculo manualmente.
• Modo de depuración que imprime los tamaños de imágenes en las imágenes mismas, para que pueda ver lo que se muestra cuando está bien en las imágenes del navegador interior (o la superposición usando JS en tiempo de ejecución).
• Parser del código fuente que analiza el código de las imágenes para evitar la necesidad de require() .
• Optimizar operaciones de lectura/escritura/hash de archivo para un rendimiento mejorado.
• Un script de titiriteros para representar el sitio web en todos los puntos de interrupción predefinidos y analizar automáticamente todos los tamaños de imagen requeridos.
• Agregue soporte para GIF y WebP como imágenes de origen.