Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 5. Juni 2014

Responsive Images: Das Picture-Element ist endlich da!

Was lan­ge währt, wird end­lich gut. Die viel dis­ku­tier­te Lösung für die Umsetzung von Bildern in respon­si­ven Designs ist tat­säch­lich in der Realität ange­kom­men. Und es ist tat­säch­lich das Picture-Element des W3C gewor­den, nach­dem sich die WhatWG zuletzt für das Srcset-Attribut am Img-Element aus­ge­spro­chen hat­te. Von wegen, die W3C wür­de nur einen sta­ti­schen Schnappschuss ver­wal­ten, wäh­rend die WhatWG die­je­ni­ge wäre, die HTML5 als leben­den Standard, als Work in Progress betrach­ten.

html5-logo

Responsive Images: Ein steiniger Weg mit vielen aufgeschlagenen Knien

Ich will an die­ser Stelle nicht wie­der die Diskussion zu Gehör brin­gen, die sich in den letz­ten zwei Jahren intern abge­spielt hat. Der Streit um die rich­ti­ge Lösung für Responsive Images und ande­re wich­ti­ge Fragen kom­men­der Standards hat­te bekannt­lich sogar dazu geführt, dass sich die Web Hypertext Application Technology Working Group (WHATWG) als ein­fluss­reichs­te Arbeitsgruppe inner­halb des W3C von die­sem abge­spal­ten hat­te, um HTML5 künf­tig als leben­den Standard weit schnel­ler fort­zu­ent­wi­ckeln als unter der Ägide des W3C ver­meint­lich mög­lich. Wir berich­te­ten am 23. Juli 2012 dar­über.

Erst weni­ge Tage vor­her hat­te sich eben die­se WhatWG auf Srcset als Lösung für Responsive Images fest­ge­legt, wir berich­te­ten auch dar­über. Im Nachhinein wenig ver­wun­der­lich, woll­te sich das W3C in Form sei­ner HTML Working Group mit Unterstützung der W3C Community Group so gar nicht mit die­sem nass­for­schen Vorgehen ein­ver­stan­den erklä­ren und stell­ten im Herbst 2012 klar, dass das Picture-Element mit­nich­ten tot, son­dern viel­mehr sehr leben­dig und genau die Stoßrichtung des W3C sei. Hier berich­te­ten wir dar­über.

Dann pas­sier­te nur wenig Plakatives, wenn auch hin­ter den Kulissen flei­ßig gewer­kelt wur­de. Im Februar 2014 gin­gen wir bei Dr. Web sogar so weit eine neue JavaScript-Lösung zu emp­feh­len, anstel­le noch län­ger auf Picture oder Srcset zu war­ten.

Responsive Images: Chrome Canary hat es schon, andere fast

Und jetzt also ist es tat­säch­lich so weit. In einem brand­ak­tu­el­len Beitrag auf A List Apart gab Mat Marquis, der umtrie­bi­ge Kopf der Responsive Images Community Group, ehe­ma­li­ger Mitarbeiter im jQuery Mobile Team und haupt­be­ruf­li­cher Designer/Developer bei der nicht unbe­kann­ten Filament Group, die ers­te Browser-Implementation des Picture-Elements bekannt.

Es ist Chrome Canary, die Developer-Version des Chrome-Browsers, der ab sofort für ers­te Tests des Elements her­an­ge­zo­gen wer­den kann, wozu Marquis nahe­lie­gen­der­wei­se direkt auf­for­dert. Chrome Canary gibt es übri­gens hier. Nach der Installation pas­ten Sie fol­gen­de Zeile in die URL-Leiste

chrome://flags/#enable-experimental-web-platform-features 

bestä­ti­gen mit der Enter-Taste und kli­cken im fol­gen­den Fenster auf “Aktivieren”. Sie brau­chen sich übri­gens nicht zu sor­gen. Die Änderungen, die Sie im Canary vor­neh­men, wir­ken sich nicht auf eine etwa vor­han­de­ne, regu­lä­re Chrome-Installation aus. Beide wer­den sepa­rat gehal­ten.

Als Startpunkt für eige­ne Tests emp­fiehlt Marquis die Picturefill-Demos, wel­che bekannt­lich so aus­ge­legt sind, dass das Polyfill nur da ein­springt, wo die nati­ven Browserfähigkeiten nicht aus­rei­chen.

Ausweislich der diver­sen Roadmaps ist ersicht­lich, dass der Firefox eben­falls kurz vor der Implementation von Picture steht, eben­so das Webkit-Projekt. Microsoft ziert sich wie stets und führt das Picture-Element, neben dem Srcset-Attribut gleich­be­rech­tigt als “Under Consideration”. Na ja, der IE ist bei mir ohne­hin nur “Under Consideration”, wenn er sich nicht ver­mei­den lässt.

So, Kämpen des Netzes. Dann mal ran. Was hal­tet ihr von der Umsetzung?

Übrigens funk­tio­niert das Picture-Element in der jet­zi­gen Implementation noch nicht voll respon­siv bei Änderungen des Viewport. Also, nach Änderungen ein­mal kurz einen Refresh machen.

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.