next optimized images
v2.6.1
¡Viene la versión 3! Presenta una reescritura completa con muchas características y correcciones de errores nuevas. Si desea ayudar a desarrollar y probar la próxima versión principal, consulte la rama Canary para obtener instrucciones de instalación y más información sobre las nuevas funciones. (Problema de RFC)
Optimice automáticamente las imágenes utilizadas en proyectos Next.js ( jpeg , png , svg , webp y gif ).
Los tamaños de imagen a menudo pueden reducirse entre 20-60%, pero esto no es lo único que hace next-optimized-images :
webp en la marcha para un tamaño aún más pequeñoSVG sprites para un mejor rendimiento cuando se usa los mismos iconos varias veces (por ejemplo, en una lista) npm install next-optimized-images
Se requiere nodo> = 8 para la versión 2. Si necesita admitir versiones de nodos anteriores, aún puede usar la versión 1 de las imágenes optimizadas a continuación.
Habilite el complemento en su archivo de configuración Next.js:
// next.config.js
const withPlugins = require ( 'next-compose-plugins' ) ;
const optimizedImages = require ( 'next-optimized-images' ) ;
module . exports = withPlugins ( [
[ optimizedImages , {
/* config for next-optimized-images */
} ] ,
// your other plugins here
] ) ;Consulte la sección de configuración para ver todas las opciones disponibles.
El ejemplo anterior utiliza pluginas de próxima composición para una API más limpia cuando use muchos complementos, consulte su README para obtener un ejemplo más detallado. next-optimized-images también funciona con la API de complemento estándar:
// next.config.js
const withOptimizedImages = require ( 'next-optimized-images' ) ;
module . exports = withOptimizedImages ( {
/* config for next-optimized-images */
// your config for other plugins or the general next.js here...
} ) ; A partir de la versión 2, debe instalar los paquetes de optimización que necesita en su proyecto, además de este complemento. next-optimized-images detectan todos los paquetes compatibles y los usan.
Por lo tanto, solo tiene que instalar estos paquetes con NPM, después de eso no se necesita un paso adicional.
Los siguientes paquetes de optimización están disponibles y compatibles:
| Paquete de optimización | Descripción | Enlace de proyecto |
|---|---|---|
imagemin-mozjpeg | Optimiza las imágenes JPEG. | Enlace |
imagemin-optipng | Optimiza las imágenes PNG. | Enlace |
imagemin-pngquant | Alternativa para optimizar las imágenes PNG. | Enlace |
imagemin-gifsicle | Optimiza las imágenes GIF. | Enlace |
imagemin-svgo | Optimiza las imágenes e íconos SVG. | Enlace |
svg-sprite-loader | Agrega la posibilidad de usar SVG Sprites para un mejor rendimiento. Lea la sección Sprite para obtener más información. | Enlace |
webp-loader | Optimiza las imágenes WebP y puede convertir las imágenes JPEG/PNG en WebP en la mosca (consulta de recursos webp). | Enlace |
lqip-loader | Genera marcadores de posición de imagen de baja calidad y puede extraer los colores dominantes de una imagen (consulta de recursos LQIP) | Enlace |
responsive-loader | Puede cambiar el tamaño de las imágenes en la mosca y crear múltiples versiones de la misma para un srcset .IMPORTANTE : debe instalar adicionalmente jimp (implementación de nodos, más lento) o sharp (binario, más rápido) | Enlace |
image-trace-loader | Genera esquemas de imagen SVG que se pueden usar como marcador de posición al cargar la imagen original (consulta de recursos de rastreo). | Enlace |
Ejemplo: si tiene imágenes JPG, PNG y SVG en su proyecto, entonces necesitaría ejecutar
npm install imagemin-mozjpeg imagemin-optipng imagemin-svgo
Para instalar todos los paquetes opcionales, ejecute:
npm install imagemin-mozjpeg imagemin-optipng imagemin-gifsicle imagemin-svgo svg-sprite-loader webp-loader lqip-loader responsive-loader jimp image-trace-loaderoptimizeImagesInDev .
Dependiendo de su configuración de compilación/implementación, también es posible instalarlos como Devdependencias. Solo asegúrese de que los paquetes estén disponibles cuando construya su proyecto.
Desde la versión 2.5, los archivos ico también son compatibles opcionalmente, pero deben habilitarse en la configuración de handleImages .
Ahora puede importar o requerir sus imágenes directamente en sus componentes React:
import React from 'react' ;
export default ( ) => (
< div >
< img src = { require ( './images/my-image.jpg' ) } />
< img src = { require ( './images/my-small-image.png' ) } />
< img src = { require ( './images/my-icon.svg' ) } />
</ div >
) ;
/**
* Results in:
*
* <div>
* <img src="/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg" />
* <img src="data:image/png;base64,..." />
* <img src="/_next/static/images/my-icon-572812a2b04ed76f93f05bf57563c35d.svg" />
* </div>
*/Tenga en cuenta que las imágenes solo se optimizan en producción de forma predeterminada para reducir el tiempo de compilación en su entorno de desarrollo.
Si está utilizando módulos CSS, este paquete también detecta imágenes y las optimiza en los valores de url() en sus archivos CSS/SASS/LESS:
.Header {
background-image : url ( ' ./images/my-image.jpg ' );
}
/* *
* Results in:
*
* .Header {
* background-image: url('/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg');
* }
*/ Si el archivo está por debajo del límite para insertar imágenes, el require(...) devolverá un Data-URI base64 ( data:image/jpeg;base64,... ).
De lo contrario, next-optimized-images copiarán su imagen en la carpeta estática de Next.js y el require(...) devuelve la ruta a su imagen en este caso ( /_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg ).
Puede usar ambas variantes directamente en una imagen en el atributo src o en su archivo CSS dentro de un valor url() .
Si está utilizando Flow o Eslint-Plugin-Import y está experimentando algunos problemas con los parámetros de consulta, consulte la solución publicada por @ELITH.
Hay algunos casos en los que no desea hacer referencia a un archivo o obtener un Data-URI base64, pero en realidad desea incluir el archivo sin procesar directamente en su HTML. Especialmente para los SVG porque no puedes diseñarlos con CSS si están en un atributo src en una imagen.
Por lo tanto, hay opciones adicionales que puede especificar como parámetros de consulta cuando importa las imágenes.
?include : Incluya el archivo sin procesar directamente (útil para los iconos SVG)?webp : Convierta una imagen JPEG/PNG en WebP en la marcha?inline : fuerza que incluye una imagen (Data-uri)?url : Forzar una URL para una imagen pequeña (en lugar de datos-URI)?original : use la imagen original y no la optimice?lqip : Generar un marcador de posición de imagen de baja calidad?lqip-colors : Extraiga los colores dominantes de una imagen?trace : Use contornos trazados como marcador de posición de carga?resize : RESEA LA IMAGEN?sprite : use SVG Sprites La imagen ahora se incluirá directamente en su HTML sin un Data-URI o una referencia a su archivo.
Como se describió anteriormente, esto es útil para los SVG para que pueda diseñarlos con CSS.
import React from 'react' ;
export default ( ) => (
< div dangerouslySetInnerHTML = { { __html : require ( './images/my-icon.svg?include' ) } } />
) ;
/**
* Results in:
*
* <div>
* <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
* <path d="M8 0C3.589 0 0 3.589 0 8s3.589 ..." style="filled-opacity:1" fill-rule="evenodd">
* </path>
* </svg>
* </div>
*/La imagen aún se optimizará, incluso si se incluye directamente en su contenido (pero de forma predeterminada solo en producción).
Requiere el paquete de optimización opcional
webp-loader(npm install webp-loader)
WebP es un formato de imagen aún mejor y más pequeño, pero todavía no es tan común y los desarrolladores a menudo solo reciben imágenes JPEG/PNG.
Si se especifica este parámetro de consulta ?webp , next-optimized-images convierten automáticamente una imagen JPEG/PNG en el nuevo formato WebP.
Para los navegadores que aún no admiten WebP, también puede proporcionar una alternativa utilizando la etiqueta <picture> :
import React from 'react' ;
export default ( ) => (
< picture >
< source srcSet = { require ( './images/my-image.jpg?webp' ) } type = "image/webp" />
< source srcSet = { require ( './images/my-image.jpg' ) } type = "image/jpeg" />
< img src = { require ( './images/my-image.jpg' ) } />
</ picture >
) ;
/**
* Results in:
* <picture>
* <source srcset="/_next/static/images/my-image-d6816ecc28862cf6f725b29b1d6aab5e.jpg.webp" type="image/webp" />
* <source srcset="/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg" type="image/jpeg" />
* <img src="/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg" />
* </picture>
*/ Puede especificar un límite para insertar imágenes que lo incluirán como un Data-URI directamente en su contenido en lugar de hacer referencia a un archivo si el tamaño del archivo está por debajo de ese límite.
Por lo general, no desea especificar un límite demasiado alto, pero puede haber casos en los que aún desea en línea imágenes más grandes.
En este caso, no tiene que establecer el límite global en un valor más alto, pero puede agregar una excepción para una sola imagen utilizando las opciones de consulta ?inline .
import React from 'react' ;
export default ( ) => (
< img src = { require ( './images/my-image.jpg?inline' ) } />
) ;
/**
* Results in:
*
* <img src="data:image/png;base64,..." />
*
* Even if the image size is above the defined limit.
*/ La incrustación solo se aplicará exactamente a esta importación, por lo que si importa la imagen por segunda vez sin la opción ?inline , se referirá normalmente como un archivo si está por encima de su límite.
Cuando tiene una imagen más pequeña que su límite definido para la incrustación, normalmente se ingresa automáticamente. Si no desea que un archivo pequeño específico se ingrese, puede usar el parámetro de consulta ?url para recuperar siempre una URL de imagen, independientemente del límite en línea.
Si está utilizando mucho esta opción, también podría tener sentido deshabilitar la entrada por completo y usar el parámetro ?inline para archivos únicos.
import React from 'react' ;
export default ( ) => (
< img src = { require ( './images/my-image.jpg?url' ) } />
) ;
/**
* Results in:
*
* <img src="/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg" />
*
* Even if the image size is below the defined inlining limit.
*/ La incrustación solo se deshabilitará para exactamente esta importación, por lo que si importa la imagen por segunda vez sin la opción ?url , se ingresará nuevamente si está por debajo de su límite.
La imagen no se optimiza y usará como es. Tiene sentido usar este parámetro de consulta si sabe que una imagen ya se ha optimizado (por ejemplo, durante la exportación), por lo que no se optimiza nuevamente por segunda vez.
import React from 'react' ;
export default ( ) => (
< img src = { require ( './images/my-image.jpg?original' ) } />
) ; Esto también se puede combinar con la consulta ?original&inline recursos ?inline o ?url
Requiere el paquete opcional
lqip-loader(npm install lqip-loader)
Al usar esta consulta de recursos, se crea una imagen muy pequeña (aproximadamente 10x7 píxel). Luego puede mostrar esta imagen como marcador de posición hasta que se haya cargado la imagen real (grande).
Normalmente estirará esta pequeña imagen al mismo tamaño que la imagen real es, como lo hace Medium.com . Para que la imagen estirada se vea mejor en Chrome, consulte esta solución y agregue un filtro de desenfoque a su imagen.
import React from 'react' ;
export default ( ) => (
< img src = { require ( './images/my-image.jpg?lqip' ) } />
) ;
/**
* Replaces the src with a tiny image in base64.
*/ Requiere el paquete opcional
lqip-loader(npm install lqip-loader)
Esta consulta de recursos le devuelve una matriz con valores hexadecimales de los colores dominantes de una imagen. También puede usar esto como marcador de posición hasta que la imagen real se haya cargado (por ejemplo, como fondo) como lo hace la búsqueda de imágenes de Google .
El número de colores devueltos puede variar y depende de cuántos colores diferentes tienen su imagen.
import React from 'react' ;
export default ( ) => (
< div style = { { backgroundColor : require ( './images/my-image.jpg?lqip-colors' ) [ 0 ] } } > ... </ div >
) ;
/**
* require('./images/my-image.jpg?lqip-colors')
*
* returns for example
*
* ['#0e648d', '#5f94b5', '#a7bbcb', '#223240', '#a4c3dc', '#1b6c9c']
*/ Requiere el paquete opcional
image-trace-loader(npm install image-trace-loader)
Con la consulta de recursos ?trace , puede generar esquemas de imagen SVG que se pueden usar como marcador de posición al cargar la imagen original.
import React from 'react' ;
import MyImage from './images/my-image.jpg?trace' ;
export default ( ) => (
< div >
< img src = { MyImage . trace } /> { /* <-- SVG trace */ }
< img src = { MyImage . src } /> { /* <-- Normal image which you want to lazy load */ }
</ div >
) ;
/**
* Results in:
*
* <div>
* <img src="data:image/svg+xml,...">
* <img src="/_next/static/images/image-trace-85bf5c58ce3d91fbbf54aa03c44ab747.jpg">
* </div>
*/ require('./images/my-image.jpg?trace') Devuelve un objeto que contiene el rastreo ( trace ) como un SVG en línea y la imagen normal ( src ) que también se optimiza.
La traza tendrá exactamente el mismo ancho y altura que su imagen normal.
Las opciones para el cargador se pueden configurar en la configuración del complemento.
Requiere el paquete opcional
responsive-loader(npm install responsive-loader) yjimp(Implementación de nodo, más lento) osharp(binario, más rápido)
Después de la consulta de recursos ?resize , puede agregar cualquier otra consulta del responsive-loader que le permita cambiar el tamaño de las imágenes y crear conjuntos de fuentes completas.
import React from 'react' ;
const oneSize = require ( './images/my-image.jpg?resize&size=300' ) ;
const multipleSizes = require ( './images/my-image.jpg?resize&sizes[]=300&sizes[]=600&sizes[]=1000' ) ;
export default ( ) => (
< div >
{ /* Single image: */ }
< img src = { oneSize . src } />
{ /* Source set with multiple sizes: */ }
< img srcSet = { multipleSizes . srcSet } src = { multipleSizes . src } />
</ div >
) ; Si solo se usa el size o sizes parámetro, el parámetro de ?resize también se puede omitir (por ejemplo my-image.jpg?size=300 ). Pero es necesario para todos los demás parámetros de responsive-loader .
También puede establecer configuraciones globales en la propiedad responsive (en el archivo next.config.js ) y definir, por ejemplo, los tamaños predeterminados que se generarán cuando no especifique uno para una imagen (por ejemplo, solo my-image.jpg?resize ).
Requiere los paquetes de optimización opcionales
imagemin-svgoysvg-sprite-loader(npm install imagemin-svgo svg-sprite-loader)
Si necesita peinar o animar sus SVG? Incluir podría ser la opción incorrecta, porque eso termina en muchos elementos DOM, especialmente cuando se usa el SVG en los elementos de lista, etc. En ese caso, puede usarlo ?sprite
import React from 'react' ;
import MyIcon from './icons/my-icon.svg?sprite' ;
export default ( ) => (
< div >
my page..
< MyIcon />
</ div >
) ; Todos los accesorios pasados al Sprite importado se aplicarán al elemento <svg> , por lo que puede agregar una clase normalmente con <MyIcon className="icon-class" /> .
El objeto svg-sprite-loader también se expone si desea construir su propio componente:
import React from 'react' ;
import icon from './icons/icon.svg?sprite' ;
export default ( ) => (
< div >
my page..
< svg viewBox = { icon . viewBox } >
< use xlinkHref = { `# ${ icon . id } ` } />
</ svg >
</ div >
) ; Para hacer que esto funcione para la representación del lado del servidor, debe agregar estos cambios a su archivo _document.jsx (lea aquí si aún no tiene este archivo):
// ./pages/_document.js
import Document , { Head , Main , NextScript } from 'next/document' ;
import sprite from 'svg-sprite-loader/runtime/sprite.build' ;
export default class MyDocument extends Document {
static async getInitialProps ( ctx ) {
const initialProps = await Document . getInitialProps ( ctx ) ;
const spriteContent = sprite . stringify ( ) ;
return {
spriteContent ,
... initialProps ,
} ;
}
render ( ) {
return (
< html >
< Head > { /* your head if needed */ } </ Head >
< body >
< div dangerouslySetInnerHTML = { { __html : this . props . spriteContent } } />
< Main />
< NextScript />
</ body >
</ html >
) ;
}
} Este complemento utiliza IMG-Loader debajo del capó, que se basa en Mozjpeg, Optipng, Gifsicle y SVGO.
Las opciones predeterminadas para estos optimizadores deben ser suficientes en la mayoría de los casos, pero puede sobrescribir todas las opciones disponibles si lo desea.
Tipo: string[]
Predeterminado: ['jpeg', 'png', 'svg', 'webp', 'gif']
next-optimized-images registran el cargador Webpack para todos estos tipos de archivos. Si no desea que uno de estos se maneje mediante imágenes optimizadas a continuación porque, por ejemplo, tiene otro complemento o regla de cargador personalizado, simplemente retírelo de la matriz.
Tenga en cuenta que una imagen que se maneja no significa que también se optimice automáticamente. El paquete de optimización requerido para esa imagen también debe instalarse. Lea la sección de paquetes de optimización para obtener más información.
Si una imagen se maneja pero no se optimiza, significa que la imagen original se utilizará y copiará para la compilación.
Desde la versión 2.5, los archivos ico también son compatibles, pero para la compatibilidad hacia atrás, deben estar habilitados manualmente. Al agregar 'ico' a la matriz handleImages , el complemento también manejará archivos ico .
Tipo: number
Valor predeterminado: 8192
Los archivos más pequeños se inclinarán con un Data-URI por URL-Loader. Este número define el tamaño máximo del archivo (en bytes) para que las imágenes se ingresen. Si una imagen es más grande, se copiará en la carpeta estática de Next.
Las imágenes se optimizarán en ambos casos.
Para deshabilitar por completo la inscripción de la imagen, establezca este valor en -1 . Luego siempre recuperará una URL de imagen.
Tipo: string
Predeterminado: 'images'
Nombre de la carpeta dentro /static/ en el que las imágenes se copiarán durante la compilación.
Tipo: string
Valor predeterminado: `/_next/static/${imagesFolder}/`
La ruta pública que debe usarse para las URL de imagen. Esto se puede utilizar para servir la imagen optimizada de un servicio de almacenamiento en la nube como S3.
Desde la versión 2 en On, Next-Optimized-Images utiliza la configuración assetPrefx de Next.js de forma predeterminada, pero puede sobrescribirlo con imagesPublicPath especialmente para imágenes.
Tipo: string
Valor predeterminado: `static/${imagesFolder}/`
La ruta de salida que debe usarse para imágenes. Esto se puede usar para tener una carpeta de salida personalizada.
Tipo: string
Predeterminado: '[name]-[hash].[ext]'
El nombre de archivo de las imágenes optimizadas. Asegúrese de mantener la parte [hash] para que reciban un nuevo nombre de archivo si el contenido cambia.
Tipo: boolean
Valor predeterminado: false
Cuando las imágenes se convirtieron a webp en la marcha, .webp se agrega al nombre de archivo. Por ejemplo, test.png se convirtió en test.png.webp . Si desea tener solo una extensión de nombre de archivo como test.webp , puede establecer esta opción en true .
Tipo: boolean
Valor predeterminado: false
Para construcciones de desarrollo más rápidas y HMR, las imágenes no se optimizarán de forma predeterminada cuando se ejecuten en modo de desarrollo. En la producción, las imágenes siempre se optimizarán, independientemente de esta configuración.
Requiere el paquete de optimización opcional
imagemin-mozjpeg(npm install imagemin-mozjpeg)
Tipo: object
Por defecto: {}
Mozjpeg se usa para optimizar las imágenes JPEG. Puede especificar las opciones para ello aquí. Se utilizan las opciones predeterminadas de mozjpeg si omite esta opción.
Requiere el paquete de optimización opcional
imagemin-optipng(npm install imagemin-optipng)
Tipo: object
Por defecto: {}
OPTIPNG se usa para optimizar las imágenes PNG de forma predeterminada. Puede especificar las opciones para ello aquí. Se utilizan las opciones predeterminadas de optipng si omite esta opción.
Requiere el paquete de optimización opcional
imagemin-pngquant(npm install imagemin-pngquant)
Tipo: object
Por defecto: {}
PNGQUANT es una forma alternativa para optimizar las imágenes PNG. Se utilizan las opciones predeterminadas de pngquant si omite esta opción.
Requiere el paquete de optimización opcional
imagemin-gifsicle(npm install imagemin-gifsicle)
Tipo: object
Por defecto:
{
interlaced : true ,
optimizationLevel : 3 ,
} La gifsículo se usa para optimizar las imágenes GIF. Puede especificar las opciones para ello aquí. Las opciones predeterminadas de gifsicle se utilizan si omite esta opción.
Requiere el paquete de optimización opcional
imagemin-svgo(npm install imagemin-svgo)
Tipo: object
Por defecto: {}
SVGO se usa para optimizar las imágenes e iconos SVG. Puede especificar las opciones para ello aquí. Se utilizan las opciones predeterminadas de svgo si omite esta opción.
Los complementos SVGO únicos pueden deshabilitarse/habilitarse en la matriz de complementos:
{
svgo : {
plugins : [
{ removeComments : false }
]
}
} Requiere los paquetes de optimización opcionales
imagemin-svgoysvg-sprite-loader(npm install imagemin-svgo svg-sprite-loader)
Tipo: object
Por defecto:
{
runtimeGenerator : require . resolve ( path . resolve ( 'node_modules' , 'next-optimized-images' , 'svg-runtime-generator.js' ) ) ,
} Al usar la opción SVG Sprite, svg-sprite-loader se usa internamente. Puede sobrescribir la configuración pasada a este cargador aquí.
Requiere el paquete de optimización opcional
webp-loader(npm install webp-loader)
Tipo: object
Por defecto: {}
Imagemin-Webp se utiliza para optimizar las imágenes de WebP y convertir otros formatos en WebP. Puede especificar las opciones para ello aquí. Las opciones predeterminadas de imagemin-webp se utilizan si omite esta opción.
Requiere el paquete opcional
image-trace-loader(npm install image-trace-loader)
Tipo: object
Por defecto: {}
Cuando se usa image-trace-loader para la consulta de recursos ?trace , puede definir todas las opciones para el cargador de trazas de imagen en este objeto. Se utilizan las opciones predeterminadas de image-trace-loader si omite esta opción.
Requiere el paquete opcional de optimización
responsive-loader(npm install responsive-loader)
Tipo: object
Por defecto: {}
La configuración para el responsive-loader se puede definir aquí.
Requiere el paquete opcional de optimización
responsive-loader(npm install responsive-loader)
Tipo: string
Valor predeterminado: 'img-loader'
Por defecto, IMG-Loader maneja la mayoría de las solicitudes. Sin embargo, si usa mucho el responsive-loader y no desea agregar el parámetro de consulta ?resize a cada requerimiento, puede establecer este valor en 'responsive-loader' .
Después de eso, responsive-loader manejará todas las imágenes JPEG y PNG por valor predeterminado, incluso sin un parámetro de consulta adicional. Solo tenga en cuenta que no puede usar ninguno de los parámetros de consulta next-optimized-images se proporciona más en estas imágenes porque la solicitud se reenvía y ya no se modifica. Todos los demás formatos (SVG, WebP y GIF) todavía funcionan como antes con el img-loader y, por lo tanto, tienen todos los parámetros de consulta disponibles.
Tipo: boolean
Valor predeterminado: true
Si no tiene ningún paquete de optimización instalado, ninguna imagen se optimizará. En este caso, se escribe una advertencia en la consola durante la construcción para informarle sobre una posible configuración errónea. Si esta configuración está destinada y de hecho no desea que las imágenes se optimicen, puede establecer este valor en false y ya no obtendrá la advertencia.
Las opciones especificadas aquí son los valores predeterminados .
Entonces, si son lo suficientemente buenos para su caso de uso, no tiene que especificar que tengan un archivo más corto y limpio next.config.js .
// next.config.js
const withPlugins = require ( 'next-compose-plugins' ) ;
const optimizedImages = require ( 'next-optimized-images' ) ;
module . exports = withPlugins ( [
[ optimizedImages , {
// these are the default values so you don't have to provide them if they are good enough for your use-case.
// but you can overwrite them here with any valid value you want.
inlineImageLimit : 8192 ,
imagesFolder : 'images' ,
imagesName : '[name]-[hash].[ext]' ,
handleImages : [ 'jpeg' , 'png' , 'svg' , 'webp' , 'gif' ] ,
removeOriginalExtension : false ,
optimizeImages : true ,
optimizeImagesInDev : false ,
mozjpeg : {
quality : 80 ,
} ,
optipng : {
optimizationLevel : 3 ,
} ,
pngquant : false ,
gifsicle : {
interlaced : true ,
optimizationLevel : 3 ,
} ,
svgo : {
// enable/disable svgo plugins here
} ,
webp : {
preset : 'default' ,
quality : 75 ,
} ,
} ] ,
] ) ; next.config.jsMIT © Cyril Wanner
