Responsive Images sind Bilder, bei denen der Browser je nach Bildschirmgröße, Auflösung und Layout eine passende Bilddatei auswählen kann. Dadurch muss dein Smartphone zum Beispiel nicht dieselbe große Bilddatei laden wie ein hochauflösender Desktop-Bildschirm.
Wie funktionieren Responsive Images?
Bei einem klassischen Bild erhält der Browser über das Attribut src genau eine Bilddatei. Diese Datei wird geladen, unabhängig davon, wie groß das Bild später dargestellt wird. Das kann unnötig viele Daten übertragen. Ein Foto mit 2.000 Pixel Breite ist etwa auf einem kleinen Smartphone oft deutlich größer als nötig.
Mit dem HTML-Attribut srcset kannst du mehrere Varianten desselben Bildes anbieten. Du gibst dabei etwa Versionen mit 480, 800 und 1.200 Pixel Breite an. Der Browser entscheidet anschließend, welcher Kandidat für das aktuelle Gerät geeignet ist. Dabei können unter anderem die vorgesehene Darstellungsgröße und die Pixeldichte des Displays eine Rolle spielen.
Das Attribut sizes ergänzt srcset. Es beschreibt, wie viel Platz das Bild bei unterschiedlichen Layoutgrößen voraussichtlich einnimmt. Verwendest du in srcset Breitenangaben wie 480w oder 800w, kann der Browser mithilfe von sizes bereits vor dem Herunterladen einschätzen, welche Bilddatei sinnvoll ist.
Wofür wird das picture-Element verwendet?
Das Element <picture> ist vor allem dann nützlich, wenn nicht nur die Auflösung, sondern auch der Bildausschnitt wechseln soll. Dieser Ansatz wird als Art Direction bezeichnet. Ein breites Gruppenfoto kann auf einem Desktop vollständig erscheinen, während auf einem Smartphone eine enger zugeschnittene Version mit den wichtigsten Personen geladen wird.
<picture> kann außerdem unterschiedliche Dateiformate anbieten. So kann der Browser beispielsweise eine AVIF- oder WebP-Datei auswählen und auf eine andere Bilddatei zurückgreifen, wenn ein Format nicht unterstützt wird. Innerhalb von <picture> bleibt ein <img>-Element als Standard- beziehungsweise Fallback-Bild erforderlich.
Warum sind Responsive Images wichtig?
Bilder gehören häufig zu den größten Dateien einer Webseite. Wird für ein kleines Display eine unnötig große Datei übertragen, steigen Datenverbrauch und Ladezeit. Responsive Images helfen, die tatsächliche Bildgröße besser an die Darstellung anzupassen. Das ist besonders bei Webseiten mit vielen Fotos, Produktbildern oder großen Titelbildern sinnvoll.
Dabei geht es nicht darum, Bilder auf kleinen Geräten einfach nur mit CSS kleiner darzustellen. CSS kann zwar die sichtbare Größe verändern, verhindert aber nicht automatisch, dass zuvor eine große Bilddatei heruntergeladen wurde. Mit srcset und sizes erhält der Browser die nötigen Informationen schon bei der Auswahl der Datei.
Wie entstanden Responsive Images?
Der Bedarf an einer standardisierten Lösung wuchs mit Smartphones, hochauflösenden Displays und Responsive Webdesign. Anfang 2012 beschäftigte sich die Responsive Images Community Group des W3C mit Möglichkeiten, verschiedene Bildquellen abhängig vom Gerät bereitzustellen. Im Mai 2012 wurde srcset in die HTML-Spezifikation der WHATWG aufgenommen. Parallel wurde intensiv über das später etablierte <picture>-Element diskutiert.
Die Techniken sind heute fester Bestandteil von HTML. Laut MDN ist srcset seit Juli 2015 browserübergreifend breit verfügbar; sizes erreichte diesen Status im März 2016.
Welche Bedeutung haben Responsive Images für SEO?
Responsive Images können die technische Qualität einer Website verbessern, weil unnötig große Downloads vermieden werden. Schnellere und stabilere Seiten erleichtern vor allem die Nutzung auf mobilen Geräten. Responsive Bilder ersetzen aber andere Maßnahmen der Bilder-SEO nicht.
Google empfiehlt, Bilder über normale HTML-Bildelemente einzubinden und bei responsiven Lösungen weiterhin eine Bildadresse im src-Attribut bereitzustellen. Zusätzlich solltest du einen sinnvollen Alt-Text verwenden, wenn das Bild relevante Inhalte vermittelt. Google kann Bilder innerhalb eines <picture>-Elements über das enthaltene <img>-Element erkennen und verarbeiten.
Responsive Images verbinden damit zwei Ziele: Der sichtbare Bildinhalt soll auf unterschiedlichen Geräten funktionieren und gleichzeitig soll nur eine angemessene Datenmenge übertragen werden.
Häufige Fragen
Was sind Responsive Images?
Responsive Images sind Bilder, für die mehrere geeignete Dateien oder Darstellungsvarianten bereitstehen. Der Browser kann daraus abhängig von Display, Layout und Auflösung eine passende Version auswählen.
Was ist der Unterschied zwischen srcset und picture?
Mit srcset bietest du meist verschiedene Größen oder Auflösungen desselben Bildes an. Das picture-Element eignet sich zusätzlich für unterschiedliche Bildausschnitte oder Bildformate.
Sind Responsive Images wichtig für SEO?
Responsive Images können Ladezeit und Nutzererlebnis verbessern, weil nicht unnötig große Bilddateien geladen werden. Für Bilder-SEO bleiben außerdem ein korrektes img-Element, eine erreichbare Bilddatei und sinnvoller Alt-Text wichtig.
