Verwenden Sie srcset, um automatisch die richtige Bildgröße auszuwählen.
Laut HTTP Archive wiegt eine typische mobile Webseite über 2,6 MB.Mehr als zwei Drittel dieser Gewichtung sind Bilder. Das ist eine großartige Möglichkeit zur Optimierung!
Zusammenfassung
- Speichern Sie keine Bilder, die größer als ihre Anzeigegröße sind.
- Speichern Sie mehrere Größen für jedes Bild und verwenden Sie das Attribut
srcset, damit der Browser die kleinste Größe auswählen kann. Über den Wertwwird dem Browser die Breite jeder Version mitgeteilt:
<img src="small.jpg"
srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 1500w"
alt="…">
Bilder mit der richtigen Größe speichern
Sie können Ihre Website schneller und datenintensiver machen, wenn Sie Bilder verwenden, deren Abmessungen der Displaygröße entsprechen. Anders gesagt: Geben Sie den Bildern beim Speichern die richtige Breite und Höhe.
Sehen Sie sich die Bilder unten an.
Sie scheinen fast identisch zu sein, aber die eine Datei ist mehr als zehnmal größer als die andere.
Die Dateigröße des ersten Bildes liegt viel größer als die Anzeigegröße. Da beide Bilder mit einer festen Breite von 300 Pixeln angezeigt werden, ist es sinnvoll, ein Bild mit derselben Größe zu verwenden.
Verwenden Sie für feste Breiten Bilder, die mit denselben Abmessungen wie die Anzeigegröße gespeichert sind.
Aber was ist, wenn die Displaygröße variiert?
In der heutigen Multiscreen-Welt werden Bilder nicht immer in einer einzigen festen Größe angezeigt.
Bildelemente können eine prozentuale Breite haben oder Teil von responsiven Layouts sein, bei denen die Bildschirmgröße an die Bildschirmgröße angepasst wird.
...und wie sieht es mit pixeligen Geräten wie Retina-Displays aus?
Dem Browser helfen, die richtige Bildgröße auszuwählen
Wäre es nicht großartig, wenn Sie jedes Bild in verschiedenen Größen zur Verfügung stellen könnten und der Browser dann die beste Größe für das Gerät und die Anzeigegröße auswählen könnte? Leider gibt es einen catch-22, wenn es darum geht, welches Image am besten geeignet ist. Der Browser sollte das kleinstmögliche Bild verwenden, aber er kann die Breite eines Bildes nicht ermitteln, ohne es zur Überprüfung herunterzuladen.
Hier kommt srcset ins Spiel. Sie speichern Bilder in unterschiedlichen Größen und teilen dem Browser dann die Breite jeder Version mit:
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
alt="…">
Die Werte für w geben die Breite der einzelnen Bilder in Pixeln an. Zum Beispiel teilt small.jpg 500w dem Browser mit, dass small.jpg 500 Pixel breit ist. Auf diese Weise kann der Browser je nach Bildschirmtyp und Größe des Darstellungsbereichs das kleinstmögliche Bild auswählen, ohne Bilder herunterladen zu müssen, um ihre Größe zu prüfen.
Im Bild unten sehen Sie srcset in Aktion. Auf einem Laptop oder Desktop-Computer:
Ändere die Größe des Browserfensters und öffne diese Seite noch einmal.
Prüfen Sie dann im Steuerfeld „Netzwerk“ Ihrer Browsertools, welches Bild verwendet wurde.
Sie müssen dies in einem Inkognito- oder privaten Fenster tun, da andernfalls die ursprüngliche Bilddatei im Cache gespeichert wird.
Wie kann ich mehrere Bildgrößen erstellen?
Für jedes Bild, das Sie mit srcset verwenden möchten, müssen Sie mehrere Größen verfügbar machen.
Für einmalige Bilder wie Hero-Images können Sie verschiedene Größen manuell speichern. Wenn Sie viele Bilder haben, z. B. Produktfotos, müssen Sie alles automatisieren. Dafür gibt es zwei Ansätze.
Bildverarbeitung in den Build-Prozess einbinden
Im Rahmen des Build-Prozesses können Sie Schritte hinzufügen, um Versionen Ihrer Images unterschiedlicher Größe zu erstellen. Weitere Informationen finden Sie unter Bilder mit Imagemin komprimieren.
Bilddienst verwenden
Die Erstellung und Bereitstellung von Images kann mit einem kommerziellen Dienst wie Cloudinary oder einem Open-Source-Äquivalent wie Thumbor automatisiert werden, das Sie selbst installieren und ausführen.
Sie laden Ihre hochauflösenden Bilder hoch. Der Bilddienst erstellt dann automatisch je nach URL-Parametern unterschiedliche Bildformate und -größen. Öffnen Sie beispielsweise dieses Beispielbild in Cloudinary und ändern Sie den Wert w oder die Dateiendung in der URL-Leiste.
Bilddienste bieten auch erweiterte Funktionen wie das „intelligente Zuschneiden“ für unterschiedliche Bildgrößen und stellen anstelle von JPEGs automatisch WebP an Browser bereit, die dieses Format unterstützen, ohne dass die Dateierweiterung geändert werden muss.
Was passiert, wenn das Bild in verschiedenen Größen nicht richtig aussieht?
In diesem Fall musst du das Element <picture> für „Art Direction“ verwenden, um ein anderes Bild oder Bild in verschiedenen Größen zuzuschneiden. Weitere Informationen findest du im Codelab zu Art Direction.
Was ist mit der Pixeldichte?
High-End-Geräte haben kleinere (dichtere) physische Pixel. Ein High-End-Smartphone kann beispielsweise doppelt oder dreimal so viele Pixel in jeder Pixelzeile haben wie ein günstigeres Gerät.
Das kann sich auf die Größe auswirken, die Sie zum Speichern der Bilder benötigen. Wir werden an dieser Stelle nicht in die blutigen Details gehen, aber weitere Informationen finden Sie im Codelab Dichtedeskriptoren verwenden.
Wie sieht es mit der Anzeigegröße des Bildes aus?
Sie können sizes verwenden, damit srcset noch besser funktioniert.
Ohne es verwendet der Browser die volle Breite des Darstellungsbereichs, wenn ein Bild aus einem srcset ausgewählt wird. Das Attribut sizes teilt dem Browser mit, wie Breite ein Bildelement angezeigt wird, damit er die kleinstmögliche Bilddatei auswählen kann, bevor Layoutberechnungen vorgenommen werden.
Im folgenden Beispiel teilt sizes="50vw" dem Browser mit, dass dieses Bild in 50% des Darstellungsbereichs angezeigt wird.
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
sizes="50vw"
alt="…">
Ein Beispiel dafür finden Sie unter simpl.info/sizes und im Codelab „Mehrere Slotbreiten angeben“.
Wie sieht es mit der Browserunterstützung aus?
srcset und sizes werden von über 90% der Browser weltweit unterstützt.
Wenn ein Browser srcset oder sizes nicht unterstützt, wird nur das Attribut src verwendet.
Damit werden die Werte für „srcset“ und „sizes“ immer weiter verbessert.
Weitere Informationen
Weitere Informationen zur Bildoptimierung finden Sie auf web.dev im Abschnitt Bilder optimieren. Wenn Sie die nötige Anleitung erhalten möchten, sollten Sie sich den kostenlosen Kurs "Responsive Bilder" von Udacity ansehen.