Automatische Bildoptimierung
Nicht optimierte Bilder
Mit regulärem HTML haben wir unser Hero-Bild wie folgt hinzugefügt:
Allerdings bedeutet dies, dass wir einige Dinge manuell optimieren müssen, wie:
- Sicherstellen, dass unser Bild auf verschiedenen Bildschirmgrößen responsiv ist.
- Optimieren unserer Bilder mit einem Drittanbieter-Tool oder einer Bibliothek.
- Lazy-Loading von Bildern, wenn sie in den Viewport gelangen
Die Image-Komponente
Next.js bietet eine Image-Komponente, die diese Optimierungen für uns out-of-the-box übernimmt.
next/image ist eine Erweiterung des HTML-img-Elements, das für das moderne Web weiterentwickelt wurde.
Das bedeutet, dass Größenanpassung, Optimierung und Bereitstellung von Bildern in modernen Formaten wie WebP (wenn der Browser es unterstützt) automatisch mit next/image erfolgen kann.
Die Komponente vermeidet das Ausliefern großer Bilder an Geräte mit kleinerem Viewport und ermöglicht es Next.js, zukünftige Bildformate zu übernehmen und diese Bilder an unterstützende Browser auszuliefern.
Die automatische Bildoptimierung funktioniert mit jeder Bildquelle. Selbst wenn das Bild von einer externen Datenquelle wie einem CMS gehostet wird, kann es dennoch optimiert werden.
Wie funktioniert die automatische Bildoptimierung?
On-Demand-Optimierung
Anstatt Bilder zur Build-Zeit zu optimieren, optimiert Next.js Bilder bei Bedarf, wenn Benutzer sie anfordern. Im Gegensatz zu statischen Site-Generatoren und rein statischen Lösungen erhöhen sich die Build-Zeiten nicht, unabhängig davon, ob zehn oder zehn Millionen Bilder ausgeliefert werden.
Lazy-Loading von Bildern
Bilder werden standardmäßig lazy geladen. Die Seitenleistung wird nicht durch Bilder beeinträchtigt, die sich außerhalb des Viewports befinden. Bilder werden nur geladen, wenn sie in den sichtbaren Bereich gelangen.
Vermeidung von CLS
Bilder werden immer so gerendert, dass Cumulative Layout Shift (CLS) vermieden wird.
Verwendung der Image-Komponente
Aktualisieren wir die App mit next/image, um unser Hero-Bild anzuzeigen. Die Höhen- und Breiten-Props sollten der gewünschten Rendering-Größe entsprechen, mit einem Seitenverhältnis, das dem des Quellbilds entspricht.
Öffnen Sie die Datei pages/index.js und fügen Sie am Anfang der Datei einen Import für Image aus next/image hinzu:
Ersetzen Sie dann das Hero-img durch die Image-Komponente:
Es gibt auch ein Bild in der Fußzeile. Ersetzen wir auch dieses:
Führen Sie abschließend einen weiteren Lighthouse-Bericht in den Chrome DevTools aus und vergleichen Sie Ihre Ergebnisse.
Weiterführende Literatur
- Next.js: Dokumentation zur automatischen Bildoptimierung
- Next.js: API-Referenz für
next/image