HTML5 Mobile

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).

Image-Set auf einem Retina-Display (iOS6, Chrome)
Image-Set: Normales Bild (links) und hochauflösendes Bild (rechts) im Chrome-Browser, iOS6

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);

2 Kommentare zu: Neu in iOS6: Image-Sets

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*

*