Responsive Bilder mit srcset: jedem Bildschirm die passende Datei

Ein Foto, das auf dem Desktop 1.200 Pixel breit erscheint, braucht auf einem Smartphone vielleicht 400 Pixel. Liefert die Website trotzdem die große Datei aus, lädt das Telefon ein Vielfaches an Daten, das es gar nicht anzeigen kann. Responsive Bilder mit srcset lösen das: Du stellst mehrere Fassungen bereit, und der Browser nimmt die passende. Das klingt einfach, die Feinheiten stecken aber im Attribut sizes. Dieser Ratgeber erklärt beides an Beispielen, zeigt, wann das picture-Element nötig ist, und nennt die Fehler, die in der Praxis am häufigsten vorkommen.

Warum das im HTML stehen muss

Man könnte meinen, ein Skript könne die Breite des Bildschirms messen und dann das richtige Bild nachladen. Das funktioniert nicht gut. Laut MDN lädt der Browser Bilder über einen Vorab-Lader, bevor CSS und JavaScript überhaupt ausgewertet sind. Bis ein Skript die Breite kennt, ist das Originalbild schon geladen, und das kleine käme noch dazu ^[1]. Deshalb steht die Auswahl direkt im HTML, in den Attributen srcset und sizes oder im picture-Element. Damit das auf Mobilgeräten überhaupt greift, braucht die Seite im Kopf das Viewport-Meta-Tag mit width=device-width. Ohne diese Angabe stellen manche mobilen Browser die Seite breiter dar und verkleinern sie, was den Nutzen responsiver Bilder aufhebt ^[1].

srcset mit Breitenangaben

Im Attribut srcset listest du die Fassungen auf, jeweils Dateiname, Leerzeichen und die echte Breite der Datei mit der Einheit w, etwa treppe-480.jpg 480w, treppe-800.jpg 800w ^[1]. Die Angabe muss der tatsächlichen Breite der Datei entsprechen ^[2]. Steht dort 800w und die Datei ist 1.600 Pixel breit, rechnet der Browser falsch.

Dazu gehört sizes. Hier beschreibst du, wie breit das Bild im Layout erscheint, als Liste aus Bedingung und Breite. Ein Beispiel aus MDN: (width <= 600px) 480px, 800px. Das heißt: Bis 600 Pixel Fensterbreite ist das Bild 480 Pixel breit, sonst 800 Pixel. Der letzte Eintrag hat keine Bedingung und gilt als Standard. Der Browser nimmt die erste Bedingung, die zutrifft, die Reihenfolge zählt also. Erlaubt sind Längen wie 50vw, Prozentangaben dagegen nicht ^[1].

Aus beidem wählt der Browser. Er berücksichtigt Bildschirmgröße, Pixeldichte, Zoom, Ausrichtung und Netzgeschwindigkeit, sucht die passende Bedingung in sizes und lädt die Fassung aus srcset, die zur Breite passt. Gibt es keine genau passende, nimmt er die nächstgrößere und verkleinert sie ^[1]. Im MDN-Beispiel lädt ein Fenster mit 480 Pixeln die kleine Datei mit 63 KB statt der großen mit 128 KB ^[1].

Die richtige sizes-Angabe finden

An sizes scheitern die meisten Umsetzungen. Fehlt das Attribut, nimmt der Browser an, das Bild sei so breit wie das Fenster, und lädt auf einem großen Bildschirm die größte Fassung, auch wenn das Bild nur in einer schmalen Spalte steht. Geh deshalb vom Layout aus. Wie breit ist die Textspalte auf dem Smartphone, wie breit auf dem Tablet, ab welcher Fensterbreite bleibt sie fest? Daraus ergeben sich die Bedingungen. Ein Bild in einer Spalte, die mobil fast die ganze Breite einnimmt und ab einer bestimmten Breite fest bleibt, bekommt zum Beispiel eine Bedingung mit 100vw für schmale Fenster und eine feste Pixelbreite für alle anderen.

Für Bilder, die lazy geladen werden, gibt es eine Vereinfachung: sizes="auto". Dann nimmt der Browser die Breite, die das Bild im Layout tatsächlich bekommt. Das ist laut MDN nur zusammen mit loading="lazy" gültig, weil der Browser die Layoutinformationen erst dann sicher kennt. Unterstützt ein Browser auto nicht, nutzt er die weiteren Einträge in sizes, dann width und height und zuletzt eine Standardgröße von 300 mal 150 Pixeln ^[2]. Schreib also hinter auto weiterhin eine vernünftige Liste. Welche Bilder du lazy laden solltest, beschreibt der Ratgeber Bilder lazy laden.

Wann x-Angaben genügen

