7 Mär 2014

Responsive Bilder

Problem

Responsives Webdesign ist in. Dieses wird vor allem durch Regeln in CSS-Sytlesheets umgesetzt. Problem an der Sache ist allerdings, dass die übertragenen Daten hierdurch meist die gleichen bleiben.

Bilder beispielsweise bleiben gleich groß und werden nur herunter skaliert. Das hat gerade auf mobilen Geräten (Smartphones etc.) noch langsamere Übertragungszeiten zur Folge. Zudem ist das Netz schon von vornherein nicht überall perfekt ausgebaut. Es gibt zum Beispiel „Funklöcher“, wo Daten nur per EDGE übertragen werden. Oder man ist bereits gedrosselt, weil man sein Datenvolumen aufgebraucht hat etcpp.

Wenn ich meinen eigenen Blog vor der Optimierung anschaute, dann wurden bei einem Aufruf der Startseite 11,4 MB innerhalb von circa 8 Sekunden übertragen – am Desktop mit 16000er DSL. Mobil würde das aufgrund der höheren Latenz und Auslastung wohl noch länger dauern. Zudem ist die Größe einfach unzumutbar für aktuelle Flatrates. Überschlägt man mal mit 10 MB pro Aufruf und einer monatlichen Internet-Flatrate von 300 MB, dann könnte man die Website einmal täglich aufrufen und das gesamte Datenvolumen wäre weg. Nicht schön.

Möglicher Ausweg: Picturefill

Eine perfekt Lösung für dieses Problem gibt es momentan nicht. Das liegt vor allem an einem fehlenden Standard. So existiert nur ein Entwurf des W3C zu <picture>, das sehr ähnlich wie Picturefill arbeitet. Das grundlegende Prinzip von beiden ist dabei, abhängig von der Bildschirmbreite ein entsprechendes Bild zu zeigen. So erhält ein Desktop mit großem Bildschirm (Diagonale z. B. 22"), ein großes Bild. Ein kleines Smartphone (3") dagegen ein kleineres Bild.

Picturefill ist daher meiner Meinung nach besser wie gar kein Workaround und „füllt“ damit – vorerst – diese Lücke. Im Folgenden daher die genauere Einrichtung von Picturefill.

Einrichtung von Picturefill

Archiv von GitHub herunterladen
JavaScript einbinden
1
<script type="text/javascript" src="/Pfad/zur/Datei/picturefill.js"></script>
In den HTML-Header wird – am besten verkleinert und komprimiert – auf picturefill.js verlinkt. Der Polyfill matchmedia sorgt zusätzlich für Kompatibilität. Dieser ist dabei im Ordner external versteckt.

Bilder in HTML einbinden. Dazu ein Beispiel:

<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    <span data-src="small.jpg"></span>
    <span data-src="medium.jpg"     data-media="(min-width: 400px)"></span>
    <span data-src="large.jpg"      data-media="(min-width: 800px)"></span>
    <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
    <noscript>
        <img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    </noscript>
</span>

Der Aufbau geht dabei also vor allem über <span>s. Der oberste <span> wird durch „data-picture“ gekennzeichnet, damit Picturefill überhaupt auf diesen angewendet wird. Anschließend wird in mehreren <span>s die vorhandenen Bildgrößen definiert. Welches Bild davon im Browser angezeigt wird, wählt Picturefill über data-media aus. In data-media steht dabei nichts anderes als die aus CSS3 bekannten Media Queries.

Der <img>-Tag in den noscript-Blöcken dient, wie der Kommentar darüber bereits sagt, für Browser mit deaktiviertem JavaScript. Dieser ist aber auch für den Google-Suchmaschinen-Bot interessant.

Wenn man mehr Hintergrundinformationen zu Picturefill erfahren möchte, findet diese in der README-Datei auf GitHub. Dort ist zum Beispiel im Detail beschrieben, wie mit JavaScript aus den data-Attributen der <img>-Tag lokal erstellt wird und wie man auf „Retina-Displays“ höher auflösende Bilder anzeigt.

Wo setzt man die Grenzen?

Eine Frage bleibt aber noch offen: Ab welcher Breite lädt man andere Bilder? Die Antwort darauf ist indes schwierig. Allerdings kann man sich meist an seinem bestehenden responsiven Design orientieren. Dabei gibt es bei mir einmal eine Änderung bei einer Breite von 700 px und 450 px. Ein weitere Ansatzpunkt ist die Bildgröße. So wäre es beispielsweise nicht sinnvoll ein 1200 px weites Bild auf einem 450 px weiten Smartphone-Bildschirm anzuzeigen.

Alternativen

Die Lösung mit Picturefill hat jedoch auch Nachteile: Zum Beispiel ist das HTML – in meinen Augen – nicht mehr 100 %ig valide. Das liegt vor allem daran, dass die eigentlichen <img>-Tags erst durch das JavaScript erzeugt werden.

Außerdem ist ein manueller Eingriff in den Quelltext jedes Artikels nötig. Das mag bei einem neuen Blog wie hier nicht unbedingt ins Gewicht fallen. Aber gerade bei einem Webauftritt, der schon längere Zeit besteht, kann sich dieser – womöglich noch manuelle Prozess – ziehen.

Hier könnte stattdessen zum Beispiel Adaptive Imagesinteressant sein. Gegen diese serverseitige Alternativen mit PHP habe ich mich aber entschieden, weil zur Nutzung unter anderem ein separater Cookie nötig ist. Eine mögliche weitere Alternative ist Mobify.js. Dieses Stück JavaScript ermöglicht es vor dem Rendern, das HTML clientseitig zu editieren. Konkret bedeutet dies, dass die Bild-URL innerhalb von <img> in Form von src noch vor dem eigentlichen Herunterladen geändert wird, auf zum Beispiele eine kleinere Version. Damit sind keine Umwege über <span>s wie bei Picturefill nötig. Als Resultat wird aber dennoch das kleinere Bild geladen. Allerdings hapert es da noch ein wenig mit dem IE-Support.

Wer mehr über das gesamte Problem und weitere Alternativen erfahren will, findet zum Thema (englische) Artikel auf CSS-Tricks.com und Smashing Magazine.