3 Methoden, um Bilder für Responsive Design zu optimieren

Seit dem 21. April 2015 ist die Option eine mobil-optimierte Version der Website ausliefern zu können für Google ein Rankingfaktor. Aufgrund dieser Deadline hieß es im April für viele Webmaster, Designer und Programmierer Überstunden schuften. Jetzt liegt das vermeintliche „Mobilegeddon“ mehr als zwei Monate zurück, das Responsive Design steht und die Optimierungen an der Website beginnen von vorne.

Ein leidiges Thema beim Responsive Design sind Bilddateien. Denn im Responsive Design wird standardmäßig für jedes Endgerät dieselbe Datei ausgespielt – unabhängig davon, ob das Bild bspw. eine Breite von 1200px misst, das Endgerät aber ein Smartphone mit 480px Breite ist. Im Hinblick auf die Ladezeit einer Seite, die ebenfalls eine Auswirkung auf das Ranking in den Suchmaschinen (SEO) hat, ist das natürlich ein Problem. Ideal wäre es daher, je nach Endgerät eine, in den Abmessungen entsprechend angepasste, Bilddatei zu übermitteln.

Welche Möglichkeiten gibt es eine Bilddatei je nach Device-Größe dynamisch auszuspielen?

Lernen Sie mit der JS-Methode „Adapative Images“, dem srcset-Attribut und dem picture-Element drei Varianten kennen, um auch Ihre Bilddateien fit für das Responsive Design zu machen und dadurch die User Experience Ihrer Website signifikant zu steigern.

#1 – Bilder skalieren mit dem Javascript „Adaptive Images“

Eine interessante Methode, um Bilddateien dynamisch an die Gerätegröße anzupassen, ist das Projekt „Adaptive Images“ von Matt Wilcox. Die Funktionsweise ist schnell erklärt: In einem Cookie wird die Bildschirmbreite des benutzten Endgeräts gespeichert. Sobald der Browser ein Bild laden möchte, leitet der Server diese Anfrage durch eine Anpassung der .htaccess zur adaptive-images.php um.

In dieser Datei werden vorher Bildschirmbreiten in Pixel festgelegt, für die das Script jeweils verkleinerte Versionen der Bilder erstellt und im Ordner /ai-cache/ abspeichern soll. Letztendlich liefert die Methode dann die entsprechend angepasste Bildversion aus dem Cache-Ordner aus. Auf der Projektseite adaptive-images.com lädt man sich dazu zunächst die zip-Datei, die alle benötigten Dateien bereits enthält. Die Datei adaptive-images.php wird in das Root-Verzeichnis geladen. Sicherheitshalber sollte der Ordner ai-cache erstellt und mit Schreibrechten definiert werden.

Im letzten Schritt muss die .htaccess bspw. wie folgt erweitert werden:

<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
# Bilder in diesen Ordnern werden ignoriert:
RewriteCond %{REQUEST_URI} !assets
RewriteCond %{REQUEST_URI} !ai-cache
# Übergebe jede Anfrage nach GIF, JPG oder PNG Dateien an adaptive-images.php
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
</IfModule>

Der große Vorteil dieser Methode: Sie lässt sich ohne Eingriff in das verwendete CMS nutzen, denn die Syntax der eingebundenen <img> müssen nicht angepasst werden. Damit das Script für eine Bilddatei eine verkleinerte Version im Cache-Ordner erstellt, muss die Datei mindestens einmal von einem Browser angefragt worden sein. Das bremst zu Beginn zwar leicht die Performance der Seite, doch schon nach einigen Tagen sollte für alle relavanten Bildschirmauflösungen ein entsprechendes Foto im Cache-Ordner vorhanden sein.‍

#2 – Das srcset-Attribut

Eine sehr beliebte Methode, je nach Endgerät unterschiedliche Bildversionen auszuspielen, ist die Verwendung des srcset-Attributs. Dabei wird das bekannte <img> Element um das Attribut srcset erweitert, das die unterschiedlich großen alternativen Bildversionen referenziert. Ein eingebundenes Bild könnte bspw. wie folgt aussehen:

<img  srcset="img/teaser_large.jpg 1920w,
img/teaser_medium.jpg 960w,
img/teaser_small.jpg 480w"
src="img/teaser_medium.jpg">

Der Browser entscheidet dann selbstständig, welche Bildvariante vorzuziehen ist, in dem er die Bildschirmbreite des Endgeräts durch die in srcset angegebenen Breiten dividiert. Beispiel: Ein Nutzer besucht die Seite mit einem 380px breiten Smartphone. Vereinfacht ausgedrückt rechnet der Browser:

