Responsive Webdesign: Problemfall img

Responsive Webdesign ist derzeit wahrscheinlich die Layout-Technik im Webdesign (und kommt im Übrigen auch hier im Blog zum Einsatz). Vereinfacht gesagt wird es damit möglich, ein Basis-Layout mittels CSS abhängig von der Bildschirmauflösung anzupassen – von den 320 Pixeln Breite eines Smartphones bis hin zu den 1600 und mehr Pixeln moderner Monitore. Ein Problem responsiver Designs sind Grafiken, oder besser: Elemente mit fester Breite, welche nicht über CSS zugewiesen wird.

Eine Grafik wird über das img-Element in Webseiten eingebunden, wobei ihr ihre tatsächlichen Ausmaße als Attribute zugewiesen werden. (Ausgenommen sind hier Hintergrundgrafiken – die kann man für jede Auflösung passend zuweisen.) Bindet man nun z.B. ein 640 Pixel breites Foto ein, sprengt dieses etwa die typischen 320 Pixel Bildschirmbreite eines Smartphones.

Lösungsansätze

• Fluid images: Ethan Marcotte, Autor des usprünglichen Artikels, schlägt vor, Grafiken statt Dimensions-Attributen via CSS max-width: 100% zuzuweisen
• Responsive Images: Scott Jehl präsentiert eine Technik, welche eine eingebundene kleine Grafik serverseitig durch eine größere ersetzt
• Mit Javascript möchte Peter Gasston ein leeres div-Element bei hinreichender Auflösung dynamisch ersetzen

Den letztgenannten Ansatz halte ich für bedenklich, da er (ohne Fallback) nur mit Javascript-Unterstützung funktioniert, somit also Benutzern ohne Javascript ggf. wesentliche Informationen vorenthält. Zudem bleibt der schale Beigeschmack sinnfreien Markups im Code.

Der ursprüngliche Vorschlag von Ethan Marcotte ist relativ robust, hat aber den großen Nachteil, dass die eingebundene Grafik evtl. zu groß für volumenbasierte Datentarife ist. Zudem dürfte sie mangels Dimensionsangaben ab einer gewissen Anzahl Grafiken gerade auf Smartphones spürbar die Performance beeinflussen.

Der Ansatz von Scott Jehl ist letzlich kein „eigener“, sondern eine Erweiterung des ursprünglichen Vorschlags. Er bindet zunächst eine „mobile Grafik“ (übrigens auch ohne Dimensionen, insofern bleibt das potenzielle Performance-Problem) ein, welche für höhere Auflösungen mittels einer Kombination aus Javascript und URL-Rewriting durch die größere Version ersetzt wird. Leider ist diese Technik aus meiner Sicht nicht eben trivial umzusetzen, sie dürfte gerade für das Einbinden von Grafiken aus einer Mediendatenbank in einer CMS- oder Blog-Umgebung nur mit Mühe zu adaptieren sein.

Was nimmt man also?

Auf Seiten mit hohem img-Durchsatz und/oder relativ großen Bild-Dateien sollte man sich durch die Einbindung der Jehl-Methode wühlen – allerdings ist die tatsächliche Nutzung solcher Seiten mit kleinen Smartphone-Bildschirmen ohnehin höchst fragwürdig. Wer schaut sich schon Fotos auf flickr auf einem kleinen Bildschirm an? Fotolastige Seiten wie etwa Bildergalerien nutzen zudem heutzutage fast immer Lightbox-Skripte, welche auf kleinen Touchscreens schwierig zu bedienen, vor allem aber aufgrund der kleinen Dimensionen des Bildschirms sinnfrei sind.

Benötigt man hingegen nur wenige fluide Grafiken, welche noch dazu vertretbare Ausmaße (also im Rahmen der heute gängigen Display-Formate von Smartphones) und Dateigrößen haben, dürfte die Marcotte-Methode vollkommen ausreichen und akzeptabel performant sein. Sie besticht zudem durch ihre einfache Umsetzung.

Ideal ist das allerdings streng genommen alles nicht. Eine wirklich solide Lösung würde stets von einer Grafik mit geringeren Ausmaßen ausgehen, auch die Attribute width und height korrekt nutzen, im Zweifelsfall ohne Javascript mindestens sauber degradieren (noch besser: rein über HTML und CSS funktionieren) – und sich (natürlich ohne optische Irritationen) flüssig und sauber der jeweiligen Auflösung anpassen. Man wird ja noch träumen dürfen …