Responsive Images sind zur Zeit in aller Munde und verursachen viel Streit. Was steckt dahinter und wert streitet mit wem? Zeit für einen Überblick von jemandem, der mitten drin steckt und selbst an der Entwicklung von Entwürfen zum Thema beteiligt war. Ein Gastbeitrag von Anselm Hannemann.

Im Juli letzten Jahres kam die Diskussion um responsive images in Webseiten auf. Wir können zwar mittlerweile die tollsten Layouts für verschiedene Endgeräte optimieren, aber die inhaltlichen Bilder (<img>-Elemente) bleiben dabei immer die gleichen. Und damit hat man natürlich einen großen Nachteil: Große Bilder für Desktopauflösungen werden auch bei Mobilgeräten in voller Dateigröße geladen. Andersherum kann für ein mobile optimiertes Bild kein qualitativ passendes Bild auf ein iPad3 mit HighRes-Display ausgegeben werden. Deshalb waren mehrere Leute der Meinung, dass Bilder ebenfalls responsiv werden müssen.

Historie und Initiativen

Die eine Fraktion der Interessierten wollte direkt ein streamendes Bildformat, was durchaus eine sehr gute und anstrebenswerte Lösung wäre. Allerdings werden damit Randbereiche wie andere Bildausschnitte nicht abgedeckt. Außerdem würde das neue Format wohl erst in frühestens zehn Jahren überall einsetzbar sein. Die andere Fraktion hingegen beschränkte sich auch deshalb auf HTML und CSS als Möglichkeiten. Zu dieser Fraktion gehörte auch ich und deshalb veröffentlichte ich in der Diskussion über das Problem und mögliche Lösungen auf der WHATWG-Mailingliste Ende Juli 2011 folgenden Vorschlag: 

<img 
    src="http://cdn.url.com/img/myimage_xs.jpg" 
    media-xs="(min-device-width:320px and max-device-width:640px)" 
    media-xs-src="http://cdn.url.com/img/myimage_xs.jpg"  
    media-m="(min-device-width:640px and max-device-width:1024px)" 
    media-m-src="http://cdn.url.com/img/myimage_m.jpg"  
    media-xl="(min-device-width:1024px)" 
    media-xl-src="http://cdn.url.com/img/myimage_xsl.jpg" 
/>

Dieser wäre prinzipiell mit alten Browsern kompatibel gewesen, da er auf dem bereits existenten img-Element basiert und gleichzeitig eine einfache Syntax für alternative Ressourcen enthält – diese würden über über ganz normale CSS3 @media-queries angesteuert.

Der große Nachteil bei dieser Lösung ist, dass das bisher bekannte src-Attribut nach aktueller Logik der Browser immer geladen werden würde. Im Zweifelsfall lädt der Browser also zunächst das in src referenzierte Bild (das immer das kleinste Format sein sollte) und zusätzlich das passende höher auflösende Bild. Es würden also zusätzliche HTTP-Requests und mehr Datenmengen anfallen, als eigentlich erforderlich. Dies könnte jedoch für moderne Browser aufgehoben werden, wenn die Browserhersteller bei der Implementierung berücksichtigen. Hier war zumindest von Browserseite schnell eine ablehndende Haltung vorhanden, da angeblich größerer Aufwand nötig sei.

Nach ein paar Antworten schlief die Diskussion in der WHATWG Mailing Liste jedoch schnell ein. Das schlimme daran war jedoch, dass viele damals der Meinung waren, dass solch eine Lösung nicht gebraucht werde, da ja offenbar kein Bedarf für responsive images da sei. In diesem Zuge schrieb Ian Hickson selbst im Januar noch

What’s the use case for doing it for images in <img> elements? Typically <img> elements are for content images, where you don’t usually want to adapt anything.

Im Nachhinein ist diese Entwicklung insofern fatal, als dass einige dieser Leute nun im Mai 2012 einen First Draft für die WHATWG veröffentlicht haben. Als ich aber unterwarteterweise im Oktober 2011 wieder auf das Thema angesprochen wurde und auch mehrere Leute wieder anfingen über das Thema in Blogbeiträgen zu diskutieren, wendete sich zunächst das Blatt. Erneut kam das Thema auf die WHATWG-Mailingliste, wiederum jedoch nicht wirklich mit großer Resonanz.

Gründung der W3C Community Group "Responsive images" und das <picture>-Element

