next optimized images
v2.6.1
La version 3 arrive! Il introduit une réécriture complète avec de nombreuses nouvelles fonctionnalités et bugfix. Si vous souhaitez aider à développer et tester la prochaine version principale, veuillez consulter la succursale de Canary pour les instructions d'installation et plus d'informations sur les nouvelles fonctionnalités. (Problème RFC)
Optimiser automatiquement les images utilisées dans les projets Next.js ( jpeg , png , svg , webp et gif ).
Les tailles d'image peuvent souvent être réduites entre 20 et 60%, mais ce n'est pas la seule chose que next-optimized-images font:
webp à la volée pour une taille encore plus petiteSVG sprites pour de meilleures performances lors de l'utilisation des mêmes icônes plusieurs fois (par exemple dans une liste) npm install next-optimized-images
Node> = 8 est requis pour la version 2. Si vous devez prendre en charge les anciennes versions de nœuds, vous pouvez toujours utiliser la version 1 des images suivantes.
Activez le plugin dans votre fichier de configuration 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
] ) ;Voir la section de configuration pour toutes les options disponibles.
L'exemple ci-dessus utilise des bouchons de compose Next-compose pour une API plus propre lorsque vous utilisez de nombreux plugins, consultez son lecture pour un exemple plus détaillé. next-optimized-images fonctionnent également avec l'API du plugin standard:
// 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...
} ) ; À partir de la version 2, vous devez installer les packages d'optimisation dont vous avez besoin dans votre projet en plus de ce plugin. next-optimized-images détectent ensuite tous les packages pris en charge et les utilisent.
Vous n'avez donc qu'à installer ces packages avec NPM, aucune étape supplémentaire n'est nécessaire après cela.
Les packages d'optimisation suivants sont disponibles et pris en charge:
| Package d'optimisation | Description | Lien de projet |
|---|---|---|
imagemin-mozjpeg | Optimise les images JPEG. | Lien |
imagemin-optipng | Optimise les images PNG. | Lien |
imagemin-pngquant | Alternative pour optimiser les images PNG. | Lien |
imagemin-gifsicle | Optimise les images GIF. | Lien |
imagemin-svgo | Optimise les images et les icônes SVG. | Lien |
svg-sprite-loader | Ajoute la possibilité d'utiliser SVG Sprites pour de meilleures performances. Lisez la section Sprite pour plus d'informations. | Lien |
webp-loader | Optimise les images WebP et peut convertir les images JPEG / PNG en WebP à la volée (WebP Resource Query). | Lien |
lqip-loader | Génère des espaces réservés d'image de faible qualité et peut extraire les couleurs dominantes d'une image (LQIP Resource Query) | Lien |
responsive-loader | Peut redimensionner des images à la volée et en créer plusieurs versions pour un srcset .IMPORTANT : Vous devez en outre installer jimp (implémentation de nœud, plus lent) ou sharp (binaire, plus rapide) | Lien |
image-trace-loader | Génère des contours d'image SVG qui peuvent être utilisés comme espace réservé lors du chargement de l'image d'origine (requête de ressources de trace). | Lien |
Exemple: si vous avez des images JPG, PNG et SVG dans votre projet, vous devrez alors fonctionner
npm install imagemin-mozjpeg imagemin-optipng imagemin-svgo
Pour installer tous les packages en option, exécutez:
npm install imagemin-mozjpeg imagemin-optipng imagemin-gifsicle imagemin-svgo svg-sprite-loader webp-loader lqip-loader responsive-loader jimp image-trace-loaderoptimizeImagesInDev .
Selon votre configuration de build / déploiement, il est également possible de les installer en tant que DevDependces. Assurez-vous simplement que les packages sont disponibles lorsque vous construisez votre projet.
Depuis la version 2.5, les fichiers ico sont également pris en charge éventuellement, mais doivent être activés dans la configuration handleImages .
Vous pouvez désormais importer ou exiger vos images directement dans vos composants 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>
*/Veuillez noter que les images ne sont optimisées en production que par défaut pour réduire le temps de construction dans votre environnement de développement.
Si vous utilisez des modules CSS, ce package détecte également les images et les a optimisées dans des valeurs url() dans vos fichiers CSS / SASS / moins:
.Header {
background-image : url ( ' ./images/my-image.jpg ' );
}
/* *
* Results in:
*
* .Header {
* background-image: url('/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg');
* }
*/ Si le fichier est inférieur à la limite pour les images en instruction, le require(...) renvoie une base de données de base64 ( data:image/jpeg;base64,... ).
Sinon, next-optimized-images copieront votre image dans le dossier statique de next.js et le require(...) renvoie le chemin d'accès à votre image dans ce cas ( /_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg ).
Vous pouvez utiliser les deux variantes directement sur une image dans l'attribut src ou dans votre fichier CSS dans une valeur url() .
Si vous utilisez Flow ou Eslint-Plugin-Import et que vous rencontrez certains problèmes avec les paramètres de requête, consultez la solution publiée par @eleith.
Il y a des cas où vous ne souhaitez pas référencer un fichier ou obtenir une base de données Base64, mais vous souhaitez en fait inclure le fichier brut directement dans votre HTML. Surtout pour SVGS parce que vous ne pouvez pas les styliser avec CSS s'ils sont dans un attribut src sur une image.
Il existe donc des options supplémentaires que vous pouvez spécifier comme paramètres de requête lorsque vous importez les images.
?include : inclure le fichier brut directement (utile pour les icônes SVG)?webp : convertir une image jpeg / png en webp à la volée?inline : Force Inlining d'une image (Data-Uri)?url : Forcer une URL pour une petite image (au lieu de Data-Uri)?original : utilisez l'image d'origine et ne l'optimisez pas?lqip : générer un espace réservé à l'image de faible qualité?lqip-colors : Extraire les couleurs dominantes d'une image?trace : utilisez des contours tracés comme chargement d'espace réservé?resize : redimensionner une image?sprite : Utilisez des sprites SVG L'image sera désormais directement incluse dans votre HTML sans Data-Uri ou une référence à votre fichier.
Comme décrit ci-dessus, cela est utile pour les SVG afin que vous puissiez les styliser avec 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>
*/L'image sera toujours optimisée, même si elle est directement incluse dans votre contenu (mais par défaut uniquement en production).
Nécessite le package d'optimisation facultatif
webp-loader(npm install webp-loader)
WebP est un format d'image encore meilleur et plus petit, mais il n'est toujours pas si commun et les développeurs ne reçoivent souvent que des images JPEG / PNG.
Si ce paramètre de requête ?webp est spécifié, next-optimized-images convergent automatiquement une image JPEG / PNG au nouveau format WebP.
Pour les navigateurs qui ne prennent pas encore en charge WebP, vous pouvez également fournir un repli à l'aide de la balise <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>
*/ Vous pouvez spécifier une limite d'images en instruction qui les inclura comme un Data-Uri directement dans votre contenu au lieu de référencer un fichier si la taille du fichier est inférieure à cette limite.
Vous ne voulez généralement pas spécifier une limite trop élevée, mais il peut y avoir des cas où vous souhaitez toujours entendre des images plus grandes.
Dans ce cas, vous n'avez pas à définir la limite globale sur une valeur plus élevée, mais vous pouvez ajouter une exception pour une seule image en utilisant les options de requête ?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.
*/ L'inlinaison ne sera appliquée qu'à cette importation, donc si vous importez l'image une deuxième fois sans l'option ?inline , elle sera alors normalement référencée en tant que fichier s'il est supérieur à votre limite.
Lorsque vous avez une image plus petite que votre limite définie pour l'inclinaison, il est normalement incliné automatiquement. Si vous ne voulez pas qu'un petit fichier spécifique soit inclus, vous pouvez utiliser le param de requête de ?url pour toujours récupérer une URL d'image, quelle que soit la limite en ligne.
Si vous utilisez beaucoup cette option, il pourrait également être judicieux de désactiver complètement l'inclinaison et d'utiliser le paramètre ?inline pour les fichiers uniques.
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.
*/ L'inlinaison ne sera désactivée que pour cette importation, donc si vous importez l'image une deuxième fois sans l'option ?url , elle redeviendra à nouveau en ligne si elle est inférieure à votre limite.
L'image ne sera pas optimisée et utilisée telle qu'elle est. Il est logique d'utiliser ce param de requête si vous savez qu'une image a déjà été optimisée (par exemple pendant l'exportation) afin qu'elle ne soit plus optimisée une deuxième fois.
import React from 'react' ;
export default ( ) => (
< img src = { require ( './images/my-image.jpg?original' ) } />
) ; Cela peut également être combiné avec la requête de ressources en ligne ou ?url ou ?inline Eg ?original&inline ).
Nécessite le package en option
lqip-loader(npm install lqip-loader)
Lorsque vous utilisez cette requête de ressource, une très petite image (environ 10x7 pixels) est créée. Vous pouvez ensuite afficher cette image sous forme d'espace réservé jusqu'à ce que la véritable (grande) image soit chargée.
Vous allez normalement étirer cette petite image à la même taille que l'image réelle, comme le fait Medium.com . Pour rendre l'image étirée meilleure dans Chrome, consultez cette solution et ajoutez un filtre flou à votre image.
import React from 'react' ;
export default ( ) => (
< img src = { require ( './images/my-image.jpg?lqip' ) } />
) ;
/**
* Replaces the src with a tiny image in base64.
*/ Nécessite le package en option
lqip-loader(npm install lqip-loader)
Cette requête de ressource vous renvoie un tableau avec des valeurs hexadécimales des couleurs dominantes d'une image. Vous pouvez également l'utiliser comme un espace réservé jusqu'à ce que la véritable image ait chargé (par exemple comme arrière-plan) comme le fait la recherche d'image Google .
Le nombre de couleurs renvoyées peut varier et dépend du nombre de couleurs différentes que votre image a.
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']
*/ Nécessite le package en option
image-trace-loader(npm install image-trace-loader)
Avec la requête de ressources ?trace , vous pouvez générer des contours d'image SVG qui peuvent être utilisés comme espace réservée tout en chargeant l'image d'origine.
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') Renvoie un objet contenant la trace ( trace ) en tant que SVG incliné et l'image normale ( src ) qui est également optimisée.
La trace aura exactement la même largeur et hauteur que votre image normale.
Les options pour le chargeur peuvent être définies dans la configuration du plugin.
Nécessite le package facultatif
responsive-loader(npm install responsive-loader) etjimp(implémentation de nœud, plus lent) ousharp(binaire, plus rapide)
Après la rediffusion des ressources ?resize , vous pouvez ajouter toute autre requête du responsive-loader qui vous permet de redimensionner des images et de créer des ensembles de sources entières.
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 seulement la size ou sizes Param est utilisée, le param ?resize peut également être omis (par exemple my-image.jpg?size=300 ). Mais il est nécessaire pour tous les autres paramètres du responsive-loader .
Vous pouvez également définir des configurations globales dans la propriété responsive (dans le fichier next.config.js ) et définir, par exemple, des tailles par défaut qui seront générées lorsque vous n'en spécifiez pas une pour une image (par exemple, uniquement my-image.jpg?resize ).
Nécessite les packages d'optimisation facultatifs
imagemin-svgoetsvg-sprite-loader(npm install imagemin-svgo svg-sprite-loader)
Si vous avez besoin de styliser ou d'animer vos SVG? Inclure pourrait être la mauvaise option, car cela se retrouve dans de nombreux éléments DOM, surtout lorsque vous utilisez le SVG dans les éléments de liste, etc. Dans ce cas, vous pouvez utiliser ?sprite qui utilise automatiquement le SVG-SPRITE.
import React from 'react' ;
import MyIcon from './icons/my-icon.svg?sprite' ;
export default ( ) => (
< div >
my page..
< MyIcon />
</ div >
) ; Tous les accessoires transmis au sprite importé seront appliqués à l'élément <svg> , vous pouvez donc ajouter une classe normalement avec <MyIcon className="icon-class" /> .
L'objet svg-sprite-loader est également exposé si vous souhaitez créer votre propre composant:
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 >
) ; Pour que cela fonctionne également pour le rendu côté serveur, vous devez ajouter ces modifications à votre fichier _document.jsx (lisez ici si vous n'avez pas encore ce fichier):
// ./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 >
) ;
}
} Ce plugin utilise un chargeur IMG sous le capot qui est basé sur Mozjpeg, Optipng, Gifsicle et SVGO.
Les options par défaut pour ces optimiseurs devraient être suffisantes dans la plupart des cas, mais vous pouvez écraser toutes les options disponibles si vous le souhaitez.
Type: string[]
Par défaut: ['jpeg', 'png', 'svg', 'webp', 'gif']
next-optimized-images enregistrent le chargeur WebPack pour tous ces types de fichiers. Si vous ne voulez pas que l'un d'eux géré par les images optimisées suivantes car vous, par exemple, avez une autre règle de plugin ou de chargeur personnalisé, le supprimez simplement du tableau.
Veuillez noter qu'une image gérée ne signifie pas qu'elle est également automatiquement optimisée. Le package d'optimisation requis pour cette image doit également être installé. Veuillez lire la section Packages d'optimisation pour plus d'informations.
Si une image est manipulée mais non optimisée, cela signifie que l'image d'origine sera utilisée et copiée pour la construction.
Depuis la version 2.5, les fichiers ico sont également pris en charge, mais pour la compatibilité descendante, ils doivent être activés manuellement. En ajoutant 'ico' au tableau handleImages , le plugin gérera également les fichiers ico .
Type: number
Par défaut: 8192
Les fichiers plus petits seront inclus avec un Data-URI par URL-chargeur. Ce numéro définit la taille maximale du fichier (en octets) pour les images à incliner. Si une image est plus grande, elle sera copiée dans le dossier statique de Suivant.
Les images seront optimisées dans les deux cas.
Pour désactiver complètement l'image en instruction, définissez cette valeur sur -1 . Vous récupérerez alors toujours une URL d'image.
Type: string
Par défaut: 'images'
Nom du dossier à l'intérieur /static/ dans lequel les images seront copiées pendant la construction.
Type: string
Par défaut: `/_next/static/${imagesFolder}/`
Le chemin public qui doit être utilisé pour les URL d'image. Cela peut être utilisé pour servir l'image optimisée à partir d'un service de stockage cloud comme S3.
Depuis la version 2 sur, les images optimisées suivantes utilisent la configuration assetPrefx de next.js par défaut, mais vous pouvez l'écraser avec imagesPublicPath spécialement pour les images.
Type: string
Par défaut: `static/${imagesFolder}/`
Le chemin de sortie qui doit être utilisé pour les images. Cela peut être utilisé pour avoir un dossier de sortie personnalisé.
Type: string
Par défaut: '[name]-[hash].[ext]'
Le nom de fichier des images optimisées. Assurez-vous de garder la partie [hash] afin qu'ils reçoivent un nouveau nom de fichier si le contenu change.
Type: boolean
Par défaut: false
Lorsque des images se sont converties en webp à la volée, .webp a été ajouté au nom de fichier. Par exemple, test.png est devenu test.png.webp . Si vous voulez avoir une seule extension de nom de fichier comme test.webp , vous pouvez définir cette option sur true .
Type: boolean
Par défaut: false
Pour les builds de développement plus rapides et HMR, les images ne seront pas optimisées par défaut lors de l'exécution en mode développement. En production, les images seront toujours optimisées, quel que soit ce paramètre.
Nécessite le package d'optimisation en option
imagemin-mozjpeg(npm install imagemin-mozjpeg)
Type: object
Défaut: {}
Mozjpeg est utilisé pour optimiser les images JPEG. Vous pouvez spécifier les options pour cela ici. Les options par défaut de mozjpeg sont utilisées si vous omettez cette option.
Nécessite le package d'optimisation facultatif
imagemin-optipng(npm install imagemin-optipng)
Type: object
Défaut: {}
Optipng est utilisé pour optimiser les images PNG par défaut. Vous pouvez spécifier les options pour cela ici. Les options par défaut de optipng sont utilisées si vous omettez cette option.
Nécessite le package d'optimisation facultatif
imagemin-pngquant(npm install imagemin-pngquant)
Type: object
Défaut: {}
PNGQUANT est un autre moyen d'optimiser les images PNG. Les options par défaut de pngquant sont utilisées si vous omettez cette option.
Nécessite l'optimisation en option du package
imagemin-gifsicle(npm install imagemin-gifsicle)
Type: object
Défaut:
{
interlaced : true ,
optimizationLevel : 3 ,
} Gifsicle est utilisé pour optimiser les images GIF. Vous pouvez spécifier les options pour cela ici. Les options par défaut de gifsicle sont utilisées si vous omettez cette option.
Nécessite le package d'optimisation facultatif
imagemin-svgo(npm install imagemin-svgo)
Type: object
Défaut: {}
SVGO est utilisé pour optimiser les images SVG et les icônes. Vous pouvez spécifier les options pour cela ici. Les options par défaut de svgo sont utilisées si vous omettez cette option.
Les plugins SVGO simples peuvent être désactivés / activés dans le tableau des plugins:
{
svgo : {
plugins : [
{ removeComments : false }
]
}
} Nécessite les packages d'optimisation facultatifs
imagemin-svgoetsvg-sprite-loader(npm install imagemin-svgo svg-sprite-loader)
Type: object
Défaut:
{
runtimeGenerator : require . resolve ( path . resolve ( 'node_modules' , 'next-optimized-images' , 'svg-runtime-generator.js' ) ) ,
} Lorsque vous utilisez l'option SVG Sprite, svg-sprite-loader est utilisé en interne. Vous pouvez écraser la configuration transmise à ce chargeur ici.
Nécessite le package d'optimisation facultatif
webp-loader(npm install webp-loader)
Type: object
Défaut: {}
ImageMemin-Webp est utilisé pour optimiser les images WebP et convertir d'autres formats en webp. Vous pouvez spécifier les options pour cela ici. Les options par défaut d' imagemin-webp sont utilisées si vous omettez cette option.
Nécessite le package en option
image-trace-loader(npm install image-trace-loader)
Type: object
Défaut: {}
Lorsque vous utilisez image-trace-loader pour la requête de ressources ?trace , vous pouvez définir toutes les options pour le chargeur de trace d'image dans cet objet. Les options par défaut du image-trace-loader sont utilisées si vous omettez cette option.
Nécessite le package d'optimisation
responsive-loader(npm install responsive-loader)
Type: object
Défaut: {}
La configuration du responsive-loader peut être définie ici.
Nécessite le package d'optimisation
responsive-loader(npm install responsive-loader)
Type: string
Par défaut: 'img-loader'
Par défaut, IMG-chargedeur gère la plupart des demandes. Cependant, si vous utilisez beaucoup le responsive-loader et que vous ne souhaitez pas ajouter le ?resize Query Param à chaque exigence, vous pouvez définir cette valeur sur 'responsive-loader' .
Après cela, responsive-loader gérera toutes les images JPEG et PNG par défaut, même sans param de requête supplémentaire. Sachez simplement que vous ne pouvez pas utiliser les paramètres de requête next-optimized-images sur ces images car la demande est tout simplement transmise et non modifiée. Tous les autres formats (SVG, WebP et GIF) fonctionnent toujours comme auparavant avec le img-loader et ont donc tous les paramètres de requête disponibles.
Type: boolean
Par défaut: true
Si vous n'avez pas d'installation d'optimisation, aucune image ne sera optimisée. Dans ce cas, un avertissement est écrit à la console pendant la construction pour vous informer d'une éventuelle erreur de configuration. Si cette configuration est destinée et que vous ne voulez pas que les images soient optimisées, vous pouvez définir cette valeur sur false et vous n'obtiendrez plus l'avertissement.
Les options spécifiées ici sont les valeurs par défaut .
Donc, s'ils sont assez bons pour votre cas d'utilisation, vous n'avez pas à les spécifier pour avoir un fichier next.config.js plus court et plus propre.
// 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
