Websites und Bilder für High-Resolution-Displays (Retina, HiDPI) optimieren

Kulturbanause App-Icon Retina

Displays mit hoher Pixeldichte, wie das Retina-Display von Apple, sind zunehmend verbreitet. Web- und App-Designer müssen sich auf diese Technologie einstellen und Quellcode, Layoutgrafiken und Inhalte optimieren. Welche Probleme das Retina-Display hervorruft und welche Lösungsansätze es gibt möchte ich in diesem Beitrag zusammenfassen.

Modernes Webdesign

Neue Workflows, Techniken und Designideen – inkl. Rapid Prototyping, Responsive Design und Sass.

In unserem Shop kaufen
Signierte DVD, keine Versandkosten

Bei Amazon bestellen
Standard-Version

Was ist das "Retina"-Problem?

Die neuen, hochauflösenden Displays haben eine höhere Pixeldichte als gewöhnliche Monitore. Auf der gleichen Fläche werden etwa viermal so viele Pixel dargestellt. Der Vorteil dieser Technologie liegt darin, dass die Pixel nun so klein sind, dass das menschliche Auge sie nichtmehr auflösen kann. Das Ergebnis sind extrem scharfe Grafiken und Texte.

Vergleich: Retina-Display des iPhone 4S und das normale Display des iPhone 3GS

Kommen wir nun aber zum Kern des Ganzen: Eine Pixelgrafik die bei gewöhnlicher Auflösung das ganze Display ausfüllt, würde eigentlich auf einem Retina Display der gleichen Größe nur ein Viertel des Displays einnehmen. Ein Pixel der Grafik entspricht ja auch auf dem Retina-Display einem Pixel, nur das viermal so viele und dafür kleinere Pixel abgebildet werden.
Damit die Pixelgrafiken nicht plötzlich alle zu klein dargestellt werden, rechnen die Geräte die Grafiken selbstständig um. Dadurch geht allerdings Qualität verloren. Pixelgrafiken sehen auf dem Retina-Display daher unscharf aus.

Das Problem beschränkt sich auf Pixelgrafiken. Schriften oder Grafiken die auf Vektoren basieren (SVG, CSS-Grafiken etc.) sehen auf dem Retina-Display gestochen scharf aus.

CSS3 & Webfonts einsetzen

Grafiken die mit CSS3 oder Webfont-Icons erstellt wurden, basieren auf Vektoren anstelle von Pixeln. CSS-Grafiken werden daher auch auf hochauflösenden Displays absolut scharf dargestellt. Für Buttons, Icons und andere Schmuckelemente die sich mit CSS3 realisieren lassen, sollte daher auch CSS3 verwendet werden. Und neben der visuellen Komponente verbessert sich durch CSS-Grafiken i.d.R. auch die Performance einer Website.

Mobile Ansicht von kulturbanause mit Retina-Logo und -Button
Mobile Ansicht von kulturbanause.de mit Retina-Logo und -Button

Klassische Screen-Designer müssen sich also mit den Möglichkeiten von CSS3 befassen, um Layouts gestalten zu können die sich anschließend auch technisch zeitgemäß umsetzen lassen.

Umgerechnete Pixelwerte auch bei CSS3

Auch in CSS3 werden bestimmte Eigenschaften in Pixel angegeben. Beispielweise die Stärke eines Rahmens.

button {border:1px solid blue;}

Hier stehen Webdesigner nun vor einem ähnlichen Problem wie bei Pixelgrafiken. Auch diese Werte werden von den Geräten selbstständig umgerechnet. Ein border von 1px Stärke hat beispielsweise auf dem MacBook Pro mit Retina-Display eine Stärke von 2px. Im Gegensatz zu Pixelgrafiken leidet allerdings die Qualität der Grafik nicht weshalb die Umrechnung bei CSS3-Grafiken häufig übersehen oder vernachlässigt wird. Wenn Ihr jedoch auch eure CSS-Grafiken für High-Resolution-Displays optimieren möchtet, schaut euch diesen Beitrag von Brad Birdsall an.

CSS3 auf hochauflösendem und normalem Display
CSS3-Buttons auf hochauflösendem und normalem Display. Quelle: bradbirdsall.com

Displayauflösung per Media Query ansprechen

Mit CSS3 Media Queries lassen sich nicht nur verschiedene Bildschirm-Abmessungen ansprechen. Auch die Auflösung eines Gerätes kann berücksichtigt werden. Das Stichwort heißt min-device-pixel-ratio: 2. Wir haben also die Möglichkeit speziellen Quellcode für Geräte mit hoher Displayauflösung auszugeben. In Kombination mit optimierten Grafiken lassen sich so auch auf dem Retina-Display gestochen scharfe Pixelgrafiken darstellen.

Die Technik funktioniert so: Zunächst erstellen wir die Pixelgrafik in vierfacher Größe (doppelte Seitenlänge). Anschließend weisen wir die Grafik wie üblich einem Element zu und skalieren sie per CSS wieder auf die gewünschte Größe herunter. Mit diesem Trick ist die Grafik auch auf dem Retina-Display scharf.

Logo von kulturbanause in normaler und doppelter Größe

Ich zeige die notwendigen Schritte einmal am Beispiel meines Logos. Das Logo (logo.png, 148 x 33px) muss zunächst in vierfacher Größe (296 x 66px) erstellt werden. Diese Grafik speichern wir unter dem Dateinamen logo-px2.png ab.
Mit nachfolgendem Media Query sprechen wir anschließend im CSS-Code das Retina-Display an und weisen dem Logo (#logo) das „Retina-Bild“ als Hintergrund zu. Anschließend wird die Grafik mit der CSS-Eigenschaft background-size auf die Originalgröße des Logos herunterskaliert.

@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
#logo { 
   background-image:url(img/logo-px2.png);
   background-size: 148px 33px; }
}

Zur Erklärung: Um die Retina-Geräte (bsp. iPad3) anzusprechen, muss der Media-Query @media only screen and (-webkit-min-device-pixel-ratio: 2) { ... }
mit dem Präfix -webkit- verwendet werden. Dieser wird langfristig wohl wegfallen, im Moment ist er aber Pflicht. Die Eigenschaft min-resolution gilt für Firefox & Co.
Die Eigenschaft background-size wird von allen mobilen und modernen Browsern unterstützt. Hier muss der Präfix nicht verwendet werden.

Der Umrechnungsfaktor

Der Umrechnungsfaktor (pixel-ratio: 2) von 2 (also doppelte Auflösung) gilt in erster Linie für das das Retina-Display. Es existieren jedoch auch andere Geräte mit hochauflösenden Displays. Hier werden ggf. abweichende Umrechnungsfaktoren sprich Media Queries benötigt. Welcher Wert korrekt ist kann anhand der Auflösung eines Handys berechnet werden. Wir teilen dazu die Seitenlänge der tatsächlich dargestellten Pixel durch die Seitenlänge der physikalischen Pixel des Displays. Für das iPhone 4+ sieht die Rechnung so aus: 640 Pixel / 320 Pixel = 2.
Das HTC Desire stellt auf einem Display mit einer physikalischen Breite von 320 Pixeln "nur" 480 Pixel dar. Die Rechnung sieht hier also so aus: 480 / 320 = 1,5. Daher existieren für unterschiedliche Displays auch unterschiedliche Media Queries.

Weitere Media Queries

@media screen and (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { ... }

@media screen and (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi) { ... }

@media screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { ... }

Hochauflösende Grafiken im Content

Mit Media Queries und entsprechendem Arbeitseinsatz lassen sich also die Layoutgrafiken einer Website für die hohe Auflösung optimieren. Doch wie sieht es mit den Bildern im Inhaltsbereich der Website aus?

Screenshot der Website zu retina.js
Screenshot der Website zu retina.js

Für dieses Problem gibt es im Moment noch keine standardisierte Lösung, lediglich ein paar Ideen und Workarounds. Das Problem mit verschiedenen Bildgrößen betrifft auch nicht nur hochauflösende Displays, es ist ein generelles Problem von Media Queries und HTML. Im Gegensatz zum Design der Website - das über CSS gesteuert wird - handelt es sich bei den Bildern im Inhaltsbereich um HTML-Elemente. Im Moment ist es nicht möglich verschiedene Bildquellen von Media Queries abhängig zu machen ohne auf Scripte oder Plugins zu setzen.
Im Gespräch ist z.B. eine Lösung ähnlich der HTML5-Elemente <video> und <audio>. Hier ist es möglich verschiedene Medienquellen anzugeben. In diese Richtung gehen bereits Überlegungen rund um ein neues HTML5-Element namens <picture>:

<picture>
 <source src="img-mobile.png" />
 <source src="img-desktop.png" media="min-width: 800px" />
 <img src="img-mobile.png" />
</picture>

Wenn Ihr Euch weiter mit den verschiedenen Überlegungen um neue Webstandards für Responsive Images informieren möchtet, schaut euch auch folgenden Beitrag an:

Plugins und Scripte für Retina-Grafiken

Das in diesem Beitrag beschriebene Problem ist zwar relativ neu, aber keineswegs unbekannt. Es existieren bereits einige Lösungen in Form von Plugins und Scripten die insbesondere das Problem mit Bildern im HTML-Code lösen können.

Retina Images
Dieses Script arbeitet mit einem Cookie der die Auflösung des Gerätes speichert. Anschließend werden die Bilder (sofern vorhanden) in hoher Auflösung angezeigt.
retina-images.complexcompulsions.com
retina.js
Dieses Script prüft anhand der Dateinamen ob Bilder in einer hohen Auflösung zur Verfügung stehen. Dabei wird der von Apple genutzte High Resolution Modifier eingesetzt.
retinajs.com

Links zum Thema