Plötzlich wurde im Februar 2012 dann vom W3C eine Community Group "Responsive images" eingerichtet. Eine Community Group ist eine Plattform, auf der jeder, der mitmachen möchte, über spezifische Probleme mit HTML/CSS diskutieren kann. Damit war endlich ein Ort geschaffen, an dem sinnvoll über Vor- und Nachteile der diversen Code-Vorschläge und der zu eruierenden Funktionalitäten und Eigenschaften diskutiert werden konnte. Schnell wuchs die Gruppe auf über 70 Teilnehmer heran, rege Diskussionen wurden geführt, Lösungen vorgeschlagen und verworfen. Letztlich blieb nur noch ein Vorschlag übrig: das <picture>-Element. Dabei handelt es sich um ein komplett neues Element, das kein Standard-Browserverhalten mitbringt, wie es das bisherige img-Tag macht, das aber eben mehrere Ressourcen beinhalten kann. Die dazugehörige Syntax sollte wie folgt aussehen: 

<picture alt="Alt tag describing the image represented">
    <source src="photo.jpg" />
    <source src="photo@2x.jpg" media="min-device-pixel-ratio:2" />
    <img src="photo.jpg" />
</picture>

Es handelt sich also um eine Liste an Bildern in <source>-Elementen, angereichtert und abgefragt nach Media Queries, plus ein mögliches Fallback-img-Tag am Ende für ältere Browser. Der Vorteil dieser Technik ist, dass Bilder nicht automatisch geladen werden und nur das angefordert wird, was wirklich nötig ist. Das funktioniert sogar bereits, denn Scott Jehl hat hierzu auf GitHub den sogenannten picturefill entwickelt, einen Polyfill für das <picture>-Element. Sogar eine eine Methode zum bereits heute standardkonformen Einsatz gibt es. Diesen Vorteilen stehen aber auch einige ungelöste Probleme gegenüber.

Da wäre zum Beispiel die Frage der Ladezeit bei Geräten mit hoher Auflösung. Bloß weil ein iPad3 mit hochauflösendem Display ein Bild anfordert, ist ja noch lange nicht gesagt, dass dieses auch schnell geladen wird. Ist man beispielsweise per GPRS unterwegs, was zumindest in Deutschland dank knapp bemessener „Flatrates“ häufig der Fall ist, so möchte man vielleicht auch auf einem Highres-Bildschirm die kleine Variante des Bildes haben. Da stößt man nun mit den bisher zur Verfügung stehenden Media Query-Abfragen auf Probleme, denn eine Bandbreitenabfrage ist für einen Browser extrem schwierig durchzuführen. Auch die Syntax ist nicht unproblematisch; schließlich ist der ganze Spaß mit einigem Mehraufwand verbunden, wenn ich für jedes Bild mehrere Ressourcen angeben muss und für jede Ressource noch Media Queries festlegen muss.

Matthew Willcox beschäftigte sich deshalb intensiv in den letzten Wochen mit Möglichkeiten, die Media Query-Vergabe zu automatisieren. Am 13. Mai 2012 brachte er einen umfassenden Lösungsansatz heraus, der vorsieht, dass in <meta>-Tags eine Art Template festgelegt wird und mit (noch zu spezifizierenden) HTML-Variablen diese Template-Variablen in den Ressourcenlisten eingesetzt werden können. Auch wenn ich persönlich dem konkreten Vorschlag nicht ganz zustimme: ein Templateverhalten in <meta>-Tags festzulegen wäre eine Möglichkeit mit Variablen schnell und einfach HTML zu schreiben. Das wäre nicht nur für das <picture>-Element sehr praktisch sondern auch für viele andere Anwendungen. Willcox‘ Ansatz sieht im HTML folgendermaßen aus: 

<head>
    <meta name="case" data="breakpoint1" media="min-width:350px" />
    <meta name="case" data="breakpoint2" media="min-width:1000px" />
</head>
<body>
    <img src="/content/images/{case}/photo.jpg" alt="" />
</body>

Im CSS ist dazu noch folgendes Format vorgesehen: Statt 

@media only screen and (min-width: 700px) { ... }

soll nun 

@media (case: breakpoint1) { ... }

geschrieben werden können.

WHATWG Vorschlag: responsive images via srclist-Attribut

Zum Streitpunkt wurde das Thema responsive images, als die WHATWG am 15. Mai einen ganz eigenen Entwurf für responsive images online stellte. Das kam sehr überraschend für die meisten – auch für mich, zumal man selbst auf den WHATWG-Mailinglisten vorab nicht allzuviel darüber lesen konnte. Ich war ehrlich gesagt etwas vor den Kopf geschlagen, als ich von diesem Entwurf hörte; hauptsächlich, weil die Syntax, die der Vorschlag verwendet, extrem unübersichtlich und HTML-untypisch ist: 

<img src="face-600-200@1.jpeg" alt=""
     set="face-600-200@1.jpeg 600w 200h 1x,
          face-600-200@2.jpeg 600w 200h 2x,
          face-icon.png       200w 200h">
