• 1 year ago / Simon Koch

Optimierungen für Responsive Images

Das <picture> Element ist für uns ein wichtiger Teil, um Ladezeit bei Responsive Webseiten einzusparen.
Statt ein Bild für alle Geräte auszuliefern und es dann vom Browser skalieren zu lassen, werden unterschiedlich große Bilddateien für Smartphone, Tablet und Desktop im HTML-Code referenziert. Der Browser lädt anschließend nur das jeweils passende Bild. Auf Smartphones führt dies beispielsweise zur Reduzierung der Dateigröße von 80 % und mehr.

Beispiel:
<picture> Element

Responsive Images bieten aber  weitaus mehr, als nur die passende Datei für den Bildschirm auszuwählen. Die nachfolgenden Beispiele zeigen, welche Optimierungen wir im denkwerk einsetzen, um die Ladezeit von Bildern noch weiter zu verringern und eine möglichst komplette Browser-Kompatibilität zu erhalt

Retina-JPGs mit 30 % Qualität

Als Retina-Grafik wird ein Bild bezeichnet, das mit den doppelten Ausmaßen abgespeichert wird. Dadurch ist die vierfache Pixelanzahl im Vergleich zur normalen Variante vorhanden. Der Browser skaliert das Bild wieder auf Normalgröße, die höhere Pixeldichte bleibt aber erhalten. Dies führt dazu, dass Retina-Bildschirme die Bilder gestochen scharf darstellen.
Viermal so viele Pixel bedeutet aber auch, dass sich die Dateigröße erheblich vergrößert - etwa um den Faktor 2.
Da mobile Geräte in der Regel mit Retina-Bildschirmen ausgestattet sind, würde dies bedeuten, dass hier die doppelte Ladezeit anfällt und viel mehr Datenvolumen aufgebraucht wird. Um dem entgegenzuwirken, liefern wir alle Retina-Grafiken als JPGs mit dem Compressive Images Ansatz der Filament Group aus. Konkret heißt dies, dass wir die Bilder mit 30 % JPG-Qualität oder weniger abspeichern, dies aber durch die Verkleinerung im Browser nicht sichtbar wird. Damit wird das Retina-Bild nur minimal größer als die normale Variante.
Da diese Technik aber nur für Retina-Bildschirme ohne sichtbaren Qualitätsverlust funktioniert, dürfen die Compressive Images nicht auf die normalen Bildschirme angewendet werden. Hier kommt uns nun das media-Attribut zugute, mit dem wir die Retina-Bilder nur für hochauflösende Bildschirme zur Verfügung stellen können.

Beispiel:
Retina optimiertes responsive Image

Verlustfreie Optimierung mit ImageOptim

Aus Photoshop exportierte Grafiken enthalten jede Menge Informationen, die für die Darstellung im Browser irrelevant sind und zu erhöhter Dateigröße führen. Um dies zu verhindern, verwenden wir ImageOptim, eine Software für verlustfreie Bildkomprimierung. Bei JPGs lassen sich so bis zu 15 % einsparen, bei PNGs sind es sogar an die 30 %. Mit grunt-imageoptim lässt es sich auch in den Frontend-Buildprozess einbauen.

WebP für unterstützte Browser

WebP ist ein neues Bildformat von Google mit verbesserten Komprimierungsalgorithmen, mit dem wir die Dateigröße im Vergleich zu JPGs erheblich verringern können. WebP wird aktuell nur von Chrome, Chrome für Android und Opera unterstützt, die alle auf der von Google entwickelten Blink-Browserengine basieren.
Das <picture> Element bietet über das Attribut type="image/webp" die Option, allen unterstützen Browsern das WebP-Bild mit der geringeren Dateigröße auszuliefern. Die anderen Browser erhalten die JPG-Variante. In unserem Beispiel sparen wir dadurch ca. 50 % Dateigröße ein.
Die Verbreitung von WebP-fähigen Browsern ist mit über 50 % weltweit bereits sehr hoch.
Auch bei WebP kann man eine Retina-Optimierung vornehmen. Die Bilder können allerdings nicht ganz so stark komprimiert werden, ohne dass der Qualitätsverlust sichtbar wird (ca. 60 % Qualität statt 30 %). Im Vergleich zu den Retina-JPGs sparen wir aber trotzdem ca. 25 % Dateigröße ein.

Beispiel:
WebP responsives Image

Photoshop unterstützt nativ keinen WebP-Export, aber mit Tools wie ImageMagick und grunt-webp-compress lässt sich die Umwandlung von JPG in WebP automatisieren.

Picturefill.js Fallback

Da es sich beim <picture> Element um eine neue Implementierung handelt, wird es derzeit nativ von Browsern mit Blink-Engine unterstützt (Chrome, Chrome für Android und Opera), was einem Marktanteil von 40 % entspricht. Ab Firefox 38 ist es ebenfalls integriert.
Apple hat sich noch nicht an einer Implementierung im Desktop und iOS Safari beteiligt, genauso wenig wie Microsoft. Für diese Browser verwenden wir Picturefill, ein 7 KB leichtes JavaScript-Polyfill, das die Funktionalität nachrüstet.
Als kleiner Nachteil wird bei Picturefill ein zusätzlicher Bild-Request ausgelöst, der auch das Fallback <img> lädt. Dies lässt sich leider nicht vermeiden, da die Browser ohne native <picture> Unterstützung alle Bilddateien im HTML zur Performance-Optimierung vorladen. Da wir das Fallback allerdings mobile first mit dem kleinsten Bild verknüpft haben, hält sich das daraus resultierende Datenvolumen allerdings in Grenzen.

Internet Explorer 9 Hack

Der IE 9 hat einen Bug, der das <picture> Element nur darstellt, wenn es ein <video> Tag enthält. Hierzu müssen wir einen kleinen Workaround per Conditional Comment vornehmen, der keine Auswirkungen auf die anderen Browser hat.

Zusammenfassung

Das <picture> Element ist sehr umfangreich und bietet zahlreiche Möglichkeiten, um das passende Bild für Bildschirmgröße, Pixeldichte und Browser auszuliefern. Google treibt das Thema Performance-Optimierung maßgeblich voran, Geräte von Apple und Microsoft erhalten mit Picturefill.js ein schlankes und zuverlässiges Polyfill.

Im letzten Beispiel befindet sich die vollständige Implementierung des denkwerk-Standards zu Responsive Images:

denkwerk responsive Image Implementierung