Responsive Webdesign – Bilder optimal ausliefern

Webdesign lebt von Bildern, bei einem responsive Design ist das nicht anders. Oft sind aber die verwendeten Bilddatein viel zu groß um sie guten Gewissens auch für Smartphone oder Tablet auszuliefern, Stichwort Ladezeiten.

Viele Möglichkeiten seine Bilder in einem responsive Webdesign anzuzeigen, und trotzdem eine adäquate Ladezeit zu behalten, gibt es nicht wirklich. Eine der Optionen ist mit etwas Handarbeit und reichlich media Queries verbunden, eine weitere stütz sich auf JavaScript und eine dritte setzt auf eine PHP-Basierte Lösung.

Media Queries – Viel Handarbeit und unnötiger Quellcode

Gegen die Verwendung von media Queries sprich, dass sie nur dann funktionieren, wenn die Bilder als Hintergrundbild per CSS in einem DIV geladen werden. Man könnte zwar einem img Tag eine Klasse zuweisen und per media Querie auf die Skalierung des Bildes Einfluss nehmen, aber man würde trotzdem die komplette Bilddatei laden müssen. In den meisten Fällen wäre das vermutlich die Datei, die auch in der Desktop-Version geladen würde.

Nun könnte man argumentieren, das für ein responsive Webdesign ohnehin eine Vielzahl media Queries gebraucht werden und es darum nicht unbedingt von Bedeutung ist, ob man noch ein DIV Tag mehr oder weniger in den HTML Quellcode schreibt oder nicht. An und für sich nicht falsch und für eine Handvoll Bilder sollte das auch noch funktionieren. Früher oder später wird es aber sicherlich unübersichtlich und andere Lösungen sind einfach die besseren. Vergessen werden sollte auch nicht, dass für jede Displaygröße eine entsprechende Bilddatei vorhanden sein müsste.

Picturefill – Saubere Lösung mittels JavaScript

Picturefill ist eine interessante Variante die auf JavaScript basiert (oder genauer, ein Polyfill ist) und löst das Problem mit responsive Images auf ein ziemlich elegante Art und Weise. Ein Polyfill ist meistens in JavaScript geschrieben und „motz“ ältere Browser mittels Workaround mit neuen – eigentlich nicht unterstützen Funktionen auf. So lassen sich zum Beispiel HTML5 Elemente auch für ältere Browser nutzen, die ansonsten eigentlich nichts damit anfangen könnten.

Um Picturefill in einem responsive Webdesign nutzen zu können, wird das JavaScript mit wenigen Zeilen im HEAD-Bereich referenziert. Im weiteren Verlauf stehen zwei Optionen zur Verfügung um Bilder in optimierter Größe auszuliefern. 1.) size und 2.) Das Element picture.

Zu beachten ist dabei, das dass JavaScript asynchron geladen wird um dem Ladevorgang und das rendern der restlichen Seiteninhalte nicht zu beeinflussen. Wird der Ladevorgang als async definiert, muss die Anweisung aus Zeile 3 erhalten bleiben um die Kompatibilität zu älteren Browsern zu gewährleisten.

Option 1 – Size

Mit der Size-Syntax lassen sich die Größen der Bilder über mehrere Breakpoints hinweg definieren. Srcset hingegen definiert eine Reihe (Array) von Bildern und deren inhärente Größen. Mit diesen wenigen Zeilen im Quellcode lassen sich bereits einige Displaygrößen „abfangen“ und die entsprechenden Bilder passend dazu ausliefern.

Option 2 – Picture

Bei der Verwendung von picture bedarf es etwas mehr Quelltext. Allerdings lassen sich bei der Verwendung von picture zusätzlich CSS3 media Queries verwenden und mit weiteren Layout Eigenschaften verknüpfen. Das picture Element sollte eine Reihe von source Elementen beinhalten, gefolgt von einem img Element. Jedes source Element muss ein srcset beinhalten, gefolgt von einer oder mehrerer Bildquellen, je nach Displaygröße. Für den Fall, dass das srcset Attribut von einem Browser nicht interpretiert werden kann, wird mit <img srcset ein Fallback Bild ausgeliefert.

Es gibt noch einige Beispiele zur Verwendung von Picturefill. Hier alle Varianten aufzuführen, würde etwas zu weit führen und lassen sich auf der Seite des Herausgebers einfacher nachlesen.

Bilder per PHP & htaccess responsive ausliefern – Adaptive Images

Adaptive Images beruht auf PHP und einigen Einträgen in der htaccess-Datei und liefert – je nach Displaygröße resizte Bilder aus. Die Arbeitsweise ist recht einfach und schnell erklärt. Im HEAD Bereich wird eine Zeile JavaScript eingefügt, die über einen Session Cookie die Displaygröße des Besuchers abfragt und speichert.

Im nächsten Schritt „fragt“ der Browser die im Quelltext hinterlegten <img> Tags ab und sendet den entsprechenden Request an den Server, zusammen mit dem gespeicherten Session Cookie. Der Server empfängt diesen Request und beginnt die htaccess-Datei abzuarbeiten.

In dieser htaccess-Datei wird der Server aufgefordert eine PHP-Datei abzuarbeiten die wiederum liest die zuvor gespeicherte Displaygröße aus dem Session Cookie aus und liefert das zutreffende Bild – aus einem vorher angelegten Cache-Ordner an den Browser aus. Wurde die Webseite vorher noch nicht mit dieser Displaygröße besucht, wird ein neuer Ordner angelegt und in diesem ein neues resized Image erstellt.

Im Laufe der Zeit und bei vielen Besuchen mit unterschiedlichen Displaygrößen erhält man also eine Reihe von Bilderordnern mit den jeweiligen kleineren Bildern darin. Wird die Seite im späteren Verlauf wieder mit einem Endgerät besucht – zu dem es bereits eine passende Bilddatei gibt, wird das bereits abgespeicherte Bild an den Browser ausgeliefert und kein neues erstellt.

Es lassen sich einige Einstellungen nutzen und an die eigenen Wünsche und Bedürfnisse anpassen.

• Pfade und Pfadbezeichnung
• Breakpoints
• Cacheverhalten und Dauer
• Qualität der resizten Bilder (nur für JPG)
• Schärfen der Bilder

Insgesamt benötigt man nur vier Schritte und die jeweiligen Anpassungen in den einzelnen Dateien um eine sehr zufriedenstellende Lösung  zu erhalten. Der größte Vorteil bei der Nutzung von Adaptive Images ist, dass man sich nicht darum kümmern muss für abweichende Displaygrößen die passenden Bilder parat zu haben. Es ist ausreichend die größte Auflösung, z.B. 1500 Pixel Breite bereit zu stellen, die abweichenden kleineren Auflösungen werden „on the Fly“ erstellt.