Als Kurzsyntax: 
<img src="logo.png" alt="SampleCorp" set="logo-HD.png 2x">

Die Angabe 600w 200h ist nicht, wie man vielleicht vermuten würde, eine Größenangabe des Bildes (so war es ja im <img>-Tag immer gewesen), sondern die Angabe der Viewportgröße. Das heißt, hier wird eine Art Mini-Media-Query angegeben. Für mich birgt allein das schon ein extrem großes Fehlerpotential für den normalen Webentwickler. Zudem gibt es eine auflösungbasierte Angabe @1x oder @2x, mit der die Auflösungen notiert werden. Bietet man @1x also mit 96ppi an, muss man @2x automatisch mit 192ppi bereitstellen. Auch hier entsteht eine weitere Fehlerquelle. Und es gilt am Ende immer noch das Prinzip: der Nutzer muss ausbaden, was der Entwickler falsch gemacht hat. Wird diese Syntax also genauso eingeführt muss man befürchten, dass Entwickler Fehler generieren, die dazu führen, dass ein User auf eine Smartphoneseite mit einem LowRes-Gerät geht und ein HighRes-Bild ausgeliefert bekommt oder ähnliche Szenarios. Das wäre fatal und sollte wenn irgendwie möglich vermieden werden.

Das Resultat dieser Aktion der WHATWG war vorhersehbar: die Web-Community stand innerhalb von wenigen Stunden Kopf, wobei das vielleicht größte Problem an dieser Geschichte die Kommunikationsweise der WHATWG war. Ich versuche nun mein Bestes, die hunderten von E-Mails, Blogposts und dazugehörigen Kommentare zu sortieren und einzuordnen.

Das Kommunikationsproblem, was passierte und wie es dazu kam

Mehrfach hatte ich mit einigen Community-Membern den Versuch unternommen Browser-Hersteller mit in die Community-Group einzubinden. Der Erfolg war mäßig, denn außer einem Opera-Mitarbeiter meldete sich überhaupt niemand zu Wort, weder von Apple (Safari) noch von Google (Chrome), Mozilla (Firefox) oder Microsoft (Internet Explorer). Und nun, nachdem die Community Group mehrere Monate verschiedene Lösungswege durchdacht und sogar praktisch getestet hatte, wird kommentarlos ein komplett eigener Entwurf angenommen! Dieser kam übrigens von Apple – Apple hatte bereits zur iPad3-Einführung eine etwas eigenwillige CSS4 Responsive Images-Lösung eingeführt.

Leider scheint man in der WHATWG nicht einmal von der Existenz der Community Group etwas mitbekommen zu haben. Das jedoch kann ich mir schwerlich vorstellen, hatten wir nicht nur WHATWG-Mitglieder direkt angesprochen, sondern auch diverse Fachblogs und -portale, die darüber berichteten. Nebenher tauchte der Link zur Gruppe auch in den WHATWG-Mailinglisten auf. Dennoch wurde der Spezifikationsentwurf veröffentlicht und zunächst einmal gar nicht auf andere Vorschläge eingegangen. Das führte unweigerlich auch zu verbalen Auseinandersetzungen, die sicher vermeidbar gewesen wären.

Am 16. Mai hat sich zumindest Tab Atkins (Google) zu Wort gemeldet und versuchte die Wogen zu glätten. Seltsamerweise hat jedoch kaum jemand auf die Argumente, die gegen diese Sourcelist-Version der WHATWG sprechen, geantwortet. Ich denke, hier wird das letzte Wort auch nicht gesprochen sein, es wird viele lange Diskussionen geben, wie es sie bereits vor knapp einem Monat zur Vendor-Prefix-Debatte gegeben hat. Nicht zuletzt hat das W3C angekündigt, die Problematik bei ihrem nächsten Treffen (wöchentlich) anszusprechen und sich ihrer anzunehmen.

Mein Zwischenfazit

Ich persönlich hoffe, dass es in Zukunft eine sinnvoll strukturierte, für jeden Entwickler anwendbare Syntax für responsive Bilder geben wird und nicht einmal mehr sich die Browserhersteller mit einer schnell umzusetzenden Lösung auf Kosten der Entwickler durchsetzen. Das bedeutet aber auch, dass die Lösung noch ein wenig mehr Zeit einnehmen wird, bevor sie richtig eingesetzt werden kann. Doch gut Ding will bekanntlich Weile haben.

Über den Autor

Portraitfoto von Anselm HannemannAnselm Hannemann ist selbständiger Webentwickler, Digital Publishing-Experte und Vorkämpfer in Sachen Webstandards für Responsive Images.

anselm-hannemann.com/blog/
@anselmhannemann