Neu in iOS6: Image-Sets

Ich hatte bereits erklärt, wie man Bilder für das Retina-Display optimiert. Neu in iOS6 ist eine vereinfachte Syntax, um die Bilder in unterschiedlichen Auflösungen anzugeben.

Mit der in iOS6 verwendeten Webkit-Version sind erstmals Image-Sets möglich. Dies bedeutet, man kann mehrere Bilder angeben und der Browser entscheidet, welches er laden und anzeigen möchte.

Beispiel:
background-image:
-webkit-image-set( url(cloud-sd.png) 1x, url(cloud-hd.png) 2x).

„1x” bedeutet, dass das Bild für ein normales Display gilt, während „2x” für ein hochauflösendes Display steht (das Retina-Display hat bekanntlich die doppelte Auflösung).

Neue Syntax als Alternative zu Media Queries

Die neue Syntax kann somit als Alternative zu den Media Queries verwendet werden (siehe in der Einleitung verlinkter Artikel). Der Vorteil: Die neue Syntax ist wesentlich kompakter, leichter zu lesen und alle Infos stehen an einer Stelle im CSS.

Die Image-Sets funktionieren jedoch nur für Hintergrund-Bilder, nicht für img-Elemente.

Zukünftig könnte man sich vorstellen, dass die Browser die Angaben nicht nur hinsichtlich des Displays auswerten, sondern z.B. auch die aktuelle Internetverbindungen berücksichtigen (und so z.B. trotz Retina-Display bei einer Edge-Verbindung das normale Bild laden).

Voraussetzung für Image-Sets

Die Image-Sets funktionieren zurzeit auf jeden Fall in Mobile Safari und Chrome auf iOS6. Ob es auch auf einem Macbook mit Retina-Display funktioniert, kann ich leider nicht sagen.

Beispiel-Code für Image-Set

Hier ein konkretes Beispiel, dass die neue Syntax in Aktion zeigt. Über CSS wird einem div ein Image-Set zugewiesen. Kennt ein Browser keine Image-Sets, so greift nur die erste Zeile.

background: url(cloud-sd.png);
background-image: -webkit-image-set(url(cloud-sd.png) 1x, url(cloud-hd.png) 2x);