1920 / 380 = 5,0526
​960 / 380 = 2,5263
480 / 380 = 1,2632

Es wird die Bildvariante gewählt, deren Divisionsergebnis näher zu 1 liegt. (Bei einem Retina-Display entscheidet sich der Browser für 2). In dem obigen Beispiel wählt der Browser daher die 480px breite Bildvariante.

Einer der Vorteile dieser Methode ist die breite Browser-Unterstützung, welche sich hier einsehen lässt. Für den Fall, dass ein Browser das Attribut srcset nicht kennt, greift als „Fallback“ das herkömmliche img src Attribut. Zudem wird bei dieser Methode auf die Verwendung von zusätzlichem JavaScript verzichtet. Nachteil: Im Vergleich zu #1 müssen durch die Verwendung des srcset die alternativen Bildvarianten vorher erstellt werden und auf den Server geladen werden. Eine „selbstständige“ Anpassung der Bildgröße findet nicht statt. Je nach verwendetem CMS kann die Implementierung eines zusätzlichen Attributs in alle <img> Elemente auch relativ aufwendig sein.‍

#3 – Das <picture> Tag

Wie in #2 erwähnt, entscheidet der Browser bei der Verwendung des srcset-Attributs, welche Bilddatei passend ist. Je nach Anwendungsfall kann dieser Kontrollverlust Probleme verursachen. Eine Möglichkeit, um mehr Kontrolle über die Ausspielung zu haben, ist die Verwendung des von der Responsive Images Community Group vorgeschlagene <picture> Elements. Durch Mediaqueries lässt sich nämlich exakt definieren, wann welche Bilddatei angezeigt werden soll.

<picture>
<source media="(min-width: 1280px)“ srcset="teaser-landscape-gross.png">
<source media="(max-width: 520px) and (orientation: portrait)“   srcset=“ teaser-portrait.png“ >
<img src="teaser-landscape-klein.png" alt="Kategorie Sportschuhe">
</picture>

Im obigen Beispiel lädt der Browser das große Landscape-Bild nur bei einer Bildschirmbreite von 1280px und mehr. Ist die Bildschirmbreite maximal 520px groß und wird das Gerät hochkant gehalten (Portrait), wird teaser-portrait.png ausgespielt. Trifft keiner der definierten Fälle ein oder der Browser unterstützt <picture> nicht, wird als Fallback einfach das klassisch referenzierte <img> geladen.

Leider hat die Methode auch ihre Nachteile. Denn ähnlich dem srcset-Attribut, wird das picture-Element ebenfalls noch nicht von allen Browsern unterstützt. Beim picture-Element wiegt jedoch besonders schwer die derzeit fehlende Unterstützung von Apple’s Safari Browsern. Hier finden Sie die aktuelle Browser-Unterstützung für das picture-Element. Da die Mediatests inline ins HTML integriert sind und für jede Bilddatei separat durchgeführt werden müssen, resultiert diese Methode letztendlich in einem erhöhten Pflegeaufwand (Mediaqueries in CCS und HTML) sowie möglichen Performance-Einbußen.‍

Fazit: Bilder für Responsive Design – DIE eine Lösung gibt es nicht.

Um Bilder fit fürs Responsive Design zu machen, gibt es leider noch nicht die Methode, die immer passt. Es hängt vielmehr vom Einsatzzweck ab.

Die vorgestellte JavaScript-Methode #1 ist ein Beispiel für eine relativ leicht zu implementierende Methode, die kaum Änderungen am Code verlangt. Sie ist daher eine ideale Möglichkeit, um Bilddateien bis zum nächsten Relaunch des Webshops für mobile Geräte zu optimieren.

Die Umsetzung von #2 und #3 ist aufwendiger und setzt wesentliche Änderungen im Code voraus. Die Methoden benötigen daher eine längere Planungsphase, weshalb sich eine Umsetzung im Zuge eines Relaunchs empfiehlt.

Mittelfristig empfehlen wir die Nutzung des srcset-Attributs, da hier noch eine breitere Kompatibilität bei allen Browsern vorhanden ist. Langfristig könnte sich aber das picture-Element durchsetzen, nicht zuletzt weil Google dieses für Responsive Designs empfiehlt. Doch so lange Apple’s Browser das Element nicht interpretieren können, ist das srcset-Attribut dem picture-Element vorzuziehen.