Immer mehr Geräte haben ein hochauflösendes Display (High Pixel Density Display) integriert. In Webapps und auf Webseiten führt das dazu, dass Bilder mit normaler Auflösung auf diesen Geräten zum Teil verschwommen dargestellt werden.
Was ist ein Retina Display?
Retina Display ist ein von Apple genutzter Name für ein Display, dessen Auflösung so hoch sein soll, dass von blossem Auge (bei einer durchschnittlichen Distanz zum Display) keine Pixel zu erkennen sind (auch genannt High Pixel Density Display). Ursprünglich entwickelt wurden diese Displays von LG Display. Ein Retina Display hat eine viel höhere Auflösung als ein herkömmliches Display.
Was ist das Problem?
Durch diese hochauflösende Displays wird der Pixel zu einer relativen Einheit (auch in den CSS 2.1 Spezifikationen nachzulesen). Wenn sich die Auflösung des Anzeigegeräts stark von der Auflösung eines typischen Computers unterscheidet, sollte das Gerät die Pixelwerte skalieren. Das führt dazu, dass ein virtueller Pixel (z.B. im CSS) nicht mehr einem phyischen Pixel entspricht, sondern mit einem Faktor skaliert wird. Beispielsweise kann ein virtueller Pixel 1.5 oder 2 physischen Pixel entsprechen. Neben anderen Effekten können dadurch verschwommene Bilder entstehen.
Beispiel (iPhone 4).
Hier wurde ein Bild ganz normal eingebunden, ohne weitere Anpassungen. Initial Scale des Geräts ist auf 1, Zooming deaktiviert, mithilfe des Meta-Tags
<meta name=“viewport“ content=“width=device-width, initial-scale=1, maximum-scale=1″>
Wie zu erkennen ist, ist das Bild stark verschwommen. Die Buchstaben werden nicht scharf dargestellt.
Lösungsansatz
Um das Problem zu lösen, muss das Bild zuerst mit doppelter Auflösung vorhanden sein (in meinem Beispiel war das Ursprungsbild 300 px breit. Für hochauflösende Displays brauchen wir dementsprechend 600 px Breite).
Damit das Bild nicht doppelt so gross dargestellt wird, müssen wir das Bild nun in der Anzeige skalieren. Dafür gibt es mehrere Möglichkeiten. Unser Ansatz ist, das Bild einem Element als Hintergrund im CSS zuzuweisen, dem Element die Breite des Ursprungsbildes zuzuweisen und eine Skalierung auf die Ursprungsbreite vorzunehmen. Klingt kompliziert, ist aber nicht so schwierig:
<div style=“background:url(/BeispielBild2.jpg); background-size:100%; width:300px; height:100px;“ />
background: Wir weisen dem Div das Bild als Hintergrund zu
background-size: Mit der Angabe von 100% skaliert der Browser den Hintergrund auf die Breite des Elementes, hier also auf 300 px
width: Die Breite des Ursprungsbildes. Damit wird das Bild gleich gross dargestellt wie das ursprüngliche Bild.
height: Die Höhe des Bildes bleibt dementsprechend auch bei der Höhe des Ursprungsbildes.
Damit sieht das Bild so aus (iPhone 4):
Was passiert auf Geräten ohne High Density Display?
Auf Geräten ohne High Pixel Density Display wird das skalierte Bild ohne merklichen Unterschied zum normalen Bild dargestellt. Mobile Geräte skalieren heute relativ gut. Es kann also ohne Probleme nur ein Bild (doppelte Auflösung) bereitgestellt werden. Ein Nachteil davon ist, dass das grosse Bild an das Gerät übertragen werden muss.
Mit etwas höherem Aufwand kann für das Gerät mit normaler Auflösung ein anderes CSS angewendet werden mithilfe dem CSS Media Query:
<!– High pixel density displays –><link rel=’stylesheet‘ href=’highRes.css‘ media=’only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)‘ />
Darauf möchte ich in diesem Beitrag aber nicht weiter eingehen.
Zusammenfassend…
Auf Geräten mit High Pixel Density Display werden Bilder verschwommen dargestellt. Um das Problem zu lösen, muss ein Bild mit höherer Auflösung bereitgestellt werden. Dieses Bild kann grundsätzlich auch auf Geräten mit normalen Displays dargestellt werden – natürlich müssen dadurch mehr Daten übertragen werden, was bei mobilen Seiten meinstens ein Problem darstellt. Eine Lösung für dieses Problem sind CSS Media Queries (min-device-pixel-ration).
Bei Fragen kannst du mich unter raphael.mueller@2sic.com kontaktieren.
Liebe Grüsse
Raphael
2sicgeeks 