In den Anfängen des Word Wide Web waren die “Machtverhältnisse” ziemlich klar: Der Webmaster entschied, was passierte oder nicht passierte. Ein Besucher, der eine Website mit einem nicht unterstützten Browser besuchte, hatte im Zweifel Pech und sah nur eine Meldung nach dem Muster “Diese Website funktioniert am Besten mit dem Internet Explorer 6”. Auf die Bildschirmgröße, das Displayformat oder solche Dinge auf Seiten des Besuchers nahm keine Website weiter Rücksicht. Dann kam das auf, was wir heute responsive design nennen.
Das ist ein Ansatz beim Webdesign, bei dem eine Website auf einer Vielzahl (und vor allem auch Vielfalt) von Endgeräten gut dargestellt werden soll. Vom winzigen Handy-Display mit 320 x 480 Pixel bis zum Smart-TV, dessen Diagonale sich eher in Metern misst. Querformat, Hochformat, Widescreen, 16:9, 16:10 und was es nicht noch alles gibt.
Damit das funktioniert, müssen die visuellen Elemente einer Website in der Lage sein, sich anzupassen: Was auf einem breiten Bildschirm nebeneinander steht, muss auf einem schmaleren Display untereinander platziert werden. Wenn genügend Platz, können zusätzliche Informationen dargestellt werden, die bei weniger Platz abgekürzt oder ganz weggelassen werden.
Das geht bei Textboxen und anderen “formbaren” Elementen recht gut, aber ein visuelles Element zeigte sich eher störrisch: Bilder. Wenn ein Bild zum Beispiel in Format 1,5:1 ist, kann man daran relativ schwer etwas dynamisch ändern. Und ältere Versionen der zuständigen Technologien, vor allem HTML, waren nicht darauf ausgelegt, bei Bildern auf die Ausstattung des Clients Rücksicht zu nehmen. Die Lösung sind Responsive Images, die wir bereits in einem früheren Beitrag kurz erwähnt haben.
Responsive Images lösen im Wesentlichen zwei Probleme: Zum einen ein technisches Problem, zum anderen ein gestalterisches Problem. Wenn sowieso nur wenig Bildschirmplatz zur Verfügung steht, braucht man ein Bild nicht in hoher Auflösung durch die (womöglich dünne) Leitung zu quetschen. Hat man viel Platz zur Verfügung, ist die volle Auflösung die richtige Wahl. Und wenn verschiedene Benutzer mit verschiedenen Geräten verschiedene Dateiformate unterstützen, möchte man gerne für jeden das ausliefern, was er auch darstellen kann. Diese eher technischen Fragen werden unter dem Begriff “resolution switching problem” (auf Deutsch etwa “Problem, zwischen Auflösungen umzuschalten”) zusammengefasst.
Auf der anderen Seite will man auf verschiedenen Display-Größen vielleicht nicht dasselbe Bild in unterschiedlichen Auslösungen, Formaten etc. anzeigen, sondern komplett unterschiedliche Bilder. Wo auf einem großen Bildschirm genügend Raum für das Familienportrait von Kopf bis Fuß ist, ist auf einem kleinen Display der klassische “Headshot” vielleicht die bessere Wahl. Das bezeichnet man als “art direction problem” (auf Deutsch etwa, nun, “Problem bei der Art Direction”).
Eine Frage der Auflösung
Für beide Probleme bietet HTML heute eine Lösung. Für das resolution switching problem gibt es eine erweiterte Form des altbekannten img-Tags. Der kennt in seiner einfachsten Fassung nur ein Bild, das jeder bekommt:
<img src="bild.jpg" alt="Ein Bild">
In der responsiven Form kann man eine Liste von Bildern angeben, inklusive Informationen, wann die jeweilige Variante verwendet werden soll. Das src-Attribut dient als Fallback:
<img srcset="bild-lores.jpg 1x, bild-midres.jpg 1.5x, bild-highres.jpg 2x"
src="bild.jpg"
alt="Ein Bild">
Dieser Tag reagiert auf die Pixeldichte des Displays. Unterstützt das Display maximal eine Pixeldichte von 1x, wird bild-lores.jpg angezeigt. Steht 1.5x zur Verfügung, kommt bild-midres.jpg zum Zuge, und so weiter.
In ähnlicher Form kann man auch auf andere Eigenschaften reagieren, zum Beispiel auf die Bildschirmbreite. Dafür verwendet man, zusätzlich zu srcset, das Attribut sizes:
<img srcset="bild-480w.jpg 480w, bild-800w.jpg 800w"
sizes="(max-width: 600px) 480px, 800px"
src="bild.jpg"
alt="Ein Bild">
Hier wird mit der Einheit w auf die intrinsische Breite der jeweiligen Bilddatei verwiesen. Im sizes-Attribut gibt eine media condition an, in welchem Fall das erste Bild aus der Liste verwendet werden soll, nämlich wenn der Viewport maximal 600px breit ist. Sonst soll die Variante mit 800px intrinsischer Breite angezeigt werden.
Das Zusammenspiel von srcset und sizes kann recht komplex werden, die hier gezeigten Beispiele kratzen nur an der Oberfläche. Es ist auch nicht immer ganz leicht vorherzusagen, was ein Browser im Detail aus einem komplexen img-Tag machen wird. Entsprechend ist hier, wie an vielen anderen Stellen, sorgfältiges Testen Pflicht.
Neu im Spiel: picture
Während für die Lösung des resolution switching problem ein bekannter HTML-Tag erweitert wurde, gibt es für das art direction problem einen neuen Tag namens picture. Der enthält einen oder mehrere source-Tags, plus als Fallback einen klassischen img-Tag:
<picture>
<source srcset="bild-gross.jpg" media="(min-width: 1024px)">
<source srcset="bild-mittel.jpg" media="(min-width: 800px)">
<img src="bild.jpg" alt="Ein Bild">
</picture>
Jede source enthält eine Liste an Bildern und eine media condition. Entsprechend wird bei Viewports, die mindestens 1024 Pixel in der Breite bieten, bild-gross.jpg angezeigt. Stehen zwar keine 1024px, dafür aber mindestens 800px zur Verfügung, kommt bild-mittel.jpg zum Zuge, und so weiter.
Die media condition kann nicht nur auf die Abmessungen des Viewports reagieren, sondern auch auf viele andere Eigenschaften des Clients. In einem früheren Beitrag hatten wir schon den Dark Mode und prefers-color-scheme angesprochen. Auf dieses media feature kann man auch in einer source reagieren:
<picture>
<source srcset="bild-dunkel.jpg" media="(prefers-color-scheme: dark)">
<img src="bild-hell.jpg" alt="Ein Bild">
</picture>
Und mit Hilfe des Attributs type kann man dem Browser verschiedene Dateiformate anbieten:
<picture>
<source srcset="bild.avif" type="image/avif">
<source srcset="bild.webp" type="image/webp">
<img src="bild.jpg" alt="Ein Bild">
</picture>
Wenn der verwendete Browser mit AVIF klarkommt, wird bild.avif verwendet. Sonst ist bild.webp der nächste Kandidat. Wenn alle Stricke reißen, dient das altehrwürdige JPEG als Fallback.
Auch in diesem Punkt gilt: Die hier gezeigten Beispiele reißen die Möglichkeiten von picture nur an. Beispielsweise können die srcset-Attribute nicht nur jeweils ein Bild enthalten, sondern - wie oben beim resolution switching problem gezeigt - eine Liste mit Unterscheidungsmerkmalen.
Insgesamt bieten responsive images also reichlich Möglichkeiten, unterschiedlichen Besuchern einer Website ein auf die jeweiligen Bedürfnisse passendes Bild zu liefern.
