Hochauflösende Displays (Retina und Co) (hdpi)

CSS-Pixel sind nicht mehr gleich Device-Pixel

veröffentlicht am: 18.12.12, Autor: Peter Scheel

Retina-Displays - CSS-Pixel sind nicht mehr gleich Device-Pixel

Spätestens seitdem immer mehr hochauflösende Displays in immer mehr mobilen Geräten verbaut werden (Apple nennt diese Retina-Diplays), beginnt eine Diskussion in der Webdesign- und Webprogrammierungs-Szene, ob und wie diese Geräte im Webdesign unterstützt werden sollen/müssen.

Um der Diskussion überhaupt folgen zu können, brauchen wir ein wenig Hintergrundwissen, was Auflösung in diesem Zusammenhang überhaupt bedeutet:

CSS-Pixel (Bildpunkte, bezogen auf die HTML-Programmierung)

Dies ist eine reine abstrakte Größe, die beschreibt, wie Browser, bzw. die dahinter steckende Programmierung - durch HTML und CSS - Pixel zeichnen.

Device-Pixel (Bildpunkte, bezogen auf das physikalische Gerät)

Beschreibt die Pixel eines physikalischen Gerätes. Es ist einfach die kleinste Einheit eines Displays, die unabhängig von anderen Einheiten (Bildpunkten), eine gewisse Farbe und Helligkeit annehmen kann.

Als die Welt noch in Ordnung war

Als die Welt noch in Ordnung war, fand eine 1:1 - Zuodnung von CSS-Pixeln zu Device-Pixeln statt. Jeder Bildpunkt in der Webrogrammierung entsprach genau einem Pixel auf dem Display. Dies ist nun leider nicht mehr so.

Density (Dichte)

Density, oder Dichte, vielleicht besser Bildpunktdichte, beschreibt die Anzahl der Pixel bezogen auf eine Längenangabe, meist in ppi (Pixel Per Inch) gemessen. Je höher der Wert, desto höher die Packungsdichte der Pixel.

Wie kann man nun ppi's von Displays berechnen? - Hier eine Quelle zur genauen Berechnung von ppi. Es gilt: ppi = sqrt (px*px+py*py) / diag

sqrt bedeutet Wurzel aus, diag ist die Bildschildiagonale in Inch, px die Anzahl der Pixel in horizontaler Richtung und py in vertikaler Richtung

 

Schnappen wir uns doch einmal einige Geräte und berechnen den ppi

 

iPhone 3: 480x360 ; 3.5 inch = 165 ppi 

iPhone 4: 960x640 ; 3.5 inch = 330 ppi 

iPhone 5: 1136x640 ; 4 inch = 326 ppi 

iPad 2: 1024x768 ; 9.7 inch = 132 ppi 

iPad 3: 2048x1536 ; 9.7 inch = 264 ppi 

Galaxy Tab 10.1: 1280x800 ; 10.1 inch = 150 ppi 

Galaxy S3: 1280x720 ; 4.8 inch = 306 ppi 

Galaxy Note 10.1: 1280x800 ; 10.1 inch = 150 ppi 

Kindle Fire HD 8.9: 1920x1200 ; 8.9 inch = 254 ppi 

Kindle Fire HD 7: 1280x700 ; 8.9 inch = 216 ppi 

 

Die schöne neue Welt... ist unscharf

Die Konsequenz aus hochauflösenden Displays: stellen Sie sich ein Bild vor, welches nur aus einem einzigen Bildpunkt besteht, sagen wir es hätte einen roten Farbwert. Wenn Sie nun dieses Bild auf einen normal-auflösenden Display anschauen, sehen Sie genau EINEN roten Punkt. Betrachten Sie dieses Bild auf einem Retina Display, werden 4 Bildpunkte rot. Sie sehen aber dennoch nur einen Punkt, da die Bildpunkte so klein sind, dass diese ineinander verschmelzen. Aber: das Bild wirkt nicht so gestochen scharf, wie auf einem normal-auflösenden Display. D.h. Bilder, die in gleichbleibender Auflösung (Bildpunkteanzahl) auf einem Standard-Display betrachtet werden sind schärfer, als auf einem hochauflösendem (höhere Dichte) Display.

