Mobile Webseiten

Optimierung für Retina-Displays

Auf hochauflösenden Bildschirmen wirken normale Icons oft verschwommen. Glücklicherweise lässt sich hier mit einer Reihe von Techniken Abhilfe schaffen. Wir zeigen sie.

Optimieren für Retina-Displays

© Internet Magazin

Optimieren für Retina-Displays

Hochauflösende Displays gibt es immer häufiger - nicht nur auf Smartphones wie dem iPhone 4, sondern auch auf Tablets (unter anderem dem iPad3) und sogar auf Laptops wie dem Mac Pro. Der Hintergrund: Um die Anzeige zu verbessern, sodass sie weniger pixelig wirkt, verwenden die Hersteller mehr physikalische Gerätepixel. Diese Gerätepixel entsprechen aber nicht den herkömmlichen CSS-Pixeln.

Nehmen wir als Beispiel das iPhone 4: Es hat eigentlich eine Auflösung von 640 mal 960 Pixeln. Wenn man CSS- und Gerätepixel gleichsetzen würde, wäre die Darstellung zu klein, deswegen werden für jedes CSS-Pixel zwei Gerätepixel benutzt.

internet, webdesign, rretina, display, bilder

© Internet Magazin

Das Smashing Magazine illustriert das Verhältnis von Gerätepixeln zu CSS-Pixeln deutlich.

Sie kennen das von Ihrem Desktop-Rechner: Wenn Sie die Auflösung verändern, also beispielsweise 1600 mal 900 statt 1280 mal 700 wählen, werden alle Symbole und so weiter größer. Wenn Sie hingegen von 1280 mal 700 auf 1600 mal 900 schalten (und das entspricht dem Schritt, den die besseren Displays machen), erscheinen die Symbole kleiner.

Bei den neueren hochauflösenden Displays wollte man gleichzeitig eine bessere Darstellung erreichen, ohne dass jedoch alles zu klein wird. Und das macht die Unterscheidung zwischen Gerätepixeln und CSS-Pixeln so wichtig.

Hochauflösende Displays von Apple werden als Retina-Display bezeichnet. Der Begriff Retina (Netzhaut) wurde gewählt, weil die Geräte eine so hohe Pixeldichte haben, dass das menschliche Auge aus einem typischen Betrachtungsabstand nicht in der Lage ist, einzelne Pixel zu erkennen - was aber zugegebenermaßen nicht ganz unumstritten ist.

Normalerweise müssen Sie sich um die hochauflösenden Displays bei Ihrer Website nicht sonderlich kümmern, die Geräte skalieren alle Seitenelemente automatisch. Bei Text oder skalierbaren Formaten funktioniert das auch prima, bei Bildern hingegen kann die Skalierung zu Qualitätseinbußen führen: Besonders auffällig und störend ist das bei kleinen Icons, die für eine beschränkte Pixelzahl optimiert sind. Um diesen Mangel zu beheben, müssen wir uns erst einmal im Detail anschauen, was da eigentlich passiert.

Hin- und Herskalierung

Nehmen wir einmal an, Sie definieren per CSS einen Bereich von 10 mal 10 Pixel Ausmaß:

<div style="width: 10px; height:
10px"></div>

Dann nimmt die Darstellung auf einem Standardbildschirm 10 mal 10 Pixel ein. Auf einem hochauflösenden Display werden mehr Pixel verwendet, um diesen Bereich abzubilden, beispielsweise die doppelte Pixelanzahl, also 20 mal 20 Pixel.

Möchte man jetzt, dass die Grafiken auf den neuen schicken Displays ebenso schick aussehen, müsste man die Grafiken in der doppelten Größe erstellen und dann wieder auf die Hälfte verkleinern. Die erste Möglichkeit hierfür ist, die Grafiken für alle Geräte in doppelter Größe zu erzeugen und dann beispielsweise über den HTML- oder CSS-Code zu verkleinern. Im Beispiel hat das Bild Ausmaße von 200 Pixeln, wird aber mit Hilfe der height- und width-Attribute im img-Element auf 100 Pixel verkleinert.

<img src="bild-200px.jpg" width="100"
height="100" />

Jetzt wird auf allen Bildschirmen das Bild in der gewünschten Größe angezeigt, aber auf hochauflösenden Displays auch in der entsprechenden Schärfe.

Das Problem an dieser Herangehensweise ist natürlich, dass das Bild mit den größeren Ausmaßen auch längere Ladezeit benötigt. Besonders schlimm ist, wenn man diese längere Ladezeit nicht nur den Geräten aufbrummt, die davon profitieren, sondern auch den anderen. Wie gravierend diese längere Ladezeit ist, hängt natürlich von der konkreten Situation und auch von der Anzahl der Bilder ab. Es gibt aber glücklicherweise eine Reihe von weiteren Lösungen.

