Das Problem: ein Bild für alle Geräte
Ein einzelnes <img src="..."> liefert allen dasselbe Bild — dem 4K-Desktop wie dem alten Handy. Entweder ist es fürs Handy zu groß (Datenverschwendung, langsames Laden) oder für den Desktop zu klein (unscharf). Responsive Images lösen das: Der Browser bekommt mehrere Varianten angeboten und wählt die passende selbst.
srcset: die Auswahl anbieten
Mit srcset listest du Bildvarianten samt ihrer echten Pixelbreite auf (das w steht für die Breite in Pixeln):
<img
src="foto-800.jpg"
srcset="foto-480.jpg 480w,
foto-800.jpg 800w,
foto-1200.jpg 1200w,
foto-1600.jpg 1600w"
alt="Beschreibung">Der src bleibt als Fallback für sehr alte Browser stehen. Alle anderen lesen srcset und wissen jetzt: Es gibt dieses Bild in vier Breiten. Was noch fehlt, ist die Information, wie breit das Bild im Layout tatsächlich erscheint — dafür ist sizes da.
sizes: dem Browser die Layout-Breite verraten
Ohne sizes nimmt der Browser an, das Bild fülle die volle Fensterbreite. Stimmt das nicht (etwa in einem zweispaltigen Layout), lädt er zu groß. sizes beschreibt die Darstellungsbreite je nach Bildschirmgröße:
<img
src="foto-800.jpg"
srcset="foto-480.jpg 480w, foto-800.jpg 800w, foto-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw,
(max-width: 1000px) 50vw,
800px"
alt="Beschreibung">Gelesen wird das so: „Bis 600 px Fensterbreite füllt das Bild 100 % der Breite; bis 1000 px füllt es die Hälfte; sonst ist es 800 px breit." Aus dieser Breite plus der Pixeldichte des Geräts rechnet der Browser, welche srcset-Variante am besten passt — und lädt nur diese.
Warum das auch Retina-Displays bedient
Der Clou: Ein Retina-Handy mit 400 CSS-Pixeln Breite und doppelter Pixeldichte braucht ein 800 px breites Bild für scharfe Darstellung. Genau das rechnet der Browser automatisch aus sizes und Gerätedichte aus — du musst dich nicht um @2x-Varianten kümmern. Der ganze Retina-Zusammenhang steht im Beitrag Retina-Bilder optimieren.
Die Varianten erstellen
Für jede srcset-Breite brauchst du eine echte Bilddatei. Die erzeugst du aus dem Original, indem du es auf die jeweiligen Breiten herunterskalierst — mit dem Skalier-Tool (480, 800, 1200, 1600 px) und anschließend komprimierst. Praktische Faustregel für die Breiten:
- 480w — Smartphones
- 800w — Tablets, kleine Layouts
- 1200w — Desktop
- 1600w — große/Retina-Displays
Format-Auswahl gleich mitnehmen: das picture-Element
Wer zusätzlich moderne Formate (WebP, AVIF) mit Fallback ausliefern will, kombiniert srcset mit dem <picture>-Element:
<picture>
<source type="image/avif" srcset="foto.avif">
<source type="image/webp" srcset="foto.webp">
<img src="foto.jpg" alt="Beschreibung" width="800" height="600">
</picture>Der Browser nimmt das erste Format, das er versteht. So bekommen moderne Browser kleine AVIF/WebP-Dateien, alte den JPG-Fallback — ganz ohne JavaScript.
Häufige Fragen
Was ist der Unterschied zwischen srcset und sizes?
srcset listet dem Browser verschiedene Bildvarianten mit ihrer jeweiligen Pixelbreite auf. sizes sagt dem Browser, wie breit das Bild im Layout dargestellt wird. Aus beidem zusammen wählt der Browser die passendste Variante — kleines Bild fürs Handy, großes für den Desktop.
Brauche ich srcset, wenn ich schon lazy loading nutze?
Ja, das sind zwei verschiedene Dinge. Lazy loading steuert den Zeitpunkt (wann geladen wird), srcset die Größe (welche Variante geladen wird). Zusammen ergeben sie den größten Effekt: das richtige Bild zum richtigen Zeitpunkt.
Wie viele Bildvarianten sollte ich anbieten?
Meist reichen drei bis vier Breiten, etwa 480, 800, 1200 und 1600 Pixel. Zu viele Varianten erhöhen den Erstellungsaufwand ohne spürbaren Nutzen. Wichtig ist, dass Handys eine kleine und Desktops eine große Variante bekommen.
Muss ich das von Hand machen?
Nicht unbedingt. Frameworks wie Next.js und Bild-CDNs erzeugen srcset automatisch. Wer statisch arbeitet, erstellt die Varianten einmal (z. B. mit einem Skalier-Tool) und schreibt srcset von Hand — das Muster ist immer gleich und schnell kopiert.