Das ist erstmal ernüchternd und überraschend, finden Sie nicht auch?

mehrere Bildauflösungen bereitstellen?

Und schon sind wir in der aktuellen Diskussion, der wir mit unserem erworbenen Wissen nun auch folgen können: Soll man unterschiedliche Densities (Pixel-Dichten) von mobilen Geräten unterstützen, um optimale, scharfe Bildbetrachtungen zu ermöglichen? Das würde bedeuten, man müsste jedes Bild, welches angezeigt werden soll in unterschiedlichen Auflösungen vorhalten und dann immer die geeignetste auswählen und anzeigen.

Gleich mal eine Ernüchterung hinterher: die Welt ist in diesem Fall nicht digital - es gibt nicht nur eine unterschiedliche Pixel-Dichte, sondern viele. Wir benötigen nocheinmal eine neue Größe, um Geräte in standard- und hochauflösende Geräte einteilen zu können:

density pixel ratio (dpr)

Ein wichtiger Wert, um nun hochauflösende Displays von Standard-Displays unterscheiden zu können, ist nun die sogenannte density pixel ratio (dpr). Diese beschreibt das Verhältnis von CSS-Pixeln zu Device-Pixeln.

Die mathemtischen Grundlagen hierzu finden Sie im Artikel High DPI Images for Variable Pixel Densities. An dieser Stelle genügt die Formel:

dpr = Device-Pixel / CSS-Pixel

Hierbei ergibt sich immer ein CSS-Pixel Wert von 150ppi.

So, das wenden wir doch gleich mal auf unsere Geräte von oben an:

dpr verschiedener Geräte

iPhone 3165 ppi1.1 dpr
iPhone 4330 ppi2.2 dpr
iPhone 5326 ppi2.2 dpr
iPad 2132 ppi0.9 dpr
iPad 3264 ppi1.8 dpr
Galaxy Tab 10.1150 ppi1 dpr
Galaxy S3306 ppi2 dpr
Galaxy Note 10.1150 ppi1 dpr
Kindle Fire HD 8.9254 ppi1.7 dpr
Kindle Fire HD 7216 ppi1.4 dpr

 

Und nun?

In der Diskussion ist, die Geräte vorerst in 2 Kategorien einzuteilen und hierzu den Wert dpr heranzuziehen. Alle Geräte mit einem dpr < 1.5 könnte man hierbei als normal-auflösende Displays bezeichnen. Die Displays mmit einem dpr > 1.5 als hochauflösende Displays.

Mit dieser Einteilung, lassen sich nun Maßnahmen für das Webdesign ergreifen. Beispielsweise könnte man für Displays mit einem dpr > 1.5 andere, hochauflösendere Bilder bereithalten.

Was man alles tun könnte und wie man das macht, sprengt diesen Artikel, folgt aber in einem anderen. - Bis dahin viel Spaß.

P.S: Merken Sie sich den Wert 225 ppi - alle Displays, die einen ppi größer 225 besitzen sind hochauflösende Displays (ergibt sich aus der dpr-Formel)

 

Blogverzeichnis - Blog Verzeichnis bloggerei.de Bloggeramt.de

Artikel-Serien

 

mobile web

Retina Displays und andere hochauflösende Displays werden häufig in smartphones und tablets verwendet. Für modere Internetauftritte ist dies eine Herausforderung.

Am Besten gelingt die Integration, indem alle unterschiedlichen Gerätetypen in einem einzigen Webauftritt gemeinsam unterstützt werden. Hierbei passt sich die Darstellung im Browser den Gegebenheiten des Gerätetyps an. Man spricht dann von Responsive Design.