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.
Die Auswirkungen eines schnelleren Bildladens können 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. Je niedriger der LCP ist, desto schneller wird Ihre Website von Nutzern als geladen wahrgenommen, insbesondere die wichtigsten Inhalte (das LCP-Element). Durch das Bereitstellen responsiver Bilder lässt sich auch die Bandbreitenauslastung für andere Ressourcen auf der Seite reduzieren, was sich insgesamt positiv auf die Ladezeit der 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 „sharp“ eignet sich gut für die automatische Bildgrößenanpassung, z. B. für die Generierung mehrerer Miniaturansichten 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 unterschiedliche 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. Um Thumbor einzurichten, müssen Sie es auf Ihrem Server installieren. Cloudinary kümmert sich um die Details und erfordert keine Servereinrichtung.
Mehrere Bildversionen bereitstellen
Wenn Sie mehrere Bildversionen angeben, wählt der Browser die beste 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 der 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 können Websites mit unterschiedlichen Layouts für unterschiedliche Darstellungsbereichsgrößen verwendet werden. In diesem Codebeispiel für mehrere Slots erfährst du, wie das geht.
(Noch mehr) Extrapunkte
Zusätzlich zu den bereits aufgeführten Extrapunkten (Bilder sind komplex) können Sie diese Konzepte auch für die Art Direction anwenden. Bei der Art Direction werden für verschiedene Ansichten völlig unterschiedliche Bilder (anstelle verschiedener Versionen desselben Bildes) ausgeliefert. 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.