Zusammenfassung

  • Im Februar 2013 veröffentlichte das W3C erste Entwürfe für das picture-Element und die Anwendungsfälle responsiver Bilder, erarbeitet mit der Responsive Images Community Group.
  • Das heutige HTML trennt die Auswahl passender Dateigrößen über srcset und sizes vom bewussten Wechsel des Bildausschnitts über picture und source media.

In einer Bildredaktion würde niemand lange diskutieren. Für die breite Zeitungsseite nimmt man das Foto mit Meer, Wolken und dem fernen Leuchtturm. Für die schmale Spalte schneidet man näher heran. Eine Website musste diese Entscheidung früher oft durch einen einzigen Dateinamen in img src ersetzen. Der Browser skalierte brav. Der Leuchtturm wurde ein Suchspiel für Menschen mit guten Augen.

Flexible Layouts veränderten Spalten und Abstände, während die Bildquelle unverändert blieb. Nachträglich mit einem Skript eine andere URL einzusetzen, geriet in Konflikt mit einem sinnvollen Eifer des Browsers: Er will Bilder früh laden, sobald er ihre Adresse im HTML entdeckt. Die Redaktion brauchte eine Möglichkeit, Alternativen und Einsatzbedingungen direkt im Dokument anzubieten. Dann konnte die Maschine rechtzeitig handeln.

Am 26. Februar 2013 meldete das W3C zwei erste öffentliche Arbeitsentwürfe. Einer stellte picture vor, der andere sammelte Anforderungen an responsive Bilder. Beide entstanden gemeinsam mit der Responsive Images Community Group. Die Veröffentlichungen behandelten zunächst eine redaktionelle Frage: Was genau soll sich ändern, wenn ein Bild auf einen anderen Bildschirm trifft?

Der damalige picture-Entwurf beschrieb einen Bildbehälter, dessen Quelle durch CSS-Medienabfragen bestimmt werden konnte. Kandidaten und Bedingungen standen im Markup, das der Browser beim Einlesen der Seite sah. Als erster Entwurf ließ das Dokument noch technische Einzelheiten offen. Die Arbeitsteilung lag bereits auf dem Tisch: Ein Verlag bietet Bilder unter erklärten Bedingungen an; der Browser wählt für seine Umgebung.

Die W3C-Notiz zu den Anwendungsfällen vom November 2013 macht zwei verschiedene Aufträge sichtbar. Bei einem bleiben Motiv und Zuschnitt gleich, nur die nötige Auflösung ändert sich mit Pixeldichte und Layoutbreite. Beim anderen muss die Komposition selbst wechseln. Eine Gruppenaufnahme verlangt auf einem schmalen Display vielleicht einen Ausschnitt mit der Sprecherin. Die Küste verlangt einen Leuchtturm, der mehr als drei Pixel besitzt. Eine größere Datei des breiten Fotos liefert bloß einen besonders scharf gezeichneten winzigen Leuchtturm.

Das aktuelle Bilderkapitel des WHATWG-HTML-Standards enthält für beide Aufgaben eigene Werkzeuge. Mit srcset kann ein img mehrere Dateien mit Dichtedeskriptoren anbieten. Hängt die dargestellte Breite vom Viewport ab, beschreiben Breitenangaben zusammen mit sizes den geplanten Platz. Der Browser berücksichtigt Bildschirmdichte, Zoom und weitere Bedingungen, während er eine Ressource aus dem Angebot auswählt. Die Bildredaktion stellt die Karte zusammen; der Browser kennt den Tisch.

Für den Ausschnitt dient picture mit untergeordneten source-Elementen. Ein source kann eine media-Bedingung und Kandidaten tragen. Der Browser nimmt die erste passende Quelle und wählt daraus eine Ressource. Das eingebettete img bleibt Bildelement und Rückfallweg. Für einen breiten Bildschirm liegt die ganze Küste bereit, für einen schmalen ein engeres Bild des Leuchtturms. Beide Fassungen erzählen dieselbe Szene mit unterschiedlichem Schwerpunkt. Die Bildredaktion bereitet sie vor und prüft, ob der Leuchtturm in beiden Rahmen lesbar bleibt.

Beide Entscheidungen lassen sich verbinden. Auch vom engeren Zuschnitt kann es mehrere Auflösungen geben. Ebenso vom Panorama. Zuerst steht die Frage nach der Komposition, dann nach der passenden Datei dieser Komposition. Diese Reihenfolge erspart Verlagen eine technische Fleißarbeit mit komischem Ergebnis: vier perfekt optimierte Dateien, auf denen der Hauptdarsteller jedes Mal verschwindet.

Der Alternativtext des img trägt die Bedeutung weiter. Wer das Bild als Text erhält, soll verstehen, welche Rolle es im Artikel spielt. Wechselnde Zuschnitte können denselben Gegenstand zeigen; die Beschreibung muss den redaktionellen Zusammenhang halten. Mehr visuelle Wahlmöglichkeiten erhöhen den Wert einer klaren textlichen Aussage.

So erklärt die Geschichte von 2013 einen kleinen, aber entscheidenden Reifeschritt des Webs. Die Seite konnte sich bereits an ihren Rahmen anpassen. Nun erhielt die Redaktion einen Platz im HTML, um auch das Bildmotiv durch diesen Formwechsel zu bringen. Der Browser übernahm die Auswahl. Der Leuchtturm blieb in der Zeitung, selbst wenn die Zeitung in einer Hand verschwand.