Wenn Sie Bilder in Desktopgröße auf Mobilgeräten ausliefern, kann das 2- bis 4-mal mehr Daten als nötig verbrauchen. Folgen Sie den Richtlinien auf dieser Seite, um die Nutzerfreundlichkeit zu verbessern, indem Sie auf verschiedenen Geräten unterschiedliche Bildgrößen bereitstellen.
Responsive Bilder und Core Web Vitals
Wenn Sie responsive Bilder bereitstellen, werden auf Ihrer Seite die Anzeigefunktionen des Geräts des Nutzers ausgewertet und eines der Bildkandidaten ausgewählt, das auf Grundlage dieser Kriterien optimal für die Anzeige geeignet ist. Das spart Datenvolumen für Ihre Nutzer, vor allem weil auf Geräten mit kleineren Bildschirmen kleinere Bilder ausgeliefert werden.
Ein schnelleres Laden von Bildern kann sich auch auf den Largest Contentful Paint (LCP) Ihrer Seite auswirken. Wenn das LCP-Element Ihrer Seite beispielsweise ein Bild ist, kann die Dauer des Ressourcenladevorgangs durch eine responsive Auslieferung verkürzt werden.
Je kürzer die Ladezeit der Ressourcen ist, desto kürzer ist auch die Ladezeit für ein LCP-Bild. Dadurch wird der LCP-Wert Ihrer Seite verbessert. Ein niedrigerer LCP bedeutet, dass Nutzer Ihre Website als schneller und insbesondere den wichtigsten Inhalt (das LCP-Element) sehen. Durch die Bereitstellung responsiver Bilder kann auch der Bandbreitenkonflikt für andere Ressourcen auf der Seite reduziert werden, was sich allgemein auf die Ladegeschwindigkeit Ihrer Seite auswirken kann.
Bildgröße anpassen
Zwei der beliebtesten Tools zum Ändern der Bildgröße sind das npm-Paket „sharp“ und das ImageMagick-CLI-Tool.
Das Paket „schärfe“ ist eine gute Wahl für die automatische Größenanpassung von Bildern (z. B. zum Generieren mehrerer Miniaturansichten in verschiedenen Größen für alle Videos auf Ihrer Website). Es ist schnell und lässt sich gut in Build-Scripts und ‑Tools einbinden. ImageMagick ist für die einmalige Größenänderung von Bildern praktischer, da es vollständig über die Befehlszeile ausgeführt wird.
scharf
Wenn Sie sharp als Node-Script verwenden möchten, speichern Sie diesen Code als separates Script in Ihrem Projekt und führen Sie ihn dann aus, um Ihre Bilder zu konvertieren:
const sharp = require('sharp');
const fs = require('fs');
const directory = './images';
fs.readdirSync(directory).forEach(file => {
sharp(`${directory}/${file}`)
.resize(200, 100) // width, height
.toFile(`${directory}/${file}-small.jpg`);
});
ImageMagick
Wenn Sie die Größe eines Bildes auf 33 % der ursprünglichen Größe ändern möchten, führen Sie in Ihrem Terminal den folgenden Befehl aus:
convert -resize 33% flower.jpg flower-small.jpg
Wenn Sie die Größe eines Bildes so ändern möchten, dass es in einen Bereich von 300 Pixeln Breite und 200 Pixeln Höhe passt, führen Sie den folgenden Befehl aus:
# macOS/Linux
convert flower.jpg -resize 300x200 flower-small.jpg
# Windows
magick convert flower.jpg -resize 300x200 flower-small.jpg
Wie viele Bildversionen sollten Sie erstellen?
Auf diese Frage gibt es nicht nur eine einzige richtige Antwort. Es ist jedoch üblich, 3 bis 5 verschiedene Größen eines Bildes bereitzustellen. Das Bereitstellen mehrerer Bildgrößen ist zwar besser für die Leistung, nimmt aber mehr Speicherplatz auf Ihren Servern in Anspruch und erfordert etwas mehr HTML-Code.
Sonstige Optionen
Bilddienste wie Thumbor (Open Source) und Cloudinary sind ebenfalls einen Blick wert. Beides sind einfache Möglichkeiten, responsive Bilder zu erstellen, die auch eine Bildmanipulation auf Anfrage ermöglichen. Installieren Sie Thumbor auf Ihrem Server, um Thumbor einzurichten. Cloudinary kümmert sich um die Details für Sie und erfordert keine Servereinrichtung.
Mehrere Bildversionen bereitstellen
Wenn Sie mehrere Image-Versionen angeben, wählt der Browser die beste Version aus:
| Vorher | Nachher |
|---|---|
| <img src="blume-groß.jpg"> | <img src="blume-groß.jpg" srcset="blume-klein.jpg 480w, blume-groß.jpg 1080w" sizes="50vw"> |
Die Attribute src, srcset und sizes des <img>-Tags wirken zusammen, um dieses Endergebnis zu erzielen.
Das Attribut „src“
Durch das src-Attribut funktioniert dieser Code auch in Browsern, die die srcset- und sizes-Attribute nicht unterstützen. Diese Browser laden dann die im src-Attribut angegebene Ressource.
Das Attribut „srcset“
Das srcset-Attribut ist eine durch Kommas getrennte Liste von Bilddateinamen und ihren Beschreibungen für Breite oder Dichte.
In diesem Beispiel werden Breitenbeschreiber verwendet, die dem Browser mitteilen, wie breit ein Bild ist, damit er es nicht herunterladen muss, um das herauszufinden. 480w ist ein Beschreibungselement für die Breite, das dem Browser mitteilt, dass flower-small.jpg 480 Pixel breit ist. 1080w ist ein Beschreibungselement für die Breite, das dem Browser mitteilt, dass flower-large.jpg 1.080 Pixel breit ist.
Zusätzliche Punkte: Sie müssen keine Dichtebeschreiber kennen, um unterschiedliche Bildgrößen bereitzustellen. Wenn Sie jedoch wissen möchten, wie Dichtebeschreiber funktionieren, sehen Sie sich das Codelab zum Umschalten der Auflösung an. Mit Dichtebeschreibern werden je nach Pixeldichte des Geräts unterschiedliche Bilder ausgeliefert.
Das Attribut „sizes“
Das Attribut „sizes“ gibt dem Browser an, wie breit das Bild bei der Anzeige sein soll. Es hat jedoch keinen Einfluss auf die tatsächliche Größe des angezeigten Bildes. Dazu ist weiterhin CSS erforderlich.
Der Browser verwendet diese Informationen zusammen mit den Informationen zum Gerät des Nutzers (einschließlich seiner Abmessungen und Pixeldichte), um zu bestimmen, welches Bild geladen werden soll.
Wenn ein Browser das Attribut „sizes“ nicht erkennt, wird das mit dem Attribut „src“ angegebene Bild geladen. sizes und srcset wurden gleichzeitig eingeführt. Daher unterstützt jeder Browser entweder beide Attribute oder keines.
Zusatzpunkte: Wenn Sie es ganz besonders machen möchten, können Sie mit dem Attribut „sizes“ auch mehrere Slotgrößen angeben. So werden auch Websites berücksichtigt, die unterschiedliche Layouts für unterschiedliche Größen des Darstellungsbereichs verwenden. In diesem Codebeispiel für mehrere Slots wird gezeigt, wie das geht.
(Noch mehr) Extra Credit
Zusätzlich zu den bereits aufgeführten Extrapunkten (Bilder sind komplex) können Sie diese Konzepte auch für die Art Direction anwenden. Bei Art Direction werden unterschiedlich aussehende Bilder (anstelle unterschiedlicher Versionen desselben Bildes) für verschiedene Darstellungsbereiche bereitgestellt. Weitere Informationen finden Sie im Codelab zur Art Direction.
Bestätigen
Nachdem Sie responsive Bilder implementiert haben, können Sie mit Lighthouse prüfen, ob Sie keine Bilder vergessen haben. Führen Sie die Lighthouse-Leistungsprüfung durch (Lighthouse > Optionen > Leistung) und sehen Sie sich die Ergebnisse der Prüfung Bilder richtig skalieren an. In diesen Ergebnissen sind die Bilder aufgeführt, deren Größe Sie noch ändern müssen.