Kategorien
Design JavaScript & jQuery Programmierung Responsive Design

Responsive Images: Mit rwd.images.js machen oder auf den Standard warten?

Das leidige Thema "Responsive Images" ist noch lange nicht vom Tisch. Soll es nun das Picture-Element werden, wie das W3C es vorsieht, oder ist doch das Srcset-Attribut der WHATWG das Mittel der Wahl? Abseits jeglicher Streitereien um Standards muss die Design-Community schlichtweg das Problem lösen. Denn, ob die Gremien nun zur Verabschiedung gelangen oder nicht, responsive Bilder werden jetzt und nicht erst in ein paar Jahren benötigt. Das Mittel der Wahl ist naheliegenderweise JavaScript. Ein ganz frisches Script aus der Feder des Australiers Matt Stow hat das Potenzial zur besten, bisher verfügbaren, clientseitigen (Zwischen-)Lösung zu werden…

html5-logo

Die Problematik Responsive Images

Ich spare mir an dieser Stelle lange Abhandlungen zum Thema und beschränke mich auf das Wesentliche. Weiter unten sind auch ältere Beiträge aus dem Dr. Web Magazin zum nochmaligen Nachlesen verlinkt. Wer sich mit Responsive Images beschäftigt, sieht sich mit folgenden Problemen konfrontiert:

  • Es ist nicht sinnvoll, ein Bild, das für die Anzeige auf einem HiDPI-Display optimiert ist, auf die Größe einer wesentlich kleineren Auflösung runter zu skalieren. Umgekehrt ist es noch weniger sinnvoll. Ziel ist also, jede Zielauflösung mit einem dafür optimierten Bild zu bedienen.
  • Ebenfalls nicht bewährt hat sich die Verwendung extrem starker Kompressionsfaktoren, um wenigstens die Bandbreitenverwendung bei zu großen Bildern zu begrenzen.
  • Das IMG-Element wird von Browsern jeden Alters zuverlässig verarbeitet, dabei aber mit verschiedenen Maßnahmen je nach Browser vorbehandelt (Prefetching etc.). Bilder responsiv über das SRC-Attribut auszutauschen, ist von daher nicht konsistent und in jedem Falle zuverlässig möglich. Zumindest sorgt es für mehrfache Requests. Ältere Browser zeigen weitere Fehlverhalten. Die Vermeidung des SRC-Attributs wäre ein guter Weg, die Browser von Vorbehandlungstechniken abzuhandeln und multiple Requests zu vermeiden.
  • Häufig ist es nicht sinnvoll, auf kleineren Displays das gesamte Bild anzuzeigen. Mittels sog. "Art Direction" sollte man in der Lage sein, den Anzeigebereich des Bildes zu kontrollieren. So könnte man sich etwa vorstellen, dass ein Onlineshop für Hundenahrung in der großen Desktopvariante eine Hundefamilie zeigt, während die mobile Version lediglich den Kopf eines der Tiere darstellt. Das ist kein trivialer Task und das Hauptargument gegen Srcset, den Ansatz der WHATWG. Genau diesen Anwendungsbereich kann das Attribut nicht abdecken, Picture, der Vorschlag des W3C hingegen schon.

Mit JavaScript ist bekanntlich nahezu alles möglich. Die Zahl verfügbarer Scripte für Responsive Images ist entsprechend hoch. Kaum eines jedoch adressiert alle Problempunkte. Zudem bringt JavaScript als solches wieder einige eigene Probleme mit. Das größte dabei: Was passiert, wenn der Nutzer JavaScript abgeschaltet hat oder – wahrscheinlicher – JavaScript nicht funktioniert. Letzteres ist umso häufiger der Fall, je mehr Scripts, wohlmöglich noch aus unterschiedlichsten Quellen, eingebunden sind. Ein Script zur Behandlung von Responsive Images sollte daher stets eine Noscript-Lösung mitbringen.

rwd.images.js: Das Beste bis zur Verabschiedung des Picture-Elements?

Das erst seit wenigen Tagen auf Github verfügbare Script rwd.images.js des Australiers Matt Stow ist auf die Vermeidung aller genannten Problembereiche getrimmt. Im Einzelnen fängt Stow folgendes ab:

  • Das SRC-Attribut wird nicht dem Element mitgegeben, sondern in einem Data-Attribut versteckt. So vermeidet Stow Prefetching und andere Techniken, sowie multiple Requests.
  • Mittels Noscript kann ein Bild im Falle des Nichtfunktionierens von JavaScript gesetzt werden.
  • Art Direction, also die Veränderung von Bildfokus, Zoom und Ausschnitt, wird unterstützt.