Nicht jedes Bild ändert seine Größe. Ein Logo oder ein Porträt in einer festen Breite erscheint auf allen Geräten gleich groß, nur die Pixeldichte der Bildschirme unterscheidet sich. Dafür reicht srcset mit x-Angaben, ganz ohne sizes, etwa logo-320.png, logo-480.png 1.5x, logo-640.png 2x. Ein Bildschirm mit normaler Dichte lädt die erste Datei, ein Bildschirm mit doppelter Dichte die letzte ^[1]. Breiten- und Dichteangaben darfst du im selben srcset nicht mischen, und doppelte Angaben wie zweimal 2x sind ungültig ^[2].

picture für einen anderen Bildausschnitt

Manchmal reicht es nicht, dasselbe Bild kleiner zu zeigen. Ein Querformat mit einer Person am Rand wirkt auf dem Smartphone winzig. Besser ist dort ein enger Ausschnitt im Hochformat. MDN nennt das Art Direction. Dafür setzt du mehrere source-Elemente mit einer Bedingung im Attribut media in ein picture-Element. Die erste zutreffende Bedingung gewinnt. Direkt vor dem schließenden picture-Tag steht ein normales img-Element mit src und alt, das als Standard und Rückfall dient ^[1].

MDN rät, media nur für solche Fälle zu nutzen und dann keine weiteren Bedingungen in sizes zu schreiben ^[1]. Für neue Bildformate wie WebP und AVIF mit Rückfall auf JPEG nutzt du ebenfalls picture, dann mit dem Attribut type statt media. Kennt der Browser den angegebenen Typ nicht, überspringt er dieses source-Element, und am Ende greift das src des img-Elements ^[4]. Welches Format sich wofür eignet, steht im Ratgeber WebP und AVIF: moderne Bildformate.

Was Google bei responsiven Bildern erwartet

Für die Bildersuche empfiehlt Google bei srcset und picture immer eine Rückfalladresse im src des img-Elements ^[3]. Das ist auch die Adresse, die Browser ohne Unterstützung für srcset laden ^[1]. Nimm dafür eine mittlere bis große Fassung in guter Qualität, nicht das kleinste Vorschaubild. Google empfiehlt zudem, dasselbe Bild auf allen Seiten unter derselben Adresse einzubinden ^[3]. Wenn dein System für jede Seite eigene Größen mit neuen Namen erzeugt, lohnt ein Blick in die Einstellungen.

Vergiss width und height nicht. Mit beiden Angaben berechnet der Browser das Seitenverhältnis, bevor das Bild geladen ist, und reserviert den Platz ^[2]. Bei sizes="auto" empfiehlt MDN, die Maße der größten Fassung im srcset anzugeben ^[2].

Häufige Fehler

• Breitenangaben im srcset, die nicht zur echten Dateibreite passen.
• Kein sizes bei Breitenangaben, sodass der Browser immer von voller Fensterbreite ausgeht.
• Prozentwerte in sizes, die der Browser nicht versteht.
• Kein src als Rückfall.
• Fehlendes Viewport-Meta-Tag, sodass mobile Browser zu große Fassungen laden.

Prüfen kannst du das Ergebnis im Netzwerk-Reiter der Entwicklerwerkzeuge in Firefox oder Chrome. Dort siehst du, welche Fassung tatsächlich geladen wurde. In Chrome hilft es, den Cache abzuschalten, sonst nimmt der Browser bereits geladene Bilder ^[1]. Teste mehrere Fensterbreiten und, wenn möglich, ein echtes Smartphone. Welche Breiten du überhaupt exportieren solltest, zeigt der Ratgeber Bilder-SEO: Dateinamen und Größen, mehr zur Kompression findest du unter Bildgrößen und Kompression auf der Hauptseite.

Auch Videos brauchen Fassungen für verschiedene Bildschirme, etwa Hochformat für den Feed und Querformat für die Website. Jan plant bei SEO NW die Formate gleich beim Dreh mit, damit später kein Ausschnitt fehlt. Schreib Jan, wo dein Video laufen soll.

1. Organisation Using responsive images in HTML. MDN Web Docs, Mozilla. Stand 06.11.2025. abgerufen am 31.10.2026
2. Organisation img: The Image Embed element. MDN Web Docs, Mozilla. Stand 11.09.2026. abgerufen am 31.10.2026
3. Organisation Google image SEO best practices. Google Search Central. Stand 02.03.2026. abgerufen am 31.10.2026
4. Organisation picture: The Picture element. MDN Web Docs, Mozilla. Stand 01.10.2026. abgerufen am 31.10.2026

Zuletzt geprüft am 03.11.2026, nächste Prüfung spätestens im November 2027. Fehler entdeckt? Schreib uns.