next image export optimizer
v1.18.0
Utilice el componente Next.js Advanced <Image/> con la funcionalidad de exportación estática. Optimiza todas las imágenes estáticas en un paso adicional después de la exportación estática Next.js.
Para imágenes usando una cadena de ruta: (por ejemplo, src = "/perfil.png")
Coloque las imágenes en una carpeta dentro de la carpeta pública como público/imágenes
Para imágenes utilizando una importación estática: (por ejemplo, src = {perfileImage})
Puede colocar las imágenes en cualquier lugar de su proyecto. Las imágenes se optimizarán y copiarán a la carpeta de exportación.
Para imágenes remotas: (por ejemplo, src = "https://example.com/image.jpg")
Consulte la sección sobre imágenes remotas.
npm install next-image-export-optimizer
# Or
yarn add next-image-export-optimizer
pnpm install next-image-export-optimizer
Agregue lo siguiente a su next.config.js . También puede usar next.config.ts para proyectos de TypeScript.:
// next.config.js
module . exports = {
output : "export" ,
images : {
loader : "custom" ,
imageSizes : [ 16 , 32 , 48 , 64 , 96 , 128 , 256 , 384 ] ,
deviceSizes : [ 640 , 750 , 828 , 1080 , 1200 , 1920 , 2048 , 3840 ] ,
} ,
transpilePackages : [ "next-image-export-optimizer" ] ,
env : {
nextImageExportOptimizer_imageFolderPath : "public/images" ,
nextImageExportOptimizer_exportFolderPath : "out" ,
nextImageExportOptimizer_quality : "75" ,
nextImageExportOptimizer_storePicturesInWEBP : "true" ,
nextImageExportOptimizer_exportFolderName : "nextImageExportOptimizer" ,
nextImageExportOptimizer_generateAndUseBlurImages : "true" ,
nextImageExportOptimizer_remoteImageCacheTTL : "0" ,
} ,
} ; Actualizar el comando de compilación en package.json
{
- "build": "next build",
+ "build": "next build && next-image-export-optimizer"
}Reemplace el componente <Image /> con el componente <ExportedImage /> :
Ejemplo:
// Old
import Image from "next/image" ;
< Image
src = "images/VERY_LARGE_IMAGE.jpg"
alt = "Large Image"
width = { 500 }
height = { 500 }
/> ;
// Replace with either of the following:
// With static import (Recommended)
import ExportedImage from "next-image-export-optimizer" ;
import testPictureStatic from "PATH_TO_IMAGE/test_static.jpg" ;
< ExportedImage src = { testPictureStatic } alt = "Static Image" /> ;
// With dynamic import
import ExportedImage from "next-image-export-optimizer" ;
< ExportedImage
src = "images/VERY_LARGE_IMAGE.jpg"
alt = "Large Image"
width = { 500 }
height = { 500 }
/> ; Para imágenes remotas, debe especificar el SRC como una cadena que comienza con http o https en el componente exportedimage.
import ExportedImage from "next-image-export-optimizer" ;
< ExportedImage src = "https://example.com/remote-image.jpg" alt = "Remote Image" /> ; Para que la optimización de imágenes en el momento de la compilación funcione correctamente, debe especificar todas las URL de imagen remota en un archivo llamado RemotePtimizedImages.js en el directorio raíz de su proyecto (donde también se almacena el next.config.js ). El archivo debe exportar una matriz de cadenas que contengan las URL de las imágenes remotas. Devolver una promesa de dicha matriz también es compatible.
Ejemplo:
// remoteOptimizedImages.js
module . exports = [
"https://example.com/image1.jpg" ,
"https://example.com/image2.jpg" ,
"https://example.com/image3.jpg" ,
// ...
] ; // Or with a promise
module . exports = new Promise ( ( resolve ) =>
resolve ( [
"https://example.com/image1.jpg" ,
"https://example.com/image2.jpg" ,
"https://example.com/image3.jpg" ,
// ...
] )
) ;
// Or with an async API call
module . exports = fetch ( "https://example.com/api/images" ) . catch ( ( error ) => {
console . error ( error ) ;
return [ ] ; // return an empty array in case of error
} ) ;En la hora de compilación, las imágenes se descargarán o se leerán desde el caché. Las URL de la imagen se reemplazarán con las URL de imagen optimizadas en el componente de imagen exportado.
Puede especificar el tiempo para vivir del caché en segundos estableciendo la variable de entorno nextImageExportOptimizer_remoteImageCacheTTL en su archivo next.config.js . El valor predeterminado es de 0 segundos (ya que la imagen podría haber cambiado).
Establecerlo en:
Si desea ocultar las URL de imagen remota del usuario, puede usar el accesorio de OverDidRc del componente ExportedImage. Esto reemplazará el atributo SRC de la etiqueta de imagen con el valor del PROP OVERDIRSRC.
Tenga en cuenta que el componente de la imagen no puede volver a la URL de la imagen original si las imágenes optimizadas aún no se generan cuando usa el accesorio de OverDidRc. Esto dará como resultado un enlace de imagen roto.
Puede personalizar el nombre de archivo para imágenes optimizadas remotas agregando lo siguiente a su next.config.js :
module . exports = {
env : {
// ... other env variables
nextImageExportOptimizer_remoteImagesFilename : "remoteOptimizedImages.cjs" ,
} ,
// ... other config options
} ; Si su proyecto Next.js no está en el directorio raíz donde está ejecutando los comandos, por ejemplo, cuando está utilizando un Monorepo, puede especificar la ubicación del next.config.js como un argumento para el script:
"export" : " next build && next-image-export-optimizer --nextConfigPath path/to/my/next.config.js "Especifique la ruta de la carpeta de salida ya sea a través de la variable de entorno:
// next.config.js
{ "env" : {
"nextImageExportOptimizer_exportFolderPath" : "path/to/my/export/folder"
} }O pasando el argumento al guión:
"export" : " next build && next-image-export-optimizer --exportFolderPath path/to/my/export/folder " Si desea implementar su aplicación en una subcarpeta de su dominio, puede establecer el BasePath en el archivo next.config.js :
module . exports = {
basePath : "/subfolder" ,
} ;El componente ExportedImage tiene un accesorio BasePath que puede usar para pasar el BasePath al componente.
import ExportedImage from "next-image-export-optimizer" ;
import testPictureStatic from "PATH_TO_IMAGE/test_static.jpg" ;
< ExportedImage
src = { testPictureStatic }
alt = "Static Image"
basePath = "/subfolder"
/> ; Si no desea la generación automática de pequeñas imágenes de marcador de posición borrosa, establezca el entorno de nextImageExportOptimizer_generateAndUseBlurImages en false y establezca el accesorio de placeholder del componente <ExportedImage /> a empty .
Si desea cambiar el nombre del nombre de la carpeta de exportación, establezca la variable de entorno nextImageExportOptimizer_exportFolderPath en el nombre de la carpeta deseado. El valor predeterminado es nextImageExportOptimizer .
Por defecto, las imágenes se almacenan en formato WebP.
Si no desea utilizar el formato WebP, establezca el entorno nextImageExportOptimizer_storePicturesInWEBP Variable en false .
El componente <ExportedImage /> es un envoltorio alrededor del componente <Image /> de Next.js. Utiliza la función de cargador personalizado para generar un srcset para diferentes resoluciones de la imagen original. El navegador puede cargar el tamaño correcto en función del tamaño actual de la ventana gráfica.
La operación de transformación de la imagen se optimiza, ya que utiliza hashes para determinar si una imagen ya ha sido optimizada o no. De esta manera, las imágenes solo están optimizadas una vez y no cada vez que se ejecuta el comando de compilación.
El componente <ExportedImage /> vuelve a la imagen original si las imágenes optimizadas aún no se generan en el modo de desarrollo. En la aplicación de reacción estática exportada, las imágenes receptivas están disponibles como srcset y cargadas dinámicamente por el navegador.
Se recomienda el método de importación estática, ya que informa al cliente sobre el tamaño de la imagen original. Cuando se solicitan anchos más grandes que el ancho de la imagen original, se utilizará el siguiente tamaño de imagen más grande en la matriz de dispositivos (especificado en el next.config.js ) para la generación del atributo SRCSET. Cuando especifica las imágenes como una cadena de ruta, esta biblioteca creará duplicados de la imagen original para cada tamaño de imagen en la matriz de dispositivos que es más grande que el tamaño de la imagen original.
Puede emitir las imágenes originales y no optimizadas utilizando el accesorio unoptimized . Ejemplo:
import ExportedImage from "next-image-export-optimizer" ;
< ExportedImage
src = { testPictureStatic }
alt = "Original, unoptimized image"
unoptimized = { true }
/> ; Todavía puede usar el componente de imagen heredado next/legacy/image :
import ExportedImage from "next-image-export-optimizer/legacy/ExportedImage" ;
import testPictureStatic from "PATH_TO_IMAGE/test_static.jpg" ;
< ExportedImage src = { testPictureStatic } alt = "Static Image" layout = "fixed" /> ;Imágenes animadas: puede usar .gif y animadas imágenes .webp. Next-Image-Export-Optimizer optimizará automáticamente las imágenes animadas y generará el srcset para las diferentes resoluciones.
Si establece la variable nextImageExportoptimizer_storepicturesInWebp en verdadero, las imágenes animadas se convertirán en formato .WEBP que puede reducir significativamente el tamaño del archivo. Tenga en cuenta que las imágenes de PNG animadas no son compatibles con este paquete.
Puede ver un ejemplo en vivo del uso de esta biblioteca en reactapp.dev/next-image-export-optimizer
Advertencia La versión 1.0.0 es un cambio de ruptura. Sigue los cambios introducidos en el próximo 13.0.0 que reemplaza el componente
next/imageconnext/future/image. Si está utilizando el próximo 12 o menos, use la versión 0.17.1 .
