Ein Rückblick

Früher war alles einfach ...

Heute:

Es lohnt sich zu optimieren!

• Bilder werden mit unterschiedlicher Auflösung für normale und hochauflösende Displays ausgegeben
• Bilder innerhalb eines flexiblen Web-Layouts (responsive Layout) werden mit unterschiedlicher Abmessung für verschiedene Viewport-Größen ausgegeben
• spart Ressourcen (Beispiel bild.de -> 3,7 MB reine Bilder unter Desktop zu 288 kb für mobile)
• da keine unnötig großen Bilddateien geladen werden
• somit lädt die Seite schneller

Eine bereits vorhandene Lösung

adaptive-images.com

• von Matt Willcox (Filament Group)
• dieses PHP-basierte Skript liefert je nach Device das passende Bild aus
• dazu kommen bestehende Media Queries nach dem Mobile-first-Prinzip zum Einsatz

Voraussetzung für Adaptive Images

• der Einsatz von PHP
• der Einsatz von Javascript
• der Einsatz einer .htaccess-Datei
• der Einsatz von Cookies

Doch nicht ganz so optimal!

© Universal Pictures

Ab sofort hilft der Browser

Und als Fallback das JavaScript-Plugin
Picturefill

Picturefill

• stammt von der renommierten Filament Group
• steht derzeit in Version 2.2 zur Verfügung
• basiert auf purem JavaScript und ist nicht an jQuery oder eine andere Bibliothek gebunden
• ist schlank (7 KB)
• bietet hohe Abwärtskompatibilität sowie Standardkonformität zu HTML5
• unterstützt die komplette srcset und picture Implementierungen, die wir Euch gleich vorstellen werden

Download und Dokumentation:
http://scottjehl.github.io/picturefill/

1. Möglichkeit:

Retina-Optimierung

mit srcset x

Wieso macht Retina-Optimierung Sinn?

Auf hochauflösenden Displays werden normale Bilder unscharf dargestellt und die meisten Smartphones und Tablets haben mittlerweile Retina-Bildschirme.

• iPhone, iPad
• viele Android & Windows Smartphones und Tablets
• Retina MacBook Pro, 4K Monitore, Retina iMac 5K

... und viele mehr in der Zukunft

So wirds gemacht

• Wir speichern das Retina-Bild in der doppelten Breite und Höhe ab
• Im HTML geben wir dem Bild das srcset Attribut und den Auflösungsoperator 2x
• Der Browser erkennt automatisch, ob wir einen Retina-Bildschirm haben und lädt das Retina-Bild
• Normale (nicht Retina) Displays laden das Standard-Bild

Easy :)

Und der Browser-Support kann sich auch sehen lassen:
Chrome 35, Chrome für Android 38, Safari 7.1, iOS 8 und Opera 25
= 46% Abdeckung weltweit*


* Quelle: http://caniuse.com/#feat=srcset

Bei Retina-Grafiken lässt sich zusätzlich noch Dateigröße einsparen.

Normales Bild

In Retina-Größe 370 KB

Retina-Bild

Nur 14% größer

Klingt seltsam

Dadurch, dass das Retina-Bild vom Browser auf Normalgröße skaliert wird, kann eine JPG-Qualität von 30% oder weniger in Photoshop ausgewählt werden, ohne dass dies zu sichtbaren Einbußen führt.

Weitere Infos zu Compressive Images:
http://www.filamentgroup.com/lab/compressive-images.html

Zusätzlich kann mit Komprimierungstools wie ImageOptim noch einmal 5 - 10% eingespart werden (auch als Grunt Plugin erhältlich)

2. Möglichkeit:

Dem Browser mehrere Bilder bereitstellen

mit srcset w

Beispiel

Unsere Webseite hat 4 Breakpoints
und eine Maximalbreite von 1280 Pixel.

• Mobile Breakpoint: 420 Pixel
• Tablet: 840 Pixel
• Desktop klein: 1024 Pixel
• Desktop groß: 1280 Pixel

In diesen Größen speichern wir unser Bild ab.

Und so binden wir das Bild mit srcset w in den 4 Größen ein:

Die w Angabe weist den Browser darauf hin, in welchen Breiten das Bild zur Verfügung steht, ohne dass dieser die Bilder herunterladen muss.

Falls das Bild nicht den kompletten Bildschirm einnehmen soll, kann zusätzlich das Attribut sizes verwendet werden, um dem Browser mitzuteilen, in welcher Größe das Bild eingesetzt wird.

Zusammenfassung von srcset w und sizes

• Der Browser wählt das passende Bild anhand der Viewport-Breite und der benötigten Größe automatisch aus
• Standardmäßig ist sizes auf 100vw eingestellt, was dem kompletten Viewport entspricht
• Auf kleineren Displays wird ein optimiertes Bild heruntergeladen
• In unserem Beispiel 80% Einsparung bei Smartphones

Was fehlt?

Die Retina-Optimierung

Nicht so schnell

Es gibt da noch das picture Element

<picture>

• wurde im September 2014 in Chrome 38, Chrome für Android und Opera 25 integriert, zusammen mit den bereits vorgestellten Features srcset w und sizes
• Damit können bereits weltweit 22%* darauf nativ zugreifen
• Und für die anderen Browser kommt Picturefill.js zum Einsatz

Unser vorheriges Beispiel

Mit picture ist es außerdem möglich, mehrere source Tags einzubinden und diese mit Media Queries zu versehen.

Und das machen wir

Für die Retina-Varianten unseres Bildes
fügen wir ein zusätzliches source Tag ein:

Damit lassen wir weiterhin den Browser entscheiden, welche Bildgröße für den aktuellen Viewport geeignet ist.

• Auf Retina-Geräten geben wir die optimierten JPGs mit 30% Qualität und doppeler (Retina) Größe zur Auswahl
• Normale Displays nutzen die JPGs in Normalgröße

Danke.

Fragen?

Gerne jetzt oder im Anschluss oder per Twitter (@agorilla)