next image export optimizer
v1.18.0
Verwenden Sie Next.js Advanced <Abage/> Komponente mit der statischen Exportfunktionalität. Optimiert alle statischen Bilder in einem zusätzlichen Schritt nach dem nächsten.
Für Bilder mit einer Pfadzeichenfolge: (z. B. src = "/profil.png"))
Platzieren Sie die Bilder in einem Ordner im öffentlichen Ordner wie öffentlich/bilder
Für Bilder unter Verwendung eines statischen Imports: (z. B. src = {Profilimage})
Sie können die Bilder überall in Ihrem Projekt platzieren. Die Bilder werden optimiert und in den Exportordner kopiert.
Für Remote -Bilder: (z. B. src = "https://example.com/image.jpg"))
Weitere Informationen zu Remote -Bildern finden Sie im Abschnitt.
npm install next-image-export-optimizer
# Or
yarn add next-image-export-optimizer
pnpm install next-image-export-optimizer
Fügen Sie Folgendes zu Ihrem next.config.js . Sie können auch next.config.ts für Typscript -Projekte verwenden .::
// 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" ,
} ,
} ; Aktualisieren Sie den Befehl bauen in package.json
{
- "build": "next build",
+ "build": "next build && next-image-export-optimizer"
}Ersetzen Sie die <bild /> -Komponente durch die <xporedimage /> -Komponente:
Beispiel:
// 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 }
/> ; Für Remote -Bilder müssen Sie die SRC als Zeichenfolge angeben, beginnend mit HTTP oder HTTPS in der ExporedImage -Komponente.
import ExportedImage from "next-image-export-optimizer" ;
< ExportedImage src = "https://example.com/remote-image.jpg" alt = "Remote Image" /> ; Damit die Bildoptimierung zur Erstellung des Erstellungszeit korrekt funktioniert, müssen Sie alle Remote -Bild -URLs in einer Datei namens remoteoptimizedimages.js im Stammverzeichnis Ihres Projekts angeben (wobei der next.config.js ebenfalls gespeichert ist). Die Datei sollte eine Reihe von Zeichenfolgen exportieren, die die URLs der Remote -Bilder enthalten. Ein Versprechen eines solchen Arrays wird ebenfalls unterstützt.
Beispiel:
// 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
} ) ;Zum Zeitpunkt der Erstellung werden die Bilder entweder heruntergeladen oder aus dem Cache gelesen. Die Bild -URLs werden durch die optimierten Bild -URLs in der exportierten Bildkomponente ersetzt.
Sie können die Zeit für das Leben des Cache in Sekundenschnelle angeben, indem Sie die nextImageExportOptimizer_remoteImageCacheTTL -Umgebungsvariable in Ihrer next.config.js -Datei festlegen. Der Standardwert beträgt 0 Sekunden (da sich das Bild möglicherweise geändert hat).
Stellen Sie es auf:
Wenn Sie die Remote -Bild -URLs des Benutzers ausblenden möchten, können Sie die ExporedImage -Komponente verwenden. Dadurch ersetzt das SRC -Attribut des Bild -Tags durch den Wert der OverridesRC -Prop.
Achten Sie darauf, dass die Bildkomponente nicht auf die Original -Bild -URL zurückgreifen kann, wenn die optimierten Bilder noch nicht generiert werden, wenn Sie die OverridesRC -Requisite verwenden. Dies führt zu einem kaputten Bildverbindungslink.
Sie können den Dateinamen für Remote -optimierte Bilder anpassen, indem Sie Folgendes zu Ihrem next.config.js hinzufügen.config.js:
module . exports = {
env : {
// ... other env variables
nextImageExportOptimizer_remoteImagesFilename : "remoteOptimizedImages.cjs" ,
} ,
// ... other config options
} ; Wenn sich Ihr nächstes.js -Projekt nicht im Stammverzeichnis befindet, in dem Sie die Befehle ausführen, z next.config.js
"export" : " next build && next-image-export-optimizer --nextConfigPath path/to/my/next.config.js "Geben Sie den Ausgangsordnerpfad entweder über die Umgebungsvariable an:
// next.config.js
{ "env" : {
"nextImageExportOptimizer_exportFolderPath" : "path/to/my/export/folder"
} }Oder indem Sie das Argument an das Skript weitergeben:
"export" : " next build && next-image-export-optimizer --exportFolderPath path/to/my/export/folder " Wenn Sie Ihre App für einen Unterordner Ihrer Domain bereitstellen möchten, können Sie den Basispath in der next.config.js -Datei festlegen:
module . exports = {
basePath : "/subfolder" ,
} ;Die Exporedimage -Komponente verfügt über eine Basispath -Requisite, mit der Sie den Basispath an die Komponente übergeben können.
import ExportedImage from "next-image-export-optimizer" ;
import testPictureStatic from "PATH_TO_IMAGE/test_static.jpg" ;
< ExportedImage
src = { testPictureStatic }
alt = "Static Image"
basePath = "/subfolder"
/> ; Wenn Sie nicht möchten, dass die automatische Generation von winzigen, verschwommenen Platzhalterbildern die nextImageExportOptimizer_generateAndUseBlurImages -Umgebungsvariable auf false festgelegt und die placeholder -Prop aus der <porteedimage /> -Komponente auf empty .
Wenn Sie den Namen des Export -Ordners umbenennen möchten, setzen Sie die Umgebungsvariable für nextImageExportOptimizer_exportFolderPath auf den gewünschten Ordnernamen. Der Standard ist nextImageExportOptimizer .
Standardmäßig werden die Bilder im Webp -Format gespeichert.
Wenn Sie das WebP -Format nicht verwenden möchten, legen Sie die nextImageExportOptimizer_storePicturesInWEBP -Umgebungsvariable auf false fest.
Die <PorteedImage /> -Komponente ist ein Wrapper um die <bild /> -Komponente von Next.js. Es verwendet die benutzerdefinierte Loader -Funktion, um ein SRCSet für verschiedene Auflösungen des Originalbildes zu generieren. Der Browser kann dann die richtige Größe basierend auf der aktuellen Ansichtsfenstergröße laden.
Der Bildtransformationsvorgang ist optimiert, da Hashes verwendet wird, um festzustellen, ob ein Bild bereits optimiert wurde oder nicht. Auf diese Weise werden die Bilder nur einmal und nicht jedes Mal optimiert, wenn der Baubefehl ausgeführt wird.
Die <xporedimage /> -Komponente fällt auf das Originalbild zurück, wenn die optimierten Bilder im Entwicklungsmodus noch nicht generiert werden. In der exportierten statischen React -App sind die reaktionsschnellen Bilder als SRCSET verfügbar und vom Browser dynamisch geladen.
Die statische Importmethode wird empfohlen, da der Kunden über die ursprüngliche Bildgröße informiert wird. Wenn Breiten größer als die ursprüngliche Bildbreite angefordert werden, wird die nächstgrößte Bildgröße im Gerätearray (im next.config.js ) für die Erzeugung des SRCSet -Attributs verwendet. Wenn Sie die Bilder als Pfadzeichenfolge angeben, erstellt diese Bibliothek für jede Bildgröße im Geräte -Array, das größer als die ursprüngliche Bildgröße ist, Duplikate des Originalbildes.
Sie können die ursprünglichen, nicht optimierten Bilder mit der unoptimized Prop ausgeben. Beispiel:
import ExportedImage from "next-image-export-optimizer" ;
< ExportedImage
src = { testPictureStatic }
alt = "Original, unoptimized image"
unoptimized = { true }
/> ; Sie können weiterhin die Legacy -Bildkomponente next/legacy/image verwenden:
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" /> ;Animierte Bilder: Sie können .gif und animierte .Webp -Bilder verwenden. Next-Image-Export-Optimizer optimiert automatisch die animierten Bilder und generiert das SRCSet für die verschiedenen Auflösungen.
Wenn Sie die Variable NextImageExportoptimizer_Storepicturesinwebp auf true festlegen, werden die animierten Bilder in das Webp -Format konvertiert, das die Dateigröße erheblich reduzieren kann. Beachten Sie, dass animierte PNG -Bilder von diesem Paket nicht unterstützt werden.
Sie können ein Live-Beispiel für die Verwendung dieser Bibliothek unter reactapp.dev/next-image-export-optimizer sehen
Warnversion 1.0.0 ist eine brechende Veränderung. Es folgt den in der nächsten 13.0.0 eingeführten Änderungen, die die
next/imagedurchnext/future/imageersetzt. Wenn Sie die nächsten 12 oder unten verwenden, verwenden Sie bitte Version 0.17.1 .