Tricks für Hintergrundbilder

Bei Hintergrundbildern können Sie auf folgende Technik zurückgreifen. Sie besteht darin, die größeren Bilder nur für hochauflösende Displays bereitzustellen und diese dann über CSS wieder auf die normale Größe zu skalieren. Dafür braucht es mehrere Zutaten:

  • Zuerst einmal müssen Sie die Bilder wirklich in verschiedenen Größen erstellen.
  • Dann brauchen Sie eine Möglichkeit zu ermitteln, ob das Gerät, auf dem die Website betrachtet wird, ein hochauflösendes Display hat oder nicht. Das können Sie über Media Queries erledigen.
  • Schließlich müssen Sie die Größe der Hintergrundbilder verändern; dafür ist die CSS3-Eigenschaft background-size der richtige Kandidat. Wenn ein Browser Media Queries zur Erkennung der hochauflösenden Displays kennt, unterstützt er auch die CSS3-Eigenschaft background-size, sodass sich diese Kombination anbietet.

Media Queries

Derzeit sollten Sie die Media Queries für die hochauflösenden Displays auf drei Arten notieren; im Beispiel wird als minimaler Faktor 1.5 angegeben, was Sie natürlich an Ihre Bedürfnisse anpassen müssen:

@media only screen
and (-webkit-min-device-pixel-ratio:1.5),
only screen and
(min--moz-device-pixel-ratio: 1.5),
only screen and
(min-resolution: 144dpi)

Wie gewohnt beginnt die Angabe mit @media. Sicherheitshalber ist das Schlüsselwort only ergänzt. only sorgt dafür, dass Browser, die die @media-Regeln nicht kennen, diese nicht fälschlich interpretieren, hat aber ansonsten keine Auswirkungen. Die eigentliche Media-Query-Abfrage sollte auf drei verschiedene Arten erfolgen.

only screen and (-webkit-min-device-pixel-ratio: 1.5) ist für Webkit-Browser erforderlich. Webkit-Browser haben diese Abfrage als erste erfunden. Statt die in der Spezifikation zu solchen Zwecken vorgesehene Eigenschaft resolution heranzuziehen, hat das Webkit-Team das Schlüsselwort device-pixel-ratio erfunden. device-pixel-ratio zielt auf das Verhältnis zwischen Geräte- und CSS-Pixeln und erwartet eine Kommazahl. Die Einheit ist Dots pro Pixel.

screen and (min--moz-device-pixel-ratio: 1.5) ist für den Firefox vor Version 16 gedacht - und ja, es heißt wirklich so seltsam mit dem doppelten Bindestrich zwischen min und moz und auch die für ein Präfix ungewohnte Reihenfolge muss an dieser Stelle stehen. Da der Firefox ab Version 17 die Standardangabe mit resolution unterstützt, wird diese Schreibweise nicht auf Dauer notwendig sein.

screen and (min-resolution: 144dpi) ist die empfohlene Variante, die dem W3C-Standard entspricht, die Einheit ist im Gegensatz zu device-pixel-ratio hier nun Dots pro Inch. Zur Umrechnung müssen Sie von 1inch = 96px ausgehen. In Zukunft werden Sie hier auch auf die Einheit dppx (Dots per Pixel) zurückgreifen können und min-resolution: 1.5dppx schreiben können.

Anwendung in der Praxis

Mit diesem Wissen können Sie die hochauflösenden Hintergrundbilder deklarieren. Zuerst kommt die Angabe für alle Browser:

.icon {
background-image: url(bild.png); /*
Groesse 100px * 100px */
}

Dann stehen innerhalb der Media Queries die Sonderangaben für die hochauflösenden Displays:

@media only screen and (-webkit-min
-device-pixel-ratio: 1.5),
only screen and (min--moz-device-
pixel-ratio: 1.5),
only screen and (min-resolution:
144dpi) {
.icon {
background-image: url(bild-highres.
png);
background-size: 100px 100px;
/* entspricht der Groessee des urspruenglichen Bildes */
}
}

Im Beispiel ist bild_highres.png 200 mal 200 Pixel groß und wird mit background-size auf die Größe der Standardbilder skaliert. Als Alternative zur Abfrage mit den Media Queries wird man in Zukunft wahrscheinlich die Angabe image-set nutzen können, was derzeit schon im Safari 6 und Chrome 21 angewendet wird:

background-image: -webkit-image-
set(url(bild.png) 1x, url(bild-highres.png) 2x);

Natürlich brauchen die hochauflösenden Bilder, wenn sie in der doppelten Größe bereitgestellt werden, aber längere Downloadzeiten. Je nachdem, wie stark dies zu Buche schlägt, muss man eine Kosten-/Nutzen-Abwägung machen: Smartphones werden ja oft gerade unterwegs bei schlechterer Datenverbindung genutzt, was in einem geringeren Grad auch für die Tablets gilt. Das Problem mit den längeren Ladezeiten umgeht man, wenn man grundsätzlich auf verlustfrei skalierende Formate setzt.