Weitere Features bestehen etwa darin, dass Pixelwerte in ems umgerechnet werden können, HiDPI-Varianten bei Einhaltung einer Namenskonvention unterstützt werden und einiges mehr. So sieht das Script, das minifiziert und gezippt auf unter 1,7 kb kommt, im Einsatzbeispiel aus:




Über die Klasse rwdimage wird das Script auf das entsprechende Bild getriggert, alles andere wird über das Data-Attribut `data-rwdimage‘ und dessen Derivate geregelt. Sämtliche Anweisungen, die man ansonsten im Stylesheet machen würde, werden über das Data-Attribut übergeben.

Das ist im Grunde auch schon mein einziger Kritikpunkt, besonders mit Blick auf die Zukunft. Perspektivisch kommt eine ganze Menge Arbeit auf Designer zu, die jetzt intensiven Gebrauch von den Möglichkeiten des Scripts machen. Jegliche Änderung am CSS muss wieder inline erfolgen. Andererseits, wenn es letztlich das Picture-Element würde (oder eben doch Srcset) und man seine Projekte in den standardkonformen Zustand bringen will, muss man eh erneut ran.

Insofern darf rwd.images.js aktuell als eine der vollständigsten Lösungen für das Responsive-Images-Problem gelten. Nachdem es über keinerlei Abhängigkeiten verfügt, ist die Tauglichkeit schnell getestet und rückstandsfrei entfernt bei Nichtgefallen.

Links zum Beitrag

Kategorien
Programmierung Sonstige Programmiersprachen

Customize Images: PHP-Script erlaubt die Manipulation von Bilddateien per URL-String

Es ist schon über ein Jahr her, dass wir Ihnen das PHP-Projekt Adaptive Images von Matt Wilcox vorgestellt haben. Mit Adaptive Images wird die automatische Anpassung der in eine Website eingebundenen Bilddateien auf den Viewport des Besucherbrowsers gewährleistet. Dario D. Müller ließ sich von Adaptive Images inspirieren, entwickelte aber mit Customize Images dennoch etwas völlig anderes. Customize Images erlaubt die gezielte Bildmanipulation per URL-String…

customize-images

Customize Images: Gezielte Eingriffsmöglichkeiten statt automatischer Auflösungsanpassung

Während der Anwendungsfall von Adaptive Images in Zeiten von responsivem Webdesign nahezu selbsterklärend ist, muss man dem Nutzen von Customize Images schon etwas nachspüren. Interessant an der Herangehensweise ist sicherlich die Bildanpassung über Parameter im Dateiaufruf.

So kann so ein Aufruf aussehen: http:://www.ihredomain.tld/files/bildname_w640_s.jpg

Was hier passiert ist folgendes. Die Datei bildname.jpg wird aufgerufen, jedoch über den Parameter _w640 auf 640 Pixel Breite geändert, wobei der zusätzliche Parameter _s sicherstellt, dass das Seitenverhältnis des Bildes gewahrt bleibt. Ähnlich funktionieren die Parameter _h250 oder _w640_h250. Ich denke, die Funktionsweise wird klar.

Die eigentlichen Funktionsdateien .htaccess, index.php, class.customize-images.php werden zweckmäßigerweise direkt mit im Ordner files abgelegt. Weitere Installationsschritte sind nicht erforderlich. Die .htaccess sorgt für die erforderlichen Umleitungen.

Neben dem Parameter _s für die Beibehaltung des Seitenverhältnis, bietet sich der Parameter _c an, der bei einem Bild, bei dem sowohl Breite wie Höhe definiert ist, dafür sorgt, dass das Seitenverhältnis durch Weglassen von Bildinhalten, also durch Cropping, Schneiden, gewahrt bleibt. Weniger sinnvoll erscheint allerdings der ebenfalls verfügbare Parameter _d, der das Bild anhand der übergebenen Breite und Höhe entsprechend verzerrt (_d = distort).

Die einmal behandelten – mit Ausnahme der verzerrt dargestellten – Bilder werden gecacht und stehen so für weitere Aufrufe ohne neuerliche Vorbehandlung zur Verfügung. Das Caching kann über den Parameter ?dev abgeschaltet werden.

Customize Images ist ein ganz frisches Projekt und erst am 15. August auf Github ins Leben gerufen worden. Es kann unter GNU GPL-Lizenz frei verwendet werden.

Links zum Beitrag:

  • Customize Images | Github
  • PHP-Projekt: Adaptive-Image als “Customize-Images” | Dario D. Müller
  • Adaptive Images: PHP-Script skaliert Bilder passend in responsiven Layouts | Dr. Web Magazin