Responsive Images
Was sind Responsive Images?
Responsive Images sind Bilder, für die mehrere Größen oder Varianten bereitstehen. Der Browser wählt anhand von Bildschirmbreite, Pixeldichte und Layout die geeignete Datei aus. Dadurch muss ein Smartphone kein großes Desktopbild laden. Das reduziert die übertragene Datenmenge, verbessert den PageSpeed und erhält zugleich eine passende Darstellungsqualität.
Responsive Images, auf Deutsch einmalig responsive Bilder genannt, passen nicht nur ihre sichtbare Breite an. Sie liefern dem Browser mehrere Bilddateien zur Auswahl. Das unterscheidet sie von einem großen Bild, das per CSS verkleinert wird: Die Darstellung wird dort kleiner, die ursprünglich hinterlegte Datei bleibt jedoch gleich groß.
Wie funktionieren Responsive Images?
Responsive Images basieren meist auf den HTML-Attributen srcset und sizes. srcset nennt verfügbare Bilddateien und deren intrinsische Breite. sizes beschreibt, wie breit das Bild unter bestimmten Bedingungen voraussichtlich im Layout erscheint. Der Browser verbindet diese Angaben mit der Größe des Viewports und der Pixeldichte des Geräts.
srcset enthält beispielsweise Bildvarianten mit 400, 800 und 1.200 Pixeln Breite. Zeigt das Layout das Bild auf einem Smartphone ungefähr 400 Pixel breit an, kann der Browser eine kleinere Datei auswählen. Auf einem hochauflösenden Display kann er dagegen eine größere Variante laden, damit das Motiv scharf bleibt. Die Auswahl trifft der Browser vor dem vollständigen Aufbau der Seite. Deshalb muss sizes das tatsächliche Layout möglichst genau beschreiben. Eine pauschale Angabe von 100 Viewport-Prozent ist ungeeignet, wenn ein Bild auf dem Desktop nur die Hälfte der verfügbaren Breite belegt. Der Browser könnte sonst eine unnötig große Datei herunterladen.
srcset und sizes im Beispiel
Bei einem Inhaltsbild, das auf kleinen Displays die gesamte Breite und ab 900 Pixeln nur 50 Prozent des Viewports einnimmt, kann die Auszeichnung vereinfacht so aussehen:
<img src="bild-800.webp" srcset="bild-400.webp 400w, bild-800.webp 800w, bild-1200.webp 1200w" sizes="(max-width: 899px) 100vw, 50vw" width="1200" height="800" alt="Beschreibung des Bildinhalts">
Die Kennzeichnung 400w bedeutet, dass die entsprechende Datei 400 Pixel breit ist. 100vw steht für die gesamte Viewport-Breite, 50vw für die Hälfte. Die Werte sind keine Anweisung, welche Datei zwingend geladen werden muss. Sie liefern dem Browser die Informationen für eine eigenständige Auswahl.
Responsive Images und PageSpeed 2026
Der PageSpeed profitiert, wenn die ausgelieferte Bilddatei zur tatsächlichen Darstellungsgröße passt. Ein Bild mit 1.600 mal 900 Pixeln enthält rechnerisch 16-mal so viele Pixel wie eine Variante mit 400 mal 225 Pixeln. Die Dateigröße sinkt nicht automatisch im gleichen Verhältnis, weil Format, Kompression und Motiv den Wert beeinflussen. Die kleinere Pixelmenge schafft jedoch die Grundlage für eine deutlich kompaktere Datei.
Besonders relevant ist das größte Bild im sichtbaren Bereich. Dieses Element kann den Largest Contentful Paint, kurz LCP, bestimmen. Der LCP misst, wann das größte sichtbare Inhaltselement gerendert wurde. Wird für ein kleines Display zuerst ein überdimensioniertes Hero-Bild übertragen, verlängern zusätzliche Bilddaten den kritischen Ladeweg.
Ein technischer Prüfprozess sollte Bilder ab einer Dateigröße von 1 MB besonders kontrollieren. Die Größe ist kein allgemeines Qualitätslimit, kennzeichnet aber häufig Dateien mit erheblichem Optimierungspotenzial. Die OSG-Technikunterlagen empfehlen bei großen Bildern ausdrücklich Kompression, geeignete Formate sowie srcset und sizes.
PageSpeed direkt prüfen
Messbar ist der Effekt zum Beispiel so: Prüfe eine URL vor und nach der Implementierung unter denselben Bedingungen und vergleiche übertragene Bilddaten, LCP sowie die tatsächlich geladene Bildvariante. Der kostenlose Ladezeiten-Check zeigt technische Performance-Werte und erste Optimierungshinweise.
picture für unterschiedliche Motive
Das picture-Element wird verwendet, wenn sich nicht nur die Dateigröße, sondern auch das Motiv oder Bildformat ändern soll. Dieser Anwendungsfall heißt Art Direction. Ein breites Desktopmotiv kann auf einem Smartphone beispielsweise durch einen engeren Bildausschnitt ersetzt werden, damit die zentrale Aussage trotz kleiner Fläche erkennbar bleibt.
Innerhalb von picture lassen sich mehrere source-Elemente mit Medienbedingungen oder MIME-Typen hinterlegen. Dadurch kann der Browser etwa AVIF oder WebP verwenden und auf eine unterstützte Alternative zurückgreifen. Das enthaltene img-Element bleibt als Standardquelle und trägt weiterhin Attribute wie Alternativtext, Breite und Höhe.
| Technik | Aufgabe | Typischer Einsatz |
|---|---|---|
srcset | Mehrere Auflösungen desselben Motivs anbieten | Produktbilder, Beitragsbilder, Logos |
sizes | Voraussichtliche Darstellungsbreite beschreiben | Spaltenlayouts und wechselnde Containerbreiten |
picture | Motive, Ausschnitte oder Formate wechseln | Hero-Bilder und Art Direction |
| CSS | Sichtbare Größe im Layout steuern | Flexible Darstellung innerhalb eines Containers |
Abgrenzung zu verwandten Techniken
Der Unterschied zwischen Responsive Images und Responsive Design liegt im Optimierungsobjekt. Responsive Design passt das gesamte Layout an verschiedene Bildschirmgrößen an. Responsive Images steuern gezielt, welche Bilddatei innerhalb dieses Layouts geladen wird. Eine Website kann deshalb ein responsives Layout besitzen und trotzdem auf jedem Gerät dieselben überdimensionierten Bilder übertragen.
Der Unterschied zwischen Responsive Images und Lazy Loading liegt im Ladezeitpunkt. Responsive Images bestimmen, welche Datei geladen wird. Lazy Loading bestimmt, wann eine Datei geladen wird. Bilder außerhalb des sichtbaren Bereichs können mit loading="lazy" später abgerufen werden. Das LCP-Bild im sichtbaren Bereich sollte in der Regel nicht verzögert geladen werden.
Responsive Images ersetzen außerdem weder Kompression noch moderne Dateiformate. Eine passend dimensionierte PNG-Datei kann weiterhin unnötig groß sein. Für gute Ergebnisse müssen Auflösung, Kompressionsgrad und Format zusammenpassen. Die technische Bildoptimierung gehört deshalb in eine umfassende Onpage-Optimierung.
Typische Fehler bei Responsive Images
Feste Angaben für width und height verhindern keine flexible Darstellung. CSS kann das Bild weiterhin proportional skalieren. Die Attribute teilen dem Browser das Seitenverhältnis frühzeitig mit, sodass er den benötigten Platz reservieren kann. Das stabilisiert das Layout und reduziert das Risiko sichtbarer Verschiebungen beim Laden.
Bei einem Relaunch sollte die Bildlogik gemeinsam mit Templates, Breakpoints und dem Content-Management-System geprüft werden. Eine saubere Umsetzung in zentralen Komponenten ist zuverlässiger als manuelle Anpassungen einzelner Seiten. Bei komplexen Templates gehört diese Prüfung bereits in die Planung eines SEO-orientierten Webdesigns.
Häufige Fragen zu Responsive Images
Braucht jedes Bild ein srcset?
Nein. Ein srcset lohnt sich vor allem bei Bildern, die in unterschiedlichen Größen dargestellt werden oder einen relevanten Anteil an der übertragenen Datenmenge haben. Kleine Symbole mit fester Größe benötigen meist keine zusätzlichen Varianten.
Erstellt der Browser die kleineren Bilder selbst?
Nein. Der Server oder das Content-Management-System muss die Varianten vorab erzeugen und bereitstellen. Der Browser wählt nur aus den im HTML genannten Dateien aus.
Sind WebP und AVIF automatisch Responsive Images?
Nein. WebP und AVIF sind Bildformate. Responsive Images entstehen erst, wenn mehrere geeignete Dateien über srcset, sizes oder picture angeboten werden.
Kann srcset ohne sizes verwendet werden?
Ja, technisch ist das möglich. Bei Breitenangaben wie 400w benötigt der Browser jedoch eine Information zur erwarteten Darstellungsbreite. Fehlt sizes, gilt standardmäßig eine Breite von 100 Viewport-Prozent, was bei mehrspaltigen Layouts zu einer zu großen Auswahl führen kann.
Warum lädt der Browser nicht immer das kleinste passende Bild?
Der Browser berücksichtigt neben der Layoutbreite auch die Pixeldichte, den Cache und interne Auswahlregeln. Auf einem Display mit hoher Pixeldichte kann deshalb eine größere Datei sinnvoll sein.
Wie viele Bildgrößen sollte man bereitstellen?
Es gibt keine feste Anzahl für jede Website. Sinnvoll sind Varianten, die zu den realen Containerbreiten des Layouts passen. Zu viele nahezu identische Größen erhöhen den Speicher- und Pflegeaufwand, ohne die Übertragung deutlich zu reduzieren.
Wenn Bilder einen großen Teil der Seitendaten ausmachen, lohnt sich eine technische Prüfung der Templates und Ladewege. Ein Potenzialcheck ordnet ein, welche Maßnahmen für PageSpeed, Core Web Vitals und SEO zuerst umgesetzt werden sollten.
Sie haben noch Fragen?