internet, webdesign, rretina, display, bilder

© Internet Magazin

Für die Navigation (links) setzt Apple auf ein SVG-Bild (Mitte), dessen Code Sie rechts im Ausschnitt sehen.

Von Haus aus skalierbar: SVG

SVG steht für "skalierbare Vektorgrafiken" und ihre Skalierbarkeit ist auch der große Vorteil in unserem Zusammenhang. SVG sind in XML beschriebene Grafiken, die vom Browser erzeugt werden. Den Code für die SVG-Dateien können Sie per Hand schreiben, aber es gibt auch Programme wie Illustrator, die SVG als Exportformat anbieten, oder das in der SVG-Gemeinde beliebte Inkscape zur Erstellung von SVG-Grafiken.

SVG-Grafiken können in separaten Dateien stehen, die dann eingebunden werden: Apple beispielsweise setzt auf seiner Website die Grafiken und Texte der Navigation mit einem SVG-Bild um, das in einer externen Datei gespeichert ist. Außerdem können Sie SVG-Bilder direkt kodiert als Data-URL in einer Stylesheet-Datei einbinden; auf der Seite von Apple benutzt man dies beispielsweise für das Lupen-Symbol:

#globalheader.svg #sp-magnify .
magnify {
background-image:url('data:image/
svg+xml;base64,PHN2Zy');
}

Der kodierte kryptische Code wurde im Beispiel stark gekürzt.

Ein Nachteil von SVG ist derzeit noch, dass SVG-Grafiken etwa auf Android erst ab Version 3 und im IE erst ab 9 unterstützt werden. Bei Apple wird deswegen SVG nicht ohne Fallback-Lösung eingesetzt: Browser, die SVG nicht interpretieren können, so auch der Internet Explorer 8, erhalten stattdessen ein PNG-Bild.

Schrift-Icons

Problemlos skalierbar sind von Haus aus Texte. Und das kann man sich in zweierlei Hinsicht zu Nutze machen: Zuerst einmal können Sie bestimmte Unicode-Zeichen direkt einsetzen. So beinhaltet Unicode ja nicht nur eine immense Anzahl an Zeichen verschiedener Schriften, sondern auch eine Reihe von Icons. Wenn Sie solche Icons im HTML-Code einbinden wollen, können Sie sie direkt an der entsprechenden Stelle angeben:

&amp;#x2600;

Dieser Code ergänzt beispielsweise eine kleine Sonne. Mit per CSS erzeugten Inhalten lassen sich solche Icons auch im Stylesheet einsetzen:

.icon:before { content: "\2600"; }

Wem die Unicode-Icons nicht reichen, dem bieten die Font-Icons noch mehr Auswahl. In letzter Zeit greift man immer häufiger zu Webfonts, den herunterladbaren Schriften. Diese erlauben individuelle Schrifttypen, jenseits von Standards wie Verdana oder Helvetica.

internet, webdesign, rretina, display, bilder

© Internet Magazin

Unicode beinhaltet mehr als nur die klassischen Schriftzeichen.

Neben den normalen Schriftfonts gibt es aber auch Icon-Fonts mit kleinen Bildchen, die genauso gut skalierbar sind wie Texte. Icon-Fonts weisen noch einige weitere Vorteile auf: So lässt sich beispielsweise problemlos die Farbe ändern, ohne dass man ein Bildprogramm nutzen muss, und sie haben automatisch einen transparenten Hintergrund.

Ein schönes Beispiel für einen Icon-Font ist Font Awesome, der auch bei Bootstrap von Twitter genutzt wird. Zuerst einmal müssen Sie den Font einbinden und angeben, wo alle Formate zu finden sind; hierfür sollten Sie die folgende Syntax nehmen, die sich als Crossbrowser-tauglich erwiesen hat.

@font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-web
font.eot');
src: url('../font/fontawesome-web
font.eot?#iefix') format('embedded-opentype'),
url('../font/fontawesome-webfont.
woff') format('woff'),
url('../font/fontawesome-webfont.
ttf') format('truetype'),
url('../font/fontawesome-webfont.
svg#FontAwesome') format('svg');
font-weight: normal;
font-style: normal;
}

Für die Zuweisung der Icons stehen Ihnen verschiedene Methoden zur Verfügung. Sehen wir uns an, wie dies in Twitter Bootstrap realisiert ist. Dort gibt es zuerst einmal das Element mit einer passenden Klasse.

<i class="icon-bullhorn icon-
large"></i>weiterer Text

Im Stylesheet sind die Formatierungen für alle Icons angegeben, für die die Schriftart definiert wird:

[class^="icon-"]::before, [class*="
icon-"]::before {
font-family: FontAwesome;
}

Nun wird noch das angegebene Icon mithilfe von content eingefügt, im Beispiel ist es ein Megafon:

.icon-bullhorn:before {
content: "\f0a1";
}

Aber nicht immer brauchen Sie Icons im eigentlichen Sinne, Sie können auch mit CSS malen: ein mit border-radius erstellter Kreis ist problemlos skalierbar, über border-Teile lassen sich andere Formen wie Dreiecke realisieren, auch Farbverläufe, die per CSS erzeugt sind, und mit box-shadow zugewiesene Schatten, haben das Problem der verschwommenen Darstellung nicht.

Mitunter kommt es aber darauf an, diese Elemente geschickt einzusetzen: So zeigt ein Artikel von bradbirdsall.com, dass beispielsweise ein 1 Pixel dicker Rahmen (border: 1px solid) auf den hochauflösenden Displays keine gute Figur macht und es eleganter sein kann, stattdessen den Rahmeneffekt mit box-shadow zu realisieren.

Strategie für Fotos

Aber Schrift-Icons, Malen per CSS oder Ähnliches funktioniert nur bei Icons oder Strichgrafiken, nicht bei Fotos. Gerade Apple ist es auf seiner Website wichtig, dass die Nutzer des neuen iPads auch wirklich ein "sehrevolutionäres" Erlebnis haben, daher lohnt es sich einen gründlichen Blick darauf zu werfen: Auf der Apple-Site gibt es alle wichtigen Bilder in zwei Varianten, das vergrößerte Bild hat "2x" in seinem Namen, ist doppelt so groß und wird herunterskaliert.

Die umfassenden Elemente der Bilder erhalten ein besonderes data-Attribut, um zu kennzeichnen, dass hier andere Versionen für hochauflösende Displays benötigt werden:

<div class="top-gradient flushpad"
data-hires="true">

Per Javascript wird überprüft, ob es sich um einen Retina-Bildschirm handelt, und in diesem Fall das höherauflösende Bild heruntergeladen.

Die Kehrseite der Medaille: Die für das hochauflösende Display optimierten Bilder kommen auf mehr als doppelt so viele Kilobyte! Die normale Version eines 490 mal 148 Pixel großen Bildes hat eine Downloadgröße von 22,31 Kilobyte. Das fürs iPad 3 optimierte Bild mit 980 mal 296 Pixel - von den Ausmaßen her genau doppelt so groß - hat mit 50,04 Kilobyte aber deutlich mehr als die doppelte Dateigröße.

Wie Jason Grigsby in seinem Blog schildert, bezahlen die Nutzer des iPad 3 die besser auflösenden Bilder jedoch nicht nur durch eine größere Downloadmenge, sondern zusätzlich durch eine größere Anzahl von HTTP-Requests: Nicht nur brauchen die hochauflösenden Bilder länger zum Laden, es wird zudem dabei auch nicht verhindert, dass die ursprünglichen Bilder mitgeladen werden.

Außerdem gibt es noch eine Abfrage, ob das hochauflösende Bild überhaupt existiert. Ein Bild bedeutet also drei HTTP-Requests. Da kann man nur hoffen, dass nicht einer dieser Nutzer gerade bei schlechter Verbindung unterwegs ist ...

Das letzte Beispiel zeigt, dass die richtige Bilderstrategie bei hochauflösenden Displays ein weiteres Kriterium miteinbeziehen muss: Es kommt nicht nur auf die Displays an, sondern auch auf die gerade genutzte Netzwerkgeschwindigkeit.

Wer mit schlechterer Verbindung unterwegs ist, hat andere Ansprüche an das Aussehen der Bilder als jemand, der gemütlich auf dem heimischen Sofa mit gutem WLAN online shoppt und sich von Produkten inspirieren lassen möchte. Aber bei diesem Punkt wird sich sicher noch einiges tun, denn es gibt eine Arbeitsgruppe des W3C zu responsiven Bildern und dabei wird man auch Lösungen für hochauflösende Displays suchen.

Mehr zum Thema

internet, apple, safari, web-apps, ios, remote debugging, tipps, tricks
Tipps & Tricks

Wie Sie mit dem Safari-Browser schnell Webseiten und Web-Apps auf iOS debuggen können, zeigen wir Ihnen.
internet, webdesign, responsive webdesign, Performance, optimierung
Responsives Webdesign

Trotz aller Verzüge gibt es auch einen Schwachpunkt beim Responsive Webdesign: Die Performance ist oft schlecht, da dieselben Ressourcen für…
internet, webdesign, adobe,  Illustrator, CS6
Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook stellte die neue Suche
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Der BGH erklärt das Internet zur Lebensgrundlage.
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.