next optimized images
v2.6.1
Version 3 kommt! Es führt ein komplettes Umschreiben mit vielen neuen Funktionen und Bugfixen vor. Wenn Sie bei der Entwicklung und Testen der bevorstehenden Hauptversion helfen möchten, lesen Sie bitte die Canary Branch, um Anweisungen für die Installation und weitere Informationen zu den neuen Funktionen zu erhalten. (RFC -Ausgabe)
Automatisch optimieren Sie Bilder, die in Next.js -Projekten verwendet werden ( jpeg , png , svg , webp und gif ).
Bildgrößen können häufig zwischen 20 und 60%reduziert werden, aber dies ist nicht das einzige, was next-optimized-images betrifft:
webp konvertiert werdenSVG sprites für eine bessere Leistung zu verwenden, wenn dieselben Symbole mehrmals verwendet werden (z. B. in einer Liste). npm install next-optimized-images
Node> = 8 ist für Version 2 erforderlich. Wenn Sie ältere Knotenversionen unterstützen müssen, können Sie Version 1 der nächsten Optimierungen verwenden.
Aktivieren Sie das Plugin in Ihrer nächsten.js -Konfigurationsdatei:
// 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
] ) ;Im Abschnitt Konfiguration finden Sie alle verfügbaren Optionen.
Das obige Beispiel verwendet Next-Compose-Plugins für eine sauberere API, wenn viele Plugins verwendet werden. Sehen Sie sich ein detaillierteres Beispiel an. next-optimized-images funktioniert auch mit der Standard-Plugin-API:
// 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...
} ) ; Ab Version 2 müssen Sie zusätzlich zu diesem Plugin die Optimierungspakete installieren, die Sie in Ihrem Projekt benötigen. next-optimized-images erkennt dann alle unterstützten Pakete und verwendet sie.
Sie müssen diese Pakete also nur mit NPM installieren, danach ist kein zusätzlicher Schritt erforderlich.
Die folgenden Optimierungspakete sind verfügbar und unterstützt:
| Optimierungspaket | Beschreibung | Projektlink |
|---|---|---|
imagemin-mozjpeg | Optimiert JPEG -Bilder. | Link |
imagemin-optipng | Optimiert PNG -Bilder. | Link |
imagemin-pngquant | Alternative zur Optimierung von PNG -Bildern. | Link |
imagemin-gifsicle | Optimiert GIF -Bilder. | Link |
imagemin-svgo | Optimiert SVG -Bilder und -Symbole. | Link |
svg-sprite-loader | Fügt die Möglichkeit hinzu, SVG Sprites für eine bessere Leistung zu verwenden. Lesen Sie den Abschnitt Sprite, um weitere Informationen zu erhalten. | Link |
webp-loader | Optimiert Webp -Bilder und kann JPEG/PNG -Bilder in WebP im Fly (WebP Resource Abfrage) konvertieren. | Link |
lqip-loader | Erzeugt Image -Platzhalter von geringer Qualität und kann die dominanten Farben eines Bildes extrahieren (LQIP -Ressourcenabfrage). | Link |
responsive-loader | Kann die Größe der Größe im laufenden Fliegen ändern und mehrere Versionen davon für ein srcset erstellen.Wichtig : Sie müssen zusätzlich entweder jimp (Knotenimplementierung, langsamer) oder sharp (binär, schneller) installieren | Link |
image-trace-loader | Erzeugt SVG -Bildumrisse, die beim Laden des Originalbildes (Trace Resource Abfrage) als Platzhalter verwendet werden können. | Link |
Beispiel: Wenn Sie JPG-, PNG- und SVG -Bilder in Ihrem Projekt haben, müssen Sie dann ausgeführt werden
npm install imagemin-mozjpeg imagemin-optipng imagemin-svgo
Um alle optionalen Pakete zu installieren, führen Sie aus:
npm install imagemin-mozjpeg imagemin-optipng imagemin-gifsicle imagemin-svgo svg-sprite-loader webp-loader lqip-loader responsive-loader jimp image-trace-loaderoptimizeImagesInDev -Konfiguration ändern.
Abhängig von Ihrem Build-/Bereitstellungsaufbau ist es auch möglich, diese als DevDependenzen zu installieren. Stellen Sie einfach sicher, dass die Pakete beim Erstellen Ihres Projekts verfügbar sind.
Da Version 2.5 auch optional unterstützt werden, müssen ico -Dateien in der Config handleImages aktiviert werden.
Sie können jetzt Ihre Bilder direkt in Ihren React -Komponenten importieren oder verlangen:
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>
*/Bitte beachten Sie, dass Bilder standardmäßig in der Produktion optimiert werden, um die Build -Zeit in Ihrer Entwicklungsumgebung zu verkürzen.
Wenn Sie CSS -Module verwenden, erkennt dieses Paket auch Bilder und optimiert sie in url() -Werten in Ihrem CSS/SASS/LEW -Dateien:
.Header {
background-image : url ( ' ./images/my-image.jpg ' );
}
/* *
* Results in:
*
* .Header {
* background-image: url('/_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg');
* }
*/ Wenn die Datei unter der Grenze für Inlining-Bilder liegt, gibt die require(...) eine Base64-Daten-URI zurück ( data:image/jpeg;base64,... ).
next-optimized-images kopieren Sie Ihr Bild in den statischen Ordner von Next.js und der require(...) kopiert den Pfad in Ihrem Bild in diesem Fall ( /_next/static/images/my-image-5216de428a8e8bd01a4aa3673d2d1391.jpg ).
Sie können beide Varianten direkt auf einem Bild im src -Attribut oder in Ihrer CSS -Datei innerhalb eines url() -Wertwerts verwenden.
Wenn Sie Flow- oder Eslint-Plugin-Import verwenden und einige Probleme mit Abfrageparamien haben, lesen Sie die von @EleHeith veröffentlichte Lösung.
Es gibt einige Fälle, in denen Sie nicht auf eine Datei verweisen oder eine Base64-Data-URI erhalten möchten, die RAW-Datei jedoch tatsächlich direkt in Ihr HTML einbeziehen möchten. Besonders für SVGs, weil Sie sie nicht mit CSS stylen können, wenn sie sich in einem src -Attribut auf einem Bild befinden.
Es gibt also zusätzliche Optionen, die Sie beim Importieren der Bilder als Abfrageparameter angeben können.
?include Fügen Sie die RAW -Datei direkt ein (nützlich für SVG -Symbole)?webp : Konvertieren Sie ein JPEG/PNG -Bild in WebP im laufenden Fliegen?inline : Erzwingen Sie, ein Bild (Data-URI) zu beeinträchtigen?url : Erzwingen Sie eine URL für ein kleines Bild (anstelle von Data-URI)?original : Verwenden Sie das Originalbild und optimieren Sie es nicht?lqip : Generieren Sie einen Image -Platzhalter von geringer Qualität?lqip-colors : Extrahieren Sie die dominanten Farben eines Bildes?trace : Verwenden Sie nachverfolgte Umrisse als Platzhalter?resize : Größen Sie die Größe eines Bildes?sprite : Verwenden Sie SVG Sprites Das Bild wird nun direkt in Ihrem HTML ohne Daten-URI oder eine Verweise auf Ihre Datei aufgenommen.
Wie oben beschrieben, ist dies für SVGs nützlich, sodass Sie sie mit CSS stylen können.
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>
*/Das Bild wird weiterhin optimiert, auch wenn es direkt in Ihrem Inhalt enthalten ist (jedoch standardmäßig nur in der Produktion).
Benötigt das optionale Optimierungspaket
webp-loader(npm install webp-loader).
Webp ist ein noch besseres und kleineres Bildformat, aber es ist noch nicht so üblich, und Entwickler empfangen oft nur JPEG/PNG -Bilder.
Wenn dieser Parameter von ?webp -Abfragen angegeben ist, wandelt sich next-optimized-images ein JPEG/PNG-Bild automatisch in das neue Webp-Format um.
Für Browser, die WEBP noch nicht unterstützen, können Sie auch einen Fallback mit dem <picture> -Tag angeben:
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>
*/ Sie können eine Grenze für die Inline-Bilder angeben, die es als Daten-URI direkt in Ihren Inhalt einbeziehen, anstatt auf eine Datei zu verweisen, wenn die Dateigröße unter diesem Grenze liegt.
Normalerweise möchten Sie keine zu hohe Grenze angeben, aber es kann Fälle geben, in denen Sie immer noch größere Bilder inline investieren möchten.
In diesem Fall müssen Sie die globale Grenze nicht auf einen höheren Wert einstellen, können jedoch eine Ausnahme für ein einzelnes Bild mit den Optionen ?inline -Abfragen" hinzufügen.
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.
*/ Die Einbrüche wird nur auf genau diesen Import angewendet. Wenn Sie also das Bild ein zweites Mal ohne die Option ?inline importieren, wird es normalerweise als Datei als Datei bezeichnet, wenn es über Ihrem Limit liegt.
Wenn Sie ein Bild haben, das kleiner als Ihre definierte Grenze für das Inlining ist, wird es normalerweise automatisch eingebaut. Wenn Sie nicht möchten, dass eine bestimmte kleine Datei eingebaut wird, können Sie den Params für ?url -Abfrage verwenden, um immer eine Bild -URL zurückzubekommen, unabhängig von der Inline -Grenze.
Wenn Sie diese Option viel verwenden, könnte es auch sinnvoll sein, das Einlagen vollständig zu deaktivieren und den ?inline für einzelne Dateien zu verwenden.
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.
*/ Die Einbrüche wird für genau diesen Import nur deaktiviert. Wenn Sie also das Bild ein zweites Mal ohne die ?url -Option importieren, wird es erneut eingegeben, wenn es unter Ihrem Limit liegt.
Das Bild wird nicht so optimiert und verwendet wie es ist. Es ist sinnvoll, diesen Abfrageparam zu verwenden, wenn Sie wissen, dass ein Bild bereits optimiert wurde (z. B. während des Exports), sodass es ein zweites Mal nicht wieder optimiert wird.
import React from 'react' ;
export default ( ) => (
< img src = { require ( './images/my-image.jpg?original' ) } />
) ; Dies kann auch mit der ?url oder ?inline -Ressourcenabfrage (z ?original&inline ) kombiniert werden.
Benötigt das optionale Paket
lqip-loader(npm install lqip-loader).
Bei Verwendung dieser Ressourcenabfrage wird ein sehr kleines (ungefähr 10 x 7 Pixel) Bild erstellt. Sie können dieses Bild dann als Platzhalter anzeigen, bis das reale (große) Bild geladen ist.
Normalerweise dehnen Sie dieses winzige Bild auf die gleiche Größe wie das reale Bild, wie es Medium.com tut. Um das gestreckte Bild in Chrom besser aussehen zu lassen, lesen Sie diese Lösung und fügen Sie Ihrem Bild einen Unschärfenfilter hinzu.
import React from 'react' ;
export default ( ) => (
< img src = { require ( './images/my-image.jpg?lqip' ) } />
) ;
/**
* Replaces the src with a tiny image in base64.
*/ Benötigt das optionale Paket
lqip-loader(npm install lqip-loader).
Diese Ressourcenabfrage gibt Ihnen ein Array mit Hex -Werten der dominanten Farben eines Bildes zurück. Sie können dies auch als Platzhalter verwenden, bis das reale Bild (z. B. als Hintergrund) wie die Google -Bildsuche geladen hat.
Die Anzahl der zurückgegebenen Farben kann variieren und hängt davon ab, wie viele verschiedene Farben Ihr Bild hat.
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']
*/ Benötigt den optionalen Paket
image-trace-loader(npm install image-trace-loader)
Mit der Abfrage ?trace Resource" können Sie SVG -Bildumrisse erstellen, die als Platzhalter verwendet werden können, während Sie das Originalbild laden.
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') gibt ein Objekt zurück, das die Trace ( trace ) als eingeleitete SVG und das normale Bild ( src ) enthält, das ebenfalls optimiert wird.
Die Spur hat genau die gleiche Breite und Höhe wie Ihr normales Bild.
Optionen für den Loader können in der Plugin -Konfiguration eingestellt werden.
Erfordert das optionale Paket
responsive-loader(npm install responsive-loader) und entwederjimp(Knotenimplementierung, langsamer) odersharp(binär, schneller)
Nach der Ressourcenabfrage ?resize können Sie eine andere Abfrage des responsive-loader hinzufügen, mit dem Sie Bilder ändern und ganze Quellsätze erstellen können.
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 >
) ; Wenn nur die size oder sizes verwendet werden, kann auch der Paramaramium der ?resize weggelassen werden (z. B. my-image.jpg?size=300 ). Für alle anderen Parameter der responsive-loader ist es jedoch erforderlich.
Sie können auch globale Konfigurationen in der responsive Eigenschaft (in der next.config.js Datei) festlegen und beispielsweise Standardgrößen definieren, die generiert werden, wenn Sie keine für ein Bild angeben (z. B. nur my-image.jpg?resize
Benötigt die optionalen Optimierungspakete
imagemin-svgoundsvg-sprite-loader(npm install imagemin-svgo svg-sprite-loader)
Wenn Sie Ihre SVGs stylen oder animieren müssen? Einbeziehung ist möglicherweise die falsche Option, da dies in vielen DOM-Elementen endet, insbesondere wenn Sie das SVG in Listen-Elementen usw. verwenden, können Sie in diesem Fall ?sprite -SVG-Sprite-Loader verwenden, um eine SVG-Sprite automatisch auf der Seite zu rendern und zu injizieren.
import React from 'react' ;
import MyIcon from './icons/my-icon.svg?sprite' ;
export default ( ) => (
< div >
my page..
< MyIcon />
</ div >
) ; Alle an das importierten Sprite übergebenen Requisiten werden auf das <svg> -Element angewendet, sodass Sie eine Klasse normalerweise mit <MyIcon className="icon-class" /> hinzufügen können.
Das svg-sprite-loader Objekt wird ebenfalls freigelegt, wenn Sie Ihre eigene Komponente erstellen möchten:
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 >
) ; Um dies auch für das serverseitige Rendering zu machen, müssen Sie diese Änderungen Ihrer Datei _document.jsx hinzufügen (hier lesen, wenn Sie diese Datei noch nicht haben):
// ./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 >
) ;
}
} Dieses Plugin verwendet IMG-Lader unter der Motorhaube, die auf Mozjpeg, Optipng, Gifsicle und SVGO basiert.
Die Standardoptionen für diese Optimierer sollten in den meisten Fällen ausreichen, aber Sie können jede verfügbare Option überschreiben, wenn Sie möchten.
Typ: string[]
Standard: ['jpeg', 'png', 'svg', 'webp', 'gif']
next-optimized-images registriert den Webpackloader für alle diese Dateitypen. Wenn Sie nicht möchten, dass eines von diesen von Nächsten optimierten Images behandelt wird, da Sie beispielsweise eine andere Plugin- oder benutzerdefinierte Lader-Regel haben, entfernen Sie es einfach aus dem Array.
Bitte beachten Sie, dass ein mit einem Bild gehandeltes Bild nicht auch automatisch optimiert wird. Das erforderliche Optimierungspaket für dieses Bild muss ebenfalls installiert werden. Bitte lesen Sie den Abschnitt Optimierungspakete für weitere Informationen.
Wenn ein Bild behandelt wird, aber nicht optimiert wird, bedeutet dies, dass das Originalbild für den Build verwendet und kopiert wird.
Da Version 2.5 auch ico -Dateien unterstützt werden, müssen sie jedoch für die Rückwärtskompatibilität manuell aktiviert werden. Durch das Hinzufügen von 'ico' zum Handle -Array handleImages wird das Plugin auch ico -Dateien behandelt.
Typ: number
Standardeinstellung: 8192
Kleinere Dateien werden von URL-Lader mit einem Daten-URI eingebaut. Diese Zahl definiert die maximale Dateigröße (in Bytes) für Bilder, die eingebaut werden sollen. Wenn ein Bild größer ist, wird es in den statischen Ordner von Next kopiert.
Bilder werden in beiden Fällen optimiert.
Um die Image -Inline -Image vollständig zu deaktivieren, setzen Sie diesen Wert auf -1 . Sie erhalten dann immer eine Bild -URL zurück.
Typ: string
Standard: 'images'
Ordnername in /static/ in dem die Bilder während des Builds kopiert werden.
Typ: string
Standard: `/_next/static/${imagesFolder}/`
Der öffentliche Weg, der für Bild -URLs verwendet werden sollte. Dies kann verwendet werden, um das optimierte Bild aus einem Cloud -Speicherdienst wie S3 zu bedienen.
Von Version 2 an verwendet Nächste-optimierte Images die assetPrefx -Konfiguration von Next.js standardmäßig, aber Sie können sie mit imagesPublicPath speziell für Bilder überschreiben.
Typ: string
Standard: `static/${imagesFolder}/`
Der Ausgangspfad, der für Bilder verwendet werden sollte. Dies kann verwendet werden, um einen benutzerdefinierten Ausgangsordner zu haben.
Typ: string
Standard: '[name]-[hash].[ext]'
Der Dateiname der optimierten Bilder. Stellen Sie sicher, dass Sie den [hash] -Teil beibehalten, damit sie einen neuen Dateinamen erhalten, wenn sich der Inhalt ändert.
Typ: boolean
Standard: false
Als Bilder im Fliegen in WebP konvertiert wurden, wurde .webp an den Dateinamen angehängt. Zum Beispiel wurde test.png test.png.webp . Wenn Sie nur eine Dateiname -Erweiterung wie test.webp haben möchten, können Sie diese Option auf true festlegen.
Typ: boolean
Standard: false
Bei schnelleren Entwicklungsbauten und HMR werden Bilder im Entwicklungsmodus standardmäßig nicht optimiert. In der Produktion werden Bilder immer optimiert, unabhängig von dieser Einstellung.
Benötigt das optionale Optimierungspaket
imagemin-mozjpeg(npm install imagemin-mozjpeg).
Typ: object
Standard: {}
Mozjpeg wird zur Optimierung von JPEG -Bildern verwendet. Hier können Sie die Optionen dafür angeben. Die Standardoptionen von mozjpeg werden verwendet, wenn Sie diese Option weglassen.
Benötigt das optionale Optimierungspaket
imagemin-optipng(npm install imagemin-optipng)
Typ: object
Standard: {}
Optipng wird standardmäßig zur Optimierung von PNG -Bildern verwendet. Hier können Sie die Optionen dafür angeben. Die Standardoptionen von optipng werden verwendet, wenn Sie diese Option weglassen.
Benötigt das optionale Optimierungspaket
imagemin-pngquant(npm install imagemin-pngquant)
Typ: object
Standard: {}
Pngquant ist eine alternative Möglichkeit zur Optimierung von PNG -Bildern. Die Standardoptionen von pngquant werden verwendet, wenn Sie diese Option weglassen.
Benötigt das optionale Optimierungspaket
imagemin-gifsicle(npm install imagemin-gifsicle).
Typ: object
Standard:
{
interlaced : true ,
optimizationLevel : 3 ,
} Gifsicle wird zur Optimierung von GIF -Bildern verwendet. Hier können Sie die Optionen dafür angeben. Die Standardoptionen von gifsicle werden verwendet, wenn Sie diese Option weglassen.
Benötigt das optionale Optimierungspaket
imagemin-svgo(npm install imagemin-svgo).
Typ: object
Standard: {}
SVGO wird zur Optimierung von SVG -Bildern und -Icons verwendet. Hier können Sie die Optionen dafür angeben. Die Standardoptionen von svgo werden verwendet, wenn Sie diese Option weglassen.
Single SVGO -Plugins können im Plugins -Array deaktiviert/aktiviert werden:
{
svgo : {
plugins : [
{ removeComments : false }
]
}
} Benötigt die optionalen Optimierungspakete
imagemin-svgoundsvg-sprite-loader(npm install imagemin-svgo svg-sprite-loader)
Typ: object
Standard:
{
runtimeGenerator : require . resolve ( path . resolve ( 'node_modules' , 'next-optimized-images' , 'svg-runtime-generator.js' ) ) ,
} Bei der Verwendung der SVG Sprite-Option wird svg-sprite-loader intern verwendet. Sie können die hier übergebene Konfiguration hier überschreiben.
Benötigt das optionale Optimierungspaket
webp-loader(npm install webp-loader).
Typ: object
Standard: {}
Imagemin-Webp wird verwendet, um WebP-Bilder zu optimieren und andere Formate in WebP zu konvertieren. Hier können Sie die Optionen dafür angeben. Die Standardoptionen von imagemin-webp werden verwendet, wenn Sie diese Option weglassen.
Benötigt den optionalen Paket
image-trace-loader(npm install image-trace-loader)
Typ: object
Standard: {}
Bei Verwendung von image-trace-loader für die Abfrage ?trace Resource" können Sie alle Optionen für den Image Trace Loader in diesem Objekt definieren. Die Standardoptionen von image-trace-loader werden verwendet, wenn Sie diese Option weglassen.
Benötigt das optionale Optimierungspaket
responsive-loader(npm install responsive-loader).
Typ: object
Standard: {}
Die Konfiguration für den responsive-loader kann hier definiert werden.
Benötigt das optionale Optimierungspaket
responsive-loader(npm install responsive-loader).
Typ: string
Standard: 'img-loader'
Standardmäßig behandelt IMG-Lader die meisten Anfragen. Wenn Sie jedoch den responsive-loader viel verwenden und den Paramerad für Abfrage ?resize nicht zu jedem Anforderungen hinzufügen möchten, können Sie diesen Wert auf 'responsive-loader' festlegen.
Danach leitet responsive-loader alle JPEG- und PNG-Bilder pro Standard, auch ohne zusätzlichen Abfrageparam, behandelt. Beachten Sie nur, dass Sie auf diesen Bildern keine der next-optimized-images verwenden können, da die Anforderung nur weiter angegeben und nicht mehr geändert wird. Alle anderen Formate (SVG, WebP und GIF) funktionieren immer noch wie zuvor mit dem img-loader und haben daher alle Abfrageparamien zur Verfügung.
Typ: boolean
Standard: true
Wenn Sie kein Optimierungspaket installiert haben, wird kein Bild optimiert. In diesem Fall wird eine Warnung während des Builds an die Konsole geschrieben, um Sie über eine mögliche Missverständnis zu informieren. Wenn diese Konfiguration beabsichtigt ist und Sie in der Tat nicht möchten, dass die Bilder optimiert werden, können Sie diesen Wert auf false setzen und die Warnung nicht mehr erhalten.
Die hier angegebenen Optionen sind die Standardwerte .
Wenn sie also gut genug für Ihren Anwendungsfall sind, müssen Sie sie nicht angeben, um eine kürzere und sauberere Datei next.config.js Datei zu erhalten.
// 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.js -Datei habenMit © Cyril Wanner
