Responsive Bilder mit srcset, sizes und picture

Worum es geht

Der MDN-Leitfaden zu responsiven Bildern trennt zwei Probleme. Auflösungswechsel: Dasselbe Bild soll einem kleinen oder niedrig auflösenden Bildschirm als kleinere Datei geliefert werden und einem grossen oder hochauflösenden als grössere. Art Direction: Bei unterschiedlichen Layouts wird ein anderer Ausschnitt oder eine andere Komposition gewünscht, etwa ein enger Hochformat-Ausschnitt auf Telefonen.

Auflösungswechsel nutzt srcset bei img. Mit Breitenbeschreibungen gibt jeder Kandidat seine intrinsische Breite an (hero-800.jpg 800w, hero-1600.jpg 1600w), und sizes teilt dem Browser mit, wie breit die Fläche sein wird, als Liste von Medienbedingungen mit je einer Länge und einem abschliessenden Standardwert ((max-width: 600px) 100vw, 50vw). Der Leitfaden merkt an, dass Prozentangaben als Flächenbreiten nicht zulässig sind, vw hingegen schon, und dass der Browser die erste passende Bedingung verwendet und den Rest ignoriert, weshalb die Reihenfolge zählt. Die img-Referenz ergänzt, dass sizes nur dann vorhanden sein soll, wenn srcset Breitenbeschreibungen verwendet. Für ein Bild, das in fester CSS-Grösse angezeigt wird, sind Dichtebeschreibungen (icon.png 1x, icon@2x.png 2x) einfacher.

Art Direction nutzt <picture> mit <source media="…" srcset="…">-Kindelementen und einem img-Fallback; dasselbe Element mit <source type="image/avif"> bietet Format-Fallback, da der Browser Typen überspringt, die er nicht dekodieren kann.

Warum es wichtig ist

Bilder machen häufig den grössten Anteil der Bytes einer Seite aus, und ein Telefon, das ein Desktop-Hero-Bild herunterlädt, verschwendet Bandbreite und verzögert das Rendering. MDN merkt an, dass der Browser mit dem Download von Bildern beginnt, bevor der Hauptparser CSS und JavaScript der Seite geladen hat, weshalb eine Auswahl auf Markup-Ebene den richtigen Download früh starten lässt.

So wird es angewendet

• Zur Build-Zeit drei bis fünf Breiten pro Bild erzeugen und alle auflisten; den Browser wählen lassen. Dateien nach Breite benennen, damit srcset lesbar bleibt.
• sizes aus dem tatsächlichen CSS-Layout ableiten; ein falsches sizes wählt stillschweigend übergrosse Dateien. Bei Layoutänderungen erneut prüfen.
• Immer die Attribute width und height setzen (oder aspect-ratio in CSS), damit Platz reserviert wird, bevor das Bild eintrifft.
• loading="lazy" für Bilder unterhalb der ersten Bildschirmseite und decoding="async" dort verwenden, wo das Bild für den ersten Anstrich nicht benötigt wird; den sichtbaren Hero eager laden lassen.
• alt aussagekräftig halten; responsives Markup ändert nichts an den Barrierefreiheitsregeln.

Stolpersteine

srcset ist ein Hinweis: MDN hält fest, dass der User Agent nach eigenem Ermessen jede der verfügbaren Quellen wählt, sodass ein Browser weiterhin einen grösseren, bereits zwischengespeicherten Kandidaten verwenden kann, statt einen kleineren abzurufen. sizes wird ausgewertet, bevor CSS für das Bild notwendigerweise geladen wurde, weshalb die Werte in sich geschlossen sein müssen. Breiten- und Dichtebeschreibungen in einem srcset zu mischen ist ungültig. Hintergrundbilder in CSS benötigen stattdessen image-set() oder Medienabfragen.