next image export optimizer
v1.18.0
Utilisez le composant Next.js Advanced <Image /> avec la fonctionnalité d'exportation statique. Optimise toutes les images statiques à une étape supplémentaire après l'exportation statique suivante.
Pour les images utilisant une chaîne de chemin: (par exemple src = "/ profil.png")
Placez les images dans un dossier à l'intérieur du dossier public comme le public / les images
Pour les images utilisant une importation statique: (par exemple src = {ProfilImage})
Vous pouvez placer les images n'importe où dans votre projet. Les images seront optimisées et copiées dans le dossier d'exportation.
Pour les images distantes: (par exemple src = "https://example.com/image.jpg")
Veuillez vous référer à la section sur les images distantes.
npm install next-image-export-optimizer
# Or
yarn add next-image-export-optimizer
pnpm install next-image-export-optimizer
Ajoutez ce qui suit à votre next.config.js . Vous pouvez également utiliser next.config.ts pour les projets 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" ,
} ,
} ; Mettez à jour la commande build dans package.json
{
- "build": "next build",
+ "build": "next build && next-image-export-optimizer"
}Remplacez le composant <image /> par le composant <ExportEdImage /> :
Exemple:
// 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 }
/> ; Pour les images distantes, vous devez spécifier le SRC en tant que chaîne commençant par HTTP ou HTTPS dans le composant ExportEDIMage.
import ExportedImage from "next-image-export-optimizer" ;
< ExportedImage src = "https://example.com/remote-image.jpg" alt = "Remote Image" /> ; Pour que l'optimisation de l'image au moment de la construction fonctionne correctement, vous devez spécifier toutes les URL de l'image distante dans un fichier appelé RemoteOptimizedImages.js dans le répertoire racine de votre projet (où le next.config.js est également stocké). Le fichier doit exporter un tableau de chaînes contenant les URL des images distantes. Le retour d'une promesse d'une telle tableau est également soutenu.
Exemple:
// 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
} ) ;Au moment de la construction, les images seront téléchargées ou lues à partir du cache. Les URL d'image seront remplacées par les URL d'image optimisées dans le composant d'image exporté.
Vous pouvez spécifier le temps de vivre du cache en quelques secondes en définissant la variable d'environnement nextImageExportOptimizer_remoteImageCacheTTL dans votre fichier next.config.js . La valeur par défaut est de 0 secondes (car l'image pourrait avoir changé).
Réglez-le sur:
Si vous souhaitez masquer les URL de l'image distante de l'utilisateur, vous pouvez utiliser l'hélice OverRidesRC du composant ExportEdImage. Cela remplacera l'attribut SRC de la balise d'image par la valeur de l'offre Overridesrc.
Méfiez-vous que le composant d'image ne peut pas retomber à l'URL d'image d'origine si les images optimisées ne sont pas encore générées lorsque vous utilisez l'hélice Overridesrc. Cela se traduira par un lien d'image cassé.
Vous pouvez personnaliser le nom de fichier pour les images optimisées à distance en ajoutant ce qui suit à votre next.config.js :
module . exports = {
env : {
// ... other env variables
nextImageExportOptimizer_remoteImagesFilename : "remoteOptimizedImages.cjs" ,
} ,
// ... other config options
} ; Si votre projet Next.js n'est pas dans le répertoire racine où vous exécutez les commandes, par exemple lorsque vous utilisez un monorepo, vous pouvez spécifier l'emplacement du next.config.js comme argument au script:
"export" : " next build && next-image-export-optimizer --nextConfigPath path/to/my/next.config.js "Spécifiez le chemin du dossier de sortie via la variable d'environnement:
// next.config.js
{ "env" : {
"nextImageExportOptimizer_exportFolderPath" : "path/to/my/export/folder"
} }Ou en passant l'argument au script:
"export" : " next build && next-image-export-optimizer --exportFolderPath path/to/my/export/folder " Si vous souhaitez déployer votre application dans un sous-dossier de votre domaine, vous pouvez définir le Basepath dans le fichier next.config.js :
module . exports = {
basePath : "/subfolder" ,
} ;Le composant ExportEdImage a un accessoire de base de base que vous pouvez utiliser pour passer le chemin de base au composant.
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 vous ne voulez pas que la génération automatique d'images d'emplacement minuscules et floues, définissez la variable d'environnement nextImageExportOptimizer_generateAndUseBlurImages sur false et définissez l'hélice placeholder à partir du composant <exportEDImage /> pour empty .
Si vous souhaitez renommer le nom du dossier d'exportation, définissez la variable d'environnement nextImageExportOptimizer_exportFolderPath au nom du dossier souhaité. La valeur par défaut est nextImageExportOptimizer .
Par défaut, les images sont stockées au format WebP.
Si vous ne souhaitez pas utiliser le format WebP, définissez la variable d'environnement nextImageExportOptimizer_storePicturesInWEBP sur false .
Le composant <ExportEdImage /> est un wrapper autour du composant <image /> de next.js. Il utilise la fonction de chargeur personnalisée pour générer un SRCSET pour différentes résolutions de l'image d'origine. Le navigateur peut ensuite charger la taille correcte en fonction de la taille de la fenêtre actuelle.
L'opération de transformation d'image est optimisée car elle utilise des hachages pour déterminer si une image a déjà été optimisée ou non. De cette façon, les images ne sont optimisées qu'une seule fois et pas à chaque fois que la commande de construction est exécutée.
Le composant <ExportEdImage /> retombe vers l'image d'origine si les images optimisées ne sont pas encore générées en mode de développement. Dans l'application React statique exportée, les images réactives sont disponibles sous forme de SRCSET et chargées dynamiquement par le navigateur.
La méthode d'importation statique est recommandée car elle informe le client de la taille d'image d'origine. Lorsque des largeurs plus grandes que la largeur d'image d'origine sont demandées, la plus grande taille d'image la plus grande dans le tableau des appareils Tize (spécifiée dans la next.config.js ) sera utilisée pour la génération de l'attribut SRCSET. Lorsque vous spécifiez les images en tant que chaîne de chemin, cette bibliothèque créera des doublons de l'image d'origine pour chaque taille d'image dans le tableau de dispositif qui est plus grand que la taille d'image d'origine.
Vous pouvez sortir les images originales et non optimisées à l'aide de l'hélice unoptimized . Exemple:
import ExportedImage from "next-image-export-optimizer" ;
< ExportedImage
src = { testPictureStatic }
alt = "Original, unoptimized image"
unoptimized = { true }
/> ; Vous pouvez toujours utiliser le composant d'image hérité 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" /> ;Images animées: vous pouvez utiliser .gif et images .webp animées. IMAGE-IMAGE-OPTIMIZER OPTIMIZERA ATTROUVERA ANTÉRALEMENT les images animées et généreront le SRCSET pour les différentes résolutions.
Si vous définissez la variable NextImageExportOptizer_StorePicturesInwebp sur true, les images animées seront converties au format .webp qui peut réduire considérablement la taille du fichier. Notez que les images PNG animées ne sont pas prises en charge par ce package.
Vous pouvez voir un exemple en direct de l'utilisation de cette bibliothèque à reactapp.dev/next-image-export-optimizer
AVERTISSEMENT La version 1.0.0 est un changement de rupture. Il suit les modifications introduites dans les 13.0.0 suivantes qui remplace le composant
next/imageparnext/future/image. Si vous utilisez les 12 prochains ou moins, veuillez utiliser la version 0.17.1 .
