Mit „srcset“ wird die richtige Bildgröße automatisch ausgewählt.
Laut HTTP Archive wiegt eine typische mobile Webseite mehr als 2,6 MB. Mehr als zwei Drittel dieses Gewichts entfallen auf Bilder. Das ist eine gute Gelegenheit für Optimierungen.
Zusammenfassung
- Speichern Sie keine Bilder, die größer als die angezeigte Größ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. Der Wertwteilt dem Browser die Breite der einzelnen Versionen mit:
<img src="small.jpg"
srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 1500w"
alt="…">
Bilder in der richtigen Größe speichern
Sie können Ihre Website schneller und weniger datenhungrig machen, indem Sie Bilder mit Abmessungen verwenden, die der Bildschirmgröße entsprechen. Achten Sie also beim Speichern darauf, dass die Bilder die richtige Breite und Höhe haben.
Sehen Sie sich die Bilder unten an.
Sie sehen fast identisch aus, aber die Dateigröße der einen ist mehr als zehnmal größer als die der anderen.
Das erste Bild hat eine viel größere Dateigröße, da es mit Abmessungen gespeichert wird, die viel größer als die Displaygröße sind. Da beide Bilder mit einer festen Breite von 300 Pixeln angezeigt werden, ist es sinnvoll, ein Bild zu verwenden, das in derselben Größe gespeichert ist.
Verwende für feste Breiten Bilder, die dieselbe Größe wie die Anzeigegröße haben.
Aber was ist, wenn die Anzeigegröße variiert?
In einer Multiscreen-Welt werden Bilder nicht immer in einer festen Größe angezeigt.
Bildelemente können eine prozentuale Breite haben oder Teil von responsiven Layouts sein, bei denen sich die Größe der Bildanzeige an die Bildschirmgröße anpasst.
…und was ist mit Geräten mit vielen Pixeln wie Retina-Displays?
Browser bei der Auswahl der richtigen Bildgröße unterstützen
Wäre es nicht toll, wenn Sie jedes Bild in verschiedenen Größen verfügbar machen und dann dem Browser die Auswahl der für das Gerät und die Bildschirmgröße am besten geeigneten Größe überlassen könnten? Leider gibt es eine Zwickmühle, wenn es darum geht, herauszufinden, welches Bild am besten geeignet ist. Der Browser sollte das kleinstmögliche Bild verwenden. Er kann die Breite eines Bildes jedoch erst kennen, wenn es heruntergeladen wurde.
Hier kommt srcset ins Spiel. Sie speichern Bilder in verschiedenen Größen und geben dann die Breite der einzelnen Versionen im Browser an:
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
alt="…">
Die w-Werte geben die Breite der einzelnen Bilder in Pixeln an. Beispielsweise teilt small.jpg 500w dem Browser mit, dass small.jpg 500 Pixel breit ist. So kann der Browser je nach Bildschirmtyp und Größe des Darstellungsbereichs das kleinstmögliche Bild auswählen, ohne Bilder zur Überprüfung ihrer Größe herunterladen zu müssen.
Im Bild unten ist srcset zu sehen. Wenn Sie einen Laptop oder Computer verwenden, ändern Sie die Größe des Browserfensters und öffnen Sie diese Seite noch einmal.
Prüfen Sie dann im Bereich „Netzwerk“ Ihrer Browsertools, welches Bild verwendet wurde.
Sie müssen dies in einem Inkognitofenster tun, da die ursprüngliche Bilddatei sonst im Cache gespeichert wird.
Wie kann ich mehrere Bildgrößen erstellen?
Für jedes Bild, das Sie mit srcset verwenden möchten, müssen mehrere Größen verfügbar sein.
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 die Prozesse 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 Bilder in verschiedenen Größen zu erstellen. Weitere Informationen finden Sie unter „Bilder mit Imagemin komprimieren“.
Bilddienst verwenden
Das Erstellen und Bereitstellen von Images kann mit einem kommerziellen Dienst wie Cloudinary oder einem Open-Source-Äquivalent wie Thumbor, das Sie selbst installieren und ausführen, automatisiert werden.
Sie laden Ihre Bilder in hoher Auflösung hoch und der Bilddienst erstellt und liefert automatisch verschiedene Bildformate und ‑größen, je nach den URL-Parametern. Öffnen Sie beispielsweise dieses Beispielbild in Cloudinary und ändern Sie den w-Wert oder die Dateiendung in der URL-Leiste.
Bilddienste bieten auch erweiterte Funktionen wie die Möglichkeit, das automatische „intelligente Zuschneiden“ für verschiedene Bildgrößen zu nutzen und an Browser, die das Format unterstützen, automatisch WebP-Bilder statt JPEGs zu senden, ohne die Dateiendung zu ändern.
Was kann ich tun, wenn das Bild in verschiedenen Größen nicht richtig aussieht?
In diesem Fall müssen Sie das Element <picture> für die „Art Direction“ verwenden: Sie müssen ein anderes Bild oder ein anderes Bildausschnitt in verschiedenen Größen bereitstellen. Weitere Informationen finden Sie im Codelab Art Direction.
Wie sieht es mit der Pixeldichte aus?
High-End-Geräte haben kleinere (dichtere) physische Pixel. Ein High-End-Smartphone kann beispielsweise zwei- oder dreimal so viele Pixel in jeder Pixelzeile haben wie ein günstigeres Gerät.
Das kann sich auf die Größe auswirken, in der Sie Ihre Bilder speichern müssen. Wir gehen hier nicht auf die Details ein, aber Sie können sich im Codelab „Beschreibungen der Dichte verwenden“ weiter informieren.
Wie sieht es mit der Anzeigegröße des Bildes aus?
Mit sizes lässt sich srcset noch besser nutzen.
Andernfalls verwendet der Browser die volle Breite des Darstellungsbereichs, wenn er ein Bild aus einem srcset auswählt. Das Attribut sizes teilt dem Browser die Breite mit, in der ein Bildelement angezeigt wird. So kann der Browser die kleinstmögliche Bilddatei auswählen, bevor er Layoutberechnungen durchführt.
Im folgenden Beispiel teilt sizes="50vw" dem Browser mit, dass dieses Bild mit 50 % der Breite des Darstellungsbereichs angezeigt werden soll.
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
sizes="50vw"
alt="…">
Sie können sich das unter simpl.info/sizes und im Codelab Mehrere Steckplatzbreiten angeben ansehen.
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.
Das macht srcset und sizes zu großartigen progressiven Verbesserungen.
Weitere Informationen
Sehen Sie sich den Bereich Bilder optimieren von web.dev an, um mehr über die Bildoptimierung zu erfahren. Wenn Sie mehr Anleitung benötigen, können Sie den kostenlosen Kurs Responsive Bilder von Udacity ausprobieren.