Wenn Bilder in Desktop-Größe auf Mobilgeräten bereitgestellt werden, können 2- bis 4-mal mehr Daten als nötig verbraucht werden. Folgen Sie den Richtlinien auf dieser Seite, um die Nutzererfahrung zu verbessern, indem Sie unterschiedliche Bildgrößen für verschiedene Geräte bereitstellen.
Responsive Bilder und Core Web Vitals
Wenn Sie responsive Bilder bereitstellen, wertet Ihre Seite die Anzeigefunktionen des Geräts des Nutzers aus und wählt eines aus einer Reihe von Bildkandidaten aus, die auf Grundlage dieser Kriterien optimal für die Anzeige geeignet sind. Dies spart Daten für Ihre Nutzer, hauptsächlich durch die Bereitstellung kleinerer Bilder für Geräte mit kleineren Bildschirmen.
Die Effekte eines schnelleren Ladens von Bildern 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 responsive Bereitstellung die Ladezeit der Ressource verringern.
Niedrigere Ressourcenladezeiten verringern die Ladezeit eines LCP-Bildes und verbessern so den LCP-Wert Ihrer Seite. Ein niedrigerer LCP-Wert bedeutet, dass für Nutzer die Ladezeit Ihrer Website kürzer ist, insbesondere weil die wichtigsten Inhalte (das LCP-Element) schneller geladen werden. Die Bereitstellung responsiver Bilder kann auch Bandbreitenkonflikte für andere Ressourcen auf der Seite reduzieren, was die Ladegeschwindigkeit Ihrer Seite im Allgemeinen verbessern kann.
Bildgröße anpassen
Zwei der beliebtesten Tools zur Anpassung der Bildgröße sind das Sharp-npm-Paket und das ImageMagick-CLI-Tool.
Das Paket „scharfe“ ist eine gute Wahl, um die Bildgröße zu automatisieren (z. B. zum Generieren von Miniaturansichten in mehreren Größen für alle Videos auf Ihrer Website). Sie ist schnell und lässt sich gut in Build-Scripts und -Tools einbinden. ImageMagick ist bequemer für die einmalige Änderung der Bildgröße, da es vollständig über die Befehlszeile ausgeführt wird.
scharf
Wenn Sie Sharp als Node-Skript verwenden möchten, speichern Sie diesen Code als separates Skript in Ihrem Projekt und führen Sie ihn dann aus, um Ihre Images 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
Um die Größe eines Bildes auf 33% seiner Originalgröße zu ändern, 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 × 200 Pixel 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 Image-Versionen sollten Sie erstellen?
Es gibt keine einzige „richtige“ Antwort auf diese Frage. Üblicherweise werden 3–5 verschiedene Größen eines Bildes bereitgestellt. Die Bereitstellung von mehr Bildgrößen verbessert die Leistung, beansprucht aber mehr Platz auf Ihren Servern und erfordert, dass Sie etwas mehr HTML-Code schreiben müssen.
Sonstige Optionen
Auch Bilddienste wie Thumbor (Open-Source) und Cloudinary sollten ausprobiert werden. Beide sind einfache Möglichkeiten zum Erstellen responsiver Bilder, die bei Bedarf auch Bildbearbeitung ermöglichen. Installiere Thumbor auf deinem Server, um Thumbor einzurichten. Cloudinary kümmert sich für Sie um die Details und erfordert keine Servereinrichtung.
Mehrere Image-Versionen bereitstellen
Wenn Sie mehrere Image-Versionen angeben, wählt der Browser die beste Version aus:
| Vorher | Nachher |
|---|---|
| <img src="große-blumen-.jpg"> | <img src="flower-large.jpg" srcset="flower-small.jpg 480w, flower-large.jpg 1080w" size="50vw"> |
Die Attribute src, srcset und sizes des <img>-Tags interagieren alle miteinander, um dieses Endergebnis zu erzielen.
Attribut „src“
Das Attribut „src“ sorgt dafür, dass dieser Code in Browsern funktioniert, die die Attribute srcset und sizes nicht unterstützen. Diese Browser laden stattdessen die im Attribut src angegebene Ressource.
Attribut "srcset"
Das Attribut srcset ist eine durch Kommas getrennte Liste von Bilddateinamen und ihren Deskriptoren für Breite oder Dichte.
In diesem Beispiel werden Breitendeskriptoren verwendet, die dem Browser mitteilen, wie breit ein Bild ist, damit er das Bild nicht herunterladen muss, um es herauszufinden. 480w ist ein Breitendeskriptor, der dem Browser mitteilt, dass flower-small.jpg 480 Pixel breit ist. 1080w ist ein Breitendeskriptor, der dem Browser mitteilt, dass flower-large.jpg 1.080 Pixel breit ist.
Zusätzlicher Beitrag: Sie müssen keine Dichtedeskriptoren kennen, um unterschiedliche Bildgrößen bereitzustellen. Wenn Sie mehr über die Funktionsweise von Dichtedeskriptoren erfahren möchten, sehen Sie sich das Code-Lab zum Wechsel der Auflösung an. Dichtedeskriptoren werden verwendet, um verschiedene Bilder basierend auf der Pixeldichte des Geräts bereitzustellen.
Das Attribut 'Größen' [sizes]
Das Größenattribut teilt dem Browser mit, wie breit das Bild ist, wenn es angezeigt wird. Es wirkt sich jedoch nicht auf die Anzeigegröße des Bildes aus, sodass Sie dafür immer noch CSS benötigen.
Der Browser verwendet diese Informationen zusammen mit dem, was er über das Gerät des Nutzers weiß (einschließlich dessen Abmessungen und Pixeldichte), um zu bestimmen, welches Bild geladen werden soll.
Wenn ein Browser das Attribut „sizes“ nicht erkennt, wird das durch das Attribut „src“ angegebene Bild geladen. sizes und srcset wurden gleichzeitig eingeführt, sodass jeder Browser entweder beide Attribute oder keines unterstützt.
Zusätzlicher Schritt: Mit dem Attribut „sizes“ können Sie auch mehrere Größen von Anzeigenflächen angeben. Das gilt auch für Websites, die unterschiedliche Layouts für unterschiedliche Größen des Darstellungsbereichs verwenden. Sehen Sie sich dazu dieses Codebeispiel für mehrere Slots an.
(Noch mehr) Zusätzliche Punkte
Du kannst diese Konzepte nicht nur für die bereits aufgeführten Quellenangaben (Bilder sind komplex) verwenden, sondern auch für die Art Direction (Art Direction). Mit „Art Direction“ wird das Bereitstellen von völlig unterschiedlich aussehenden Bildern (anstelle verschiedener Versionen desselben Bildes) für verschiedene Darstellungsbereiche bezeichnet. Weitere Informationen findest du im Art Direction Code-Lab.
Bestätigen
Nachdem Sie responsive Bilder implementiert haben, können Sie mit Lighthouse ermitteln, ob Sie keine Bilder übersehen haben. Führen Sie die Lighthouse-Leistungsprüfung aus (Lighthouse > Optionen > Leistung) und sehen Sie sich die Ergebnisse der Prüfung Bilder richtig dimensionieren an. Diese Ergebnisse enthalten die Bilder, deren Größe Sie noch anpassen müssen.