Bilder sind ein wichtiger Bestandteil jeder Website oder Anwendung. Sie tragen dazu bei, den Inhalt ansprechender und optisch ansprechender zu gestalten.
Wenn Bilder jedoch nicht richtig optimiert sind, können sie eine Website oder App auch verlangsamen.
Warum Bilder optimieren?
Es gibt einige Gründe, warum es wichtig ist, Bilder zu optimieren.
- Es kann helfen, die Ladezeit der Website oder Anwendung zu verbessern.
- Es kann die Datenmenge reduzieren, die ein Client herunterladen muss, wodurch Bandbreitenkosten eingespart werden können.
- Es kann helfen, die Gesamtleistung der Website oder Anwendung zu verbessern.
So optimieren Sie Bilder in Next.js
Es gibt mehrere Möglichkeiten, Bilder in Next.js zu optimieren. Eine besteht darin, die Image-Komponente zu verwenden. Diese Komponente optimiert Bilder automatisch auf Leistung.
Eine weitere Möglichkeit, Bilder zu optimieren, besteht darin, integrierte Bildverarbeitungsfunktionen zu verwenden. Next.js kann Bilder automatisch skalieren, komprimieren und für die Leistung optimieren.
Schließlich können Sie eine Bibliothek eines Drittanbieters wie „react-optimized-image“ verwenden. Diese Bibliothek bietet eine Vielzahl von Möglichkeiten zur Bildoptimierung.
Verwenden der Bildkomponente
Die Image-Komponente ist die einfachste Möglichkeit, Bilder in Next.js zu optimieren. Um es zu verwenden, importieren Sie einfach die Komponente aus der nächstes/Bild Paket.
Sobald Sie die Komponente importiert haben, können Sie sie wie jede andere in React verwenden. Die Image-Komponente verfügt über einige Requisiten, mit denen Sie steuern können, wie Bilder gerendert werden.
importieren Bild aus 'weiter/Bild'ExportStandardFunktionMein Bild() {
zurückkehren (
<Bild
Quelle="/my-image.jpg"
Breite ="200"
Höhe ="200"
Qualität="100"
alt="Mein Bild"
/>
)
}
In diesem Beispiel rendert die Image-Komponente ein Bild mit einer Breite von 200 Pixel und einer Höhe von 200 Pixel. Sie können auch CSS bzw ein Framework wie Tailwind um Ihre App und Bilder zu gestalten.
Einige der erforderlichen Requisiten für die Image-Komponente sind width, height, src und alt. Die src-Prop ist die URL des Bildes, das Sie verwenden möchten. Verwenden Sie die Requisiten Breite und Höhe, um die Breite und Höhe des Bildes in Pixel festzulegen. Die Alt-Prop ist der alternative Text für das Bild.
Einige optionale Requisiten für die Image-Komponente sind Layout, Loader, Platzhalter und Priorität. Die Layout-Prop gibt das Layout des Bildes an. Sie können die Loader-Prop verwenden, um einen benutzerdefinierten Image-Loader anzugeben. Die Platzhalter-Prop gibt einen benutzerdefinierten Bildplatzhalter an. Das Priority-Prop gibt die Priorität des Bildes an.
Einige der Vorteile der Verwendung der Image-Komponente sind:
- Verbesserte Leistung: Einer der Hauptvorteile der Verwendung der Image-Komponente ist die verbesserte Leistung. Die Komponente optimiert Bilder automatisch auf Leistung.
- Automatische Bildgrößenanpassung: Ein weiterer Vorteil der Verwendung der Bildkomponente ist die automatische Größenanpassung von Bildern. Die Komponente kann die Größe von Bildern automatisch an die Requisiten in Breite und Höhe anpassen.
- Automatische Bildkomprimierung: Die Image-Komponente kann Bilder auch automatisch komprimieren, um die Dateigröße zu reduzieren.
- Lazy-Loading-Unterstützung: Die Image-Komponente unterstützt auch verzögertes Laden. Das bedeutet, dass Bilder nur geladen werden, wenn sie auf dem Bildschirm sichtbar sind.
Verwenden einer Bibliothek eines Drittanbieters
Wenn Sie mehr Kontrolle über die Bildoptimierung benötigen, können Sie eine Bibliothek eines Drittanbieters wie verwenden Reaktionsoptimiertes Bild. Diese Bibliothek bietet eine Vielzahl von Möglichkeiten zur Bildoptimierung.
Einige der Funktionen von reaktionsoptimiertem Bild sind:
- Bilder auf Client und Server optimieren: React-Optimized-Image kann Bilder auf Client und Server optimieren. Das bedeutet, dass Bilder sowohl auf Leistung als auch auf Dateigröße optimiert sind.
- Automatische Bildgrößenanpassung: React-optimized-image kann die Größe von Bildern automatisch an die Requisiten in Breite und Höhe anpassen.
- Automatische Bildkomprimierung: React-Optimized-Image kann Bilder auch automatisch komprimieren, um die Dateigröße zu reduzieren.
- Lazy-Loading-Unterstützung: React-Optimized-Image unterstützt auch Lazy Loading. Das bedeutet, dass Bilder nur geladen werden, wenn sie auf dem Bildschirm sichtbar sind.
- Unterstützung für mehrere Bildformate: reagieren-optimiertes-Bild unterstützt mehrere Bildformate, einschließlich JPEG, PNG und WebP.
Um das reaktionsoptimierte Bild zu verwenden, installieren Sie einfach die Bibliothek mit npm.
Nachdem Sie die Bibliothek installiert haben, können Sie sie in Ihr Projekt importieren.
importieren Bild aus 'reaktionsoptimiertes-bild'ExportStandardFunktionNextImg() {
zurückkehren (
<Bild
Quelle="/my-image.jpg"
Größen={[400, 800]}
alt="Mein Bild"
/>
)
}
Sie können auch SVG-Dateien mit reaktionsoptimiertem Bild verwenden.
importieren {Svg} aus 'reaktionsoptimiertes-bild'ExportStandardFunktionNextImg() {
zurückkehren (
<Svg
Quelle="/my-image.svg"
Klassenname=“gefüllt-rot”
/>
)
}
In diesem Beispiel wird die Eigenschaft className verwendet, um einen Klassennamen für das SVG anzugeben. Sie können diesen Klassennamen verwenden, um das SVG mit CSS zu gestalten oder mit JavaScript mit ihm zu interagieren.
reagieren-optimiertes-Bild bietet auch einige andere Vorteile gegenüber den integrierten Bildoptimierungsfunktionen.
Ein Vorteil der Verwendung eines Pakets gegenüber integrierten Funktionen besteht darin, dass es automatisch unterschiedliche Größen von Bildern generieren kann. Das bedeutet, dass Sie nicht verschiedene Versionen desselben Bildes erstellen müssen.
Ein weiterer Vorteil ist, dass es automatisch die passende Bildgröße für das Gerät des Benutzers bereitstellen kann. Das bedeutet, dass Geräte mit hochauflösenden Bildschirmen ein Bild mit hoher Auflösung und Geräte mit Bildschirmen mit niedriger Auflösung ein Bild mit niedriger Auflösung erhalten.
Schließlich ist das reaktionsoptimierte Bild ein vollständig Open-Source-Projekt. Das bedeutet, dass Sie zur Bibliothek beitragen können, wenn Sie eine bestimmte Funktion oder Fehlerbehebung benötigen.
Welche Methode sollten Sie verwenden?
Welche Methode sollten Sie also verwenden, um Bilder in Next.js zu optimieren?
Wenn Sie eine grundlegende Bildoptimierung benötigen, können Sie die integrierten Bildverarbeitungsfunktionen verwenden. Dies ist der einfachste Einstieg in die Bildoptimierung.
Wenn Sie mehr Kontrolle über die Bildoptimierung benötigen, können Sie eine Bibliothek eines Drittanbieters wie „react-optimized-image“ verwenden. Diese Bibliothek bietet erweiterte Funktionen zur Bildoptimierung.
Wenn Sie die absolut beste Leistung benötigen, können Sie eine Kombination aus den integrierten Bildverarbeitungsfunktionen und einer Bibliothek eines Drittanbieters verwenden. Dadurch erhalten Sie das Beste aus beiden Welten. Dieser Ansatz wird Anfängern jedoch nicht empfohlen, da er mehr Einrichtung erfordert.
Verbessern Sie SEO mit optimierten Bildern
Durch die Optimierung der Bilder auf Ihrer Website oder App können Sie Ihre SEO verbessern. Der Algorithmus von Google berücksichtigt die Ladegeschwindigkeit von Websites und Apps. Wenn Ihre Website oder App langsam lädt, wirkt sich das negativ auf Ihre SEO aus.
Mit optimierten Bildern können Sie die Ladezeit Ihrer Website oder App verbessern, was Ihre SEO verbessern kann. Danach können Sie für eine noch bessere Leistung auch ein offenes Graph-Protokoll hinzufügen.