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

Von Jonas

Website können u.a. für hochauflösende Displays optimiert werden, indem ausreichend große Grafiken bereitgestellt und als CSS background eingebunden werden. Mit Media Queries kann die Grafik dann für verschiedene Displays getauscht werden.

Aktualisiert am 25. April 2014 Lesezeit ca. 5 Min. 44 Kommentare

Displays mit hoher Pixeldichte, wie das Retina-Display von Apple, sind stark verbreitet. Web- und App-Designer müssen auf diese Technologie reagieren und Quellcode, Layoutgrafiken und Inhalte optimieren.

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.

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.

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.

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.

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 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?

Für dieses Problem gibt es u.a. sog. Responsive Images, ein HTML-Standard, der sich diesem Problem annimmt.

Geschrieben von Jonas

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Jonas Hellwig bei Xing