Responsive Images
Was sind Responsive Images?
Responsive Images sind Bilder, für die der Browser abhängig von Layoutbreite, Bildschirmauflösung und unterstütztem Dateiformat eine passende Datei auswählt. Dafür nutzt HTML vor allem srcset, sizes und das picture-Element. Ziel ist, unnötig große Downloads zu vermeiden, die Darstellungsqualität zu sichern und PageSpeed sowie Core Web Vitals zu verbessern.
Was Responsive Images leisten
Responsive Images, auf Deutsch responsive Bilder, liefern nicht jedem Gerät dieselbe Bilddatei. Ein Smartphone kann beispielsweise eine 480 Pixel breite Variante erhalten, während ein großer Bildschirm eine Version mit 1.600 Pixeln lädt. Der Browser trifft die Auswahl vor dem Download anhand des verfügbaren Platzes, der Pixeldichte und der Angaben im HTML.
Der häufigste Denkfehler besteht darin, ein Bild allein per CSS flexibel zu skalieren. Eine Regel wie max-width: 100% verhindert zwar, dass das Bild über seinen Container hinausragt. Der Browser kann dabei trotzdem eine Datei mit mehreren Tausend Pixeln Breite herunterladen. Responsive Images steuern deshalb die übertragene Ressource, während responsives CSS nur ihre Darstellung beeinflusst.
So funktionieren Responsive Images
Bildgrößen mit srcset anbieten
Das Attribut srcset enthält mehrere Bilddateien und deren tatsächliche Breite. Der Browser vergleicht diese Kandidaten mit der erwarteten Darstellungsgröße. Das Attribut src bleibt als Standardquelle und Rückfalloption erhalten.
<img src="produkt-800.jpg" srcset="produkt-400.jpg 400w, produkt-800.jpg 800w, produkt-1600.jpg 1600w" sizes="(max-width: 600px) 100vw, 800px" alt="Produktansicht" width="800" height="600">
Die Angaben 400w, 800w und 1600w beschreiben die intrinsische Breite der Dateien in Pixeln. Sie weisen dem Browser keine feste Bildschirmgröße zu. Der Browser kombiniert diese Werte mit sizes, der Breite des Ansichtsfensters und der Pixeldichte des Geräts.
Darstellungsbreite mit sizes beschreiben
Das Attribut sizes beschreibt, wie breit das Bild im Layout voraussichtlich dargestellt wird. 100vw entspricht der gesamten Breite des Ansichtsfensters. Steht ein Bild auf dem Desktop dagegen in einer 800 Pixel breiten Inhaltsspalte, sollte sizes diese Begrenzung abbilden. Fehlt die Angabe bei Breitenkandidaten, nimmt der Browser häufig eine Breite von 100vw an und kann eine unnötig große Datei auswählen.
Formate mit picture steuern
Das picture-Element eignet sich für unterschiedliche Dateiformate und Bildausschnitte. Mehrere source-Elemente können beispielsweise AVIF, WebP und eine klassische Rückfallversion anbieten. Der Browser lädt nur eine passende Quelle und nicht sämtliche Varianten.
<picture><source type="image/avif" srcset="motiv.avif"><source type="image/webp" srcset="motiv.webp"><img src="motiv.jpg" alt="Beschreibung des Motivs" width="1200" height="800"></picture>
Ein weiterer Anwendungsfall ist Art Direction. Dabei erhält ein schmales Display einen engeren Bildausschnitt, während auf dem Desktop eine breite Komposition erscheint. Art Direction verändert den sichtbaren Inhalt. Eine reine Größenanpassung liefert dagegen dasselbe Motiv in verschiedenen Auflösungen.
Responsive Images und PageSpeed
Responsive Images verbessern den PageSpeed, wenn sie die Zahl der übertragenen Bytes reduzieren. Der Effekt fällt besonders bei großen Titelbildern, Produktfotos und Kategoriebannern auf. Ist ein Bild das größte sichtbare Element beim Seitenaufruf, kann sein Download den Largest Contentful Paint, kurz LCP, direkt beeinflussen. Für eine gute Bewertung sollte der LCP beim 75. Perzentil der Seitenaufrufe höchstens 2,5 Sekunden betragen.
Responsive Images verhindern Layoutverschiebungen nur dann, wenn zusätzlich ein Seitenverhältnis reserviert wird. Die Attribute width und height teilen dem Browser die Proportionen mit, bevor die Datei geladen ist. Ohne reservierten Platz kann nachgeladener Inhalt andere Elemente verschieben und den Cumulative Layout Shift, kurz CLS, erhöhen.
Messbar ist das zum Beispiel so: Vergleiche im Netzwerkprotokoll des Browsers die übertragene Bilddatei und ihre Dateigröße bei mehreren Ansichtsbreiten. Ergänzend liefert der kostenlose Ladezeiten-Check PageSpeed-Werte für Mobilgeräte und Desktop sowie Hinweise auf technische Optimierungsmöglichkeiten.
Nutzen für SEO, SEA und GEO
Responsive Images unterstützen SEO über schnellere Ladeprozesse und stabilere Core Web Vitals. Sie ersetzen jedoch weder aussagekräftige Alt-Texte noch indexierbare Bild-URLs. Suchmaschinen benötigen weiterhin einen verständlichen Seitenkontext, einen passenden Dateinamen und ein img-Element mit sinnvoller Alternativbeschreibung.
Bei SEA können kleinere Bilddateien die Nutzung einer Zielseite verbessern, besonders bei mobilen Anzeigenaufrufen. Eine Anzeige kann relevanten Traffic liefern, während eine schwere Landingpage den Seitenaufbau verzögert. Deshalb gehören Bildgrößen und LCP-Elemente zu den sinnvollen Technik-Checks für Google Ads.
Für GEO, also Generative Engine Optimization, wirken Responsive Images vor allem indirekt. Technisch zugängliche Seiten lassen sich zuverlässig abrufen und verarbeiten. Der Bildinhalt selbst wird für KI-Systeme durch Alt-Text, Bildunterschrift und den umgebenden Absatz verständlicher. Responsive Auslieferung und semantische Beschreibung erfüllen dabei unterschiedliche Aufgaben.
| Maßnahme | Technische Aufgabe | Typischer Effekt |
|---|---|---|
srcset | Mehrere Bildbreiten anbieten | Passendere Downloadgröße |
sizes | Breite im Layout beschreiben | Genauere Browserauswahl |
picture | Formate oder Ausschnitte steuern | Formatwahl und Art Direction |
width und height | Seitenverhältnis reservieren | Weniger Layoutverschiebungen |
loading="lazy" | Download später sichtbarer Bilder verzögern | Weniger initiale Anfragen |
Abgrenzung zu verwandten Techniken
Der Unterschied zwischen Responsive Images und Bildkompression liegt im Zweck: Responsive Images wählen eine geeignete Variante aus, während Kompression die Dateigröße einer einzelnen Variante reduziert. Eine unkomprimierte 400-Pixel-Datei kann größer sein als eine sauber komprimierte 800-Pixel-Datei. Beide Maßnahmen sollten deshalb gemeinsam umgesetzt werden.
Der Unterschied zwischen Responsive Images und Lazy Loading betrifft den Ladezeitpunkt. Responsive Images beantworten die Frage, welche Datei geladen wird. Lazy Loading beantwortet die Frage, wann der Download beginnt. Ein Bild kann beide Techniken gleichzeitig nutzen, sofern es nicht als zentrales Element im zuerst sichtbaren Bereich benötigt wird.
Der Unterschied zwischen einem responsiven Layout und Responsive Images liegt in der Ressourcenauswahl. Media Queries verändern Spalten, Abstände oder die sichtbare Bildbreite. srcset, sizes und picture bestimmen, welche Bilddatei der Browser anfordert. Weitere technische Zusammenhänge erklärt der Leitfaden zu den wichtigsten SEO-Maßnahmen im Bereich Technik.
Typische Fehler bei Responsive Images
Fehler entstehen häufig durch unpassende Kandidaten, falsche Breitenangaben oder ein sizes-Attribut, das nicht mit dem CSS-Layout übereinstimmt. Der HTML-Code kann formal korrekt sein und trotzdem zu große Dateien ausliefern. Prüfe deshalb die reale Browserauswahl und verlasse dich nicht allein auf den Quellcode.
srcset immer die tatsächliche Breite der jeweiligen Datei ein. Wird eine 1.200 Pixel breite Datei fälschlich mit 600w beschrieben, berechnet der Browser die Auswahl auf einer falschen Grundlage. Kontrolliere außerdem, ob CDN, CMS oder Bildgenerator die angegebenen Varianten wirklich erzeugen. Bei einer neuen Website oder einem Relaunch sollte die Bildlogik bereits im Template festgelegt werden. Einheitliche Größenstufen, automatische Formatkonvertierung und korrekte HTML-Ausgabe vermeiden manuelle Nacharbeit bei jedem Upload. Eine Website-Entwicklung mit technischem SEO-Fokus berücksichtigt diese Anforderungen direkt in Komponenten und Content-Prozessen.
Häufige Fragen zu Responsive Images
Braucht jedes Bild ein srcset?
Nein. Ein srcset lohnt sich vor allem bei Bildern, deren Darstellungsbreite je nach Gerät deutlich variiert. Kleine Symbole, Logos mit geringer Dateigröße oder Vektorgrafiken benötigen häufig keine mehreren Rastervarianten.
Sind SVG-Dateien automatisch responsive?
SVG-Dateien lassen sich ohne Qualitätsverlust skalieren und benötigen deshalb normalerweise keine Auflösungsvarianten. Das CSS muss trotzdem festlegen, wie breit oder hoch die Grafik im jeweiligen Layout dargestellt wird.
Sind WebP und AVIF Responsive Images?
WebP und AVIF sind Bildformate. Responsive Images bezeichnen die Technik, mit der der Browser zwischen Größen, Pixeldichten, Formaten oder Ausschnitten wählt. Beide Formate können innerhalb von srcset oder picture eingesetzt werden.
Wie prüfe ich, welches Bild der Browser lädt?
Öffne die Entwicklertools des Browsers, rufe den Netzwerkbereich auf und filtere nach Bildern. Verändere anschließend die Ansichtsbreite und lade die Seite neu. Der Dateiname, die Abmessungen und die übertragene Datenmenge zeigen die ausgewählte Variante.
Funktionieren Responsive Images auch in WordPress?
WordPress erzeugt für hochgeladene Bilder üblicherweise mehrere Größen und ergänzt bei vielen Ausgaben automatisch srcset und sizes. Themes, Page-Builder, individuelle Templates und Plugins können diese Ausgabe jedoch verändern. Prüfe deshalb den erzeugten HTML-Code und die tatsächlichen Netzwerkanfragen.
Welche Bildgröße ist für Mobilgeräte richtig?
Eine universelle Pixelbreite gibt es nicht. Maßgeblich sind die Breite des Bildcontainers und die Pixeldichte des Displays. Für eine Darstellung mit 360 CSS-Pixeln kann ein Kandidat mit etwa 720 Bildpixeln auf einem Display mit doppelter Pixeldichte sinnvoll sein.
Wenn du Bildauslieferung, PageSpeed und technische SEO-Anforderungen gemeinsam prüfen lassen möchtest, kannst du einen unverbindlichen Potenzialcheck anfragen.
Sie haben noch Fragen?
