Responsive Bilder sind Bilder, von denen mehrere Dateien in unterschiedlichen Größen bereitliegen und aus denen der Browser selbst die passende auswählt. Die Auswahl richtet sich danach, wie breit das Bild im Layout tatsächlich dargestellt wird und wie hoch die Pixeldichte des Bildschirms ist. Ohne diese Technik lädt ein Telefon dieselbe Datei wie ein großer Monitor und rechnet sie beim Anzeigen klein.
- Responsive Bilder
Technik, bei der ein Bild in mehreren Größen bereitliegt und der Browser die passende Variante für Layoutbreite und Pixeldichte auswählt.
Beispiel: „Das Headerbild liegt in fünf Breiten vor, von 480 bis 2400 Pixeln.“Auch: Responsive Images. Unter Entwicklern ist die englische Form gebräuchlicher.
Abgrenzung zu Retina-Assets: Retina-Assets sind die Bilddateien in doppelter Auflösung. Responsive Bilder sind der Mechanismus, der entscheidet, wann welche dieser Dateien überhaupt geladen wird.
srcset und sizes ergeben zusammen die Auswahl
Das Attribut srcset listet die verfügbaren Dateien mit ihrer echten Pixelbreite auf, angegeben mit dem Kürzel w. Das Attribut sizes sagt dem Browser, wie breit das Bild im fertigen Layout sein wird. Erst aus beiden Angaben und der Pixeldichte des Geräts berechnet er, welche Datei er anfordert, und zwar bevor das Stylesheet ausgewertet ist.
<img
src="teaser-800.jpg"
srcset="teaser-480.jpg 480w, teaser-800.jpg 800w, teaser-1600.jpg 1600w"
sizes="(min-width: 60rem) 50vw, 100vw"
width="1600" height="900"
alt="Beschreibung des Bildinhalts">In der Angabe sizes stecken die meisten Fehler aus der Praxis. Steht dort 100vw, obwohl das Bild nur in einer halbbreiten Spalte läuft, lädt der Browser durchgehend die zu große Variante.
Wann du das picture-Element brauchst
srcset und sizes liefern immer dasselbe Bild in verschiedenen Größen. Sobald sich der Ausschnitt ändern soll, reicht das nicht mehr: Ein breites Querformat, das auf dem Desktop wirkt, zeigt auf dem Telefon nur noch einen Streifen ohne erkennbares Motiv. Für diesen Fall gibt es das picture-Element, das je nach Media Query eine andere Quelldatei einsetzt. Die Spezifikation unterscheidet hier zwischen Art Direction und Resolution Switching.
Dieselbe Konstruktion dient dazu, moderne Bildformate anzubieten. AVIF und WebP liefern bei gleicher Bildwirkung kleinere Dateien, und über mehrere source-Angaben bekommt jeder Browser das Format, das er versteht.
<picture>
<source type="image/avif"
srcset="teaser-480.avif 480w, teaser-800.avif 800w, teaser-1600.avif 1600w"
sizes="(min-width: 60rem) 50vw, 100vw">
<source type="image/webp"
srcset="teaser-480.webp 480w, teaser-800.webp 800w, teaser-1600.webp 1600w"
sizes="(min-width: 60rem) 50vw, 100vw">
<img src="teaser-800.jpg"
srcset="teaser-480.jpg 480w, teaser-800.jpg 800w, teaser-1600.jpg 1600w"
sizes="(min-width: 60rem) 50vw, 100vw"
width="1600" height="900"
alt="Beschreibung des Bildinhalts">
</picture>Die Reihenfolge entscheidet: Der Browser nimmt die erste source, deren Format er kennt, und sieht sich die späteren gar nicht mehr an. Deshalb steht AVIF vor WebP und das img-Element mit dem JPG am Ende. Es ist kein Zusatz, sondern der Rückfall für alles, was mit keiner source etwas anfangen kann, und trägt deshalb auch die Angaben zu alt, width und height.
Was das für die Ladezeit bedeutet
Bilder machen auf den meisten Websites den größten Teil der übertragenen Datenmenge aus, und das Headerbild bestimmt häufig den Largest Contentful Paint. Eine zu große Datei verschiebt damit direkt den Messwert, an dem Google die Ladeerfahrung festmacht. Responsive Bilder setzen dort an, weil sie die übertragene Menge an das Gerät koppeln.
Zwei Angaben gehören dazu. Mit width und height am img-Element reserviert der Browser den Platz, bevor die Datei da ist, und das Layout rückt beim Laden nicht nach. Das Attribut loading mit dem Wert lazy verschiebt Bilder unterhalb des sichtbaren Bereichs auf später. Beim Headerbild bleibt es weg, weil es sonst genau das Bild verzögert, das gemessen wird.