CSS-Pixel, Bild-Pixel & Device-Pixel – Optimierung für Retina & Co

Rätselhafte Device-Pixel: Pixel ist nicht mehr gleich Pixel, hochauflösende Displays erfordern neue Ansätze

Wie zum Teufel kann es sein, dass sich Kreative und Frontend-Entwickler mittlerweile mit drei Pixel-Angaben herumschlagen müssen? Die hochauflösenden Displays von iPhone, iPad und seit neustem auch das Mac Book Pro machen dies notwendig. Bisher war Pixel gleich Pixel und wir haben uns daran gewöhnt, dass jedes Bild auf Monitoren mit unterschiedlicher Auflösung im direkten Vergleich in unterschiedlicher Größe dargestellt wurde.

Jetzt kommen Geräte wie das iPad und das neue Mac Book Pro auf den Markt und stellen Bilder bei doppelter Auflösung in der gleichen Größe dar wie es schon die Vorgängermodelle getan haben, WARUM? Ganz einfach gesagt geht es den Herstellern (nicht nur Apple) darum nicht mehr auf den Bildschirmen anzeigen zu können, sondern darum die Anzeigeschärfe zu erhöhen.

Zu Beginn ist es wichtig zu verstehen was die Unterschiede zwischen CSS-, Bild- und Device-Pixeln sind.

  • CSS-Pixel: Größe in Pixel, mit der ein Bild laut CSS-Formatierung ausgegeben werden soll
  • Bild-Pixel: Anzahl der Pixel, aus denen ein Bild tatsächlich besteht
  • Device-Pixel: Anzahl der Pixel, die der Device-Bildschirm nutzt um ein Bild darzustellen

Um Bilder auf modernen, hochauflösenden Displays in optimaler Schärfe darzustellen gilt folgende Regel:

Bild-Pixel = Device-Pixel

Für alle die jetzt vollkommen verwirrt sind, keine Angst mit ein paar Beispielen lässt sich schnell erklären welche Anforderungen wir künftig zu meistern haben.

Zu Beispiel 1.

Per CSS wird ein Bild mit den realen Maßen 3px * 2px mit folgenden Parametern eingebunden: width: 3; height: 2; ein herkömmliches Display zeigte dieses Bild relativ scharf an.

Zu Beispiel 2.

Per CSS wird ein Bild mit den realen Maßen 3px * 2px mit folgenden Parametern eingebunden: width: 3; height: 2; ein hochauflösendes Retina-Display zeigt dieses Bild mit künstlich verdoppelter Device-Pixelzahl (also 6px * 4px) bei gleicher Anzeigegröße 3px * 2px unscharf an.

Zu Beispiel 3.

Per CSS wird ein Bild mit den realen Maßen 6px * 4px mit folgenden Parametern eingebunden: width: 3; height: 2; ein hochauflösendes Retina-Display zeigt dieses Bild mit genau 6px * 4px Device-Pixeln bei einer Größe von 3px * 2px scharf an.

 

 

 

Simulieren lässt sich das hoch-rendern moderner Displays, wenn man einem Bild mit 3px * 2px Bild-Pixel per CSS eine Größe von 6px * 4px zuweist und sich dann vorstellt beide Bilder würden in der gleichen Größe angezeigt ( 🙂 ok, nicht lustig! )

Wie kann man die Device-Pixel hochauflösender Displays gezielt nutzen?

Wenn man das Potential hochauflösender Displays (Device-Pixel) ausschöpfen möchte, braucht man eine Möglichkeit die neuen Displays direkt und gezielt anzusprechen. Die Pixeldichte (Pixel-Ratio) kann man mit der CSS-Anweisung device-pixel-ratio abfragen und per Media Query hochauflösende Bilder ausliefern.

Es gilt aber zu beachten, dass hochauflösende Bilder auch eine Menge Datenvolumen bei der Übertragung vom Webserver zum Client-Device verbrauchen. Hochauflösende Bilder, das liegt in der Natur der Sache, verbrauchen eben ein paar Kilobyte mehr Speicherplatz als normal aufgelöste Bilder. Es gilt den Mehrwert und den Ladezeit/Datenvolumen Nachteil in ein gesundes Verhältnis zu stellen und nach Einsatzzweck abzuwägen ob der Einsatz hochauflösender Bilder lohnt.

Muss Text für hochauflösende Displays ebenfalls mit doppelter Größe per CSS eingebunden werden?

Nein, Text wird von hochauflösenden Display einfach mit höherer Pixelanzahl gerendert und wird somit bei gleicher Größe einfach nur schärfer dargestellt. Hier gelten im Prinzip die selben Voraussetzungen wie in Beispiel 2 mit dem Unterschied, dass Fonts keine vorgegebene Pixelgröße in sich tragen und somit nicht unscharf dargestellt werden. Bild-Pixel spielen bei Text also keine Rolle, CSS-Pixel werden einfach vom Gerät in Device-Pixel umgerechnet.

 

 

Alexander Schramm

 

2 Gedanken zu „CSS-Pixel, Bild-Pixel & Device-Pixel – Optimierung für Retina & Co

Schreibe einen Kommentar

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