HTML5 Mobile

Retina-Display: Unterschiede zwischen CSS-, Bild- und Device-Pixel

Dieser Beitrag erklärt die unterschiedlichen Pixelangaben, um eine optimale Darstellung auf den hochauflösenden Retina-Display zu erreichen.

Im Artikel Website-Bilder für das Retina-Display optimieren hatte ich bereits zwei Methoden vorgestellt, wie die Bildqualität für iPhone, iPad und mittlerweile auch Macbook verbessert werden kann. Ergänzend hierzu noch einmal einige grundlegende Erklärungen.

Grundsätzlich ist es wichtig, die folgenden Pixelangaben zu verstehen und unterscheiden zu können:

Am einfachsten lässt sich dies an Beispielen erklären.

Beispiel 1: Der Normalfall

Man bindet eine Bitmap-Grafik (z.B. PNG oder JPEG) ganz gewöhnlich im HTML-Code ein: <img src="bild.jpg" width="3" height="1" />.

Man gibt als Größe also 3×1 Pixel an, da das Bild genau diese Maße hat. Somit entsprechen die Angaben zu HTML-/CSS-Pixel genau den Bild-Pixeln.

Wird dieses Bild nun auf auf 3×1 Pixeln des Device-Displays abgebildet, ist die Darstellung optimal. Jede Information kann genau einem entsprechende Device-Pixel zugeordnet werden.

Normaler Screen: Häufiger Fall, dass CSS-Pixel = Bild-Pixel = Device-Pixel

Beispiel 2: Retina Display

Der Unterschied beim hochauflösenden Retina-Display liegt darin, dass die Auflösung doppelt so hoch ist. Dies bedeutet, dass die Device-Pixel in diesem Beispiel bei 6×2 Pixel liegen.

Hat das Bild weiterhin 3×1 Pixel, so wird die feinere Auflösung des Displays gar nicht genutzt. Es sind nicht genügend Bildinformationen vorhanden. Jeder Bildpixel wird lediglich auf 4 Devicepixel verteilt, das Bild erscheint auf dem Retina-Display unscharf.

Bild mit normaler Größe (3×1) auf Retina-Display (6×2) erscheint unscharf

Beispiel 3: Retina-Display

Im dritten Beispiel besteht nun der Unterschied, dass die Bilddatei ebenfalls eine höhere Auflösung hat: 6×2 Pixel. Jetzt sind Bild-Pixel und Device-Pixel identisch, so dass das Bild optimal und scharf dargestellt wird.

Man sieht außerdem, dass die CSS-Pixel also lediglich die dargestellte Fläche auf der Website definieren.

Das Bild hat genügend Auflösung, um die Auflösung des Retina-Displays zu nutzen

Somit ist zum einen festzuhalten, dass CSS-Pixel von Device-Pixeln abweichen können. Zum anderen ist wichtig, dass Bilder immer dann ideal dargestellt werden, wenn „Bild-Pixel = Device-Pixel“ gilt.

Abschließend noch ein kurzer Hinweis zum Thema „DPI”: Durch die DPI-Angabe in Photoshop sollte man sich nicht irritieren lassen, da es sich lediglich um ein Meta-Datum handelt. Letztlich ist nur relevant, wie viele Pixel (=Bildinformationen) in einem Bild wirklich enthalten sind. Insofern kann man dies getrost bei den obigen Ausführungen gedanklich ausblenden.

11 Kommentare zu: Retina-Display: Unterschiede zwischen CSS-, Bild- und Device-Pixel

sco
15. Juli 2012, 23:35

Unverständlich ist mir noch, woraus tatsächlich die Unschärfe resultiert. Warum liefern bei einer doppelt so hohen Auflösung 4 Bildpunkte, die sich durch die Darstellung derselben Farbe/Graustufe ja zu quasi einem einzelnen Bildpunkt zusammenschließen und damit der Darstellung eines schlechteren Displays entsprechen, ein anderes Ergebnis? Immerhin wirken die Grafiken ja nicht nur gegenüber den schärfer dargestellten Grafiken und Schriften unschärfer sondern auch im Vergleich zu einem Display mit geringerer Auflösung.

flo
16. Juli 2012, 06:23

Ich denke, hier spielt einfach auch der Kontext eine Rolle. Wenn drumrum alles scharf ist (Schriften, UI-Elemente des Browsers, etc.), erkennt das Auge die schlechtere Qualität verglichen zum Rest.

Zum Vergleich: Das Szenario würde ja dem entsprechen, wenn man auf einem normalen Screen ein Bild in doppelte Größe darstellt (z.B. 200×200, obwohl es nur 100×100 hat). Das sieht man ja auch deutlich.

sco
16. Juli 2012, 11:36

Für mein Empfinden wäre das erstaunlich, auch wenn ich keine andere Erklärung für das Phänomen hätte. Ich muss einmal ein anderes Display daneben stellen.

sco
16. Juli 2012, 12:04

Das ist ja kaum zu glauben, es deutet alles darauf hin, dass der Eindruck der Unschärfe wirklich nur durch den Kontrast zu allem Umliegenden entsteht. Da sieht man mal, womit man sich bis jetzt die Augen ruiniert hat. (Wenn ich BBEdit öffne ist es allerdings immer noch schwer zu glauben. Ich bin mir nicht sicher, ob ich mir noch die Mühe mach, das zum Vergleich auf den anderen Rechner zu ziehen.)

flo
16. Juli 2012, 13:26

Wie so oft: Alles ist relativ 🙂 Wenn man mal eine Zeitlang ein iPhone 4 benutzt hat, merkt man plötzlich erst, wie schlecht das Display des iPhone 3g war…

Ben
23. Oktober 2012, 14:31

Hi,

Erstmal: topblog! Weiter so!

Eine frage: in Beispiel 3 steht „6×1 Pixel“. Sollte es nicht 6×2 Pixel heißen?

VG

Ben

flo
23. Oktober 2012, 19:45

Danke .. auch für den Hinweis, ist korrigiert (6×2 ist natürlich richtig).

Ben
24. Oktober 2012, 08:13

Bevor ich den Kommentar schrieb, hab ich gefühlte 100 Stunden überlegt ob ich irgendetwas nicht richtig verstanden habe 🙂 Jetzt bin ich beruhigt, uff

Patrick Horn
24. Oktober 2012, 18:31

Um wirklich die Hintergründe zu verstehen, sollte man vielleicht dies mal lesen (war für mich recht informativ, das meiste wusste ich auch nicht):
http://www.netmagazine.com/tutorials/master-css-pixels-retina-displays

Und zum Thema Unschärfe bei Bildern: da würde ich vermuten, dass z.B. ein iPhone mit Retina Display nicht einfach einen Bildpixel mit 4 seiner Device-Pixel darstellt, sondern alle Bilder für die Darstellung erst mal intern um 200% hochgerechnet werden z.B. mit einem bikubischen oder bilinearen Verfahren, damit dann aus einem Bild-Pixel 4 Device-Pixel werden. Die beobachteten Unschärfen sind sehr typisch für ein solches Hochrechnen (siehe Photoshop …). Anderenfalls müsste ein „Hochrechnen“ bzw. Übertragen der Bild-Pixel auf Device-Pixel durch Pixelwiederholung erfolgen, wodurch bei harten Kanten (oder typisch bei Bitmap-Bildern; also nur schwarz+weiß) Pixelungen sichtbar werden – bei einem 200%-Faktor zwischen Bild-Pixel udn Device-Pixel würde das einer Ansicht des Originalbilds bei 200% entsprechen. Kann mir vorstellen, dass Apple (und andere Hersteller) dies vermeiden wollen und das Ganze statt dessen mit einem bikubischen oder bilinearen Vergrößerungs-Verfahren machen … wenn man mal von Apple absieht wäre auch logisch, denn laut obigem Artikel arbeiten Android-Geräte oft mit einem „Vergrößerungsfaktor“ von 1,5 oder 1,6 und nicht 2 („Others, such as those using Android, upscale using different ratios, often around 1.5x or 1.6x.“). Da sähe eine reine Pixelwiederholung in vielen Fällen grauselig aus … nur bei exakt 200% wäre das überhaupt sinnvoll, würde ich mal sagen.

Außerdem darf man nicht vergessen, dass man auf einem Smartphone ja Webseiten beliebig größer/kleiner ziehen kann; auch da müssen Bilder runter- oder hochgerechnet werden vom Gerät … und auch da kommen sicherlich bikubische oder bilineare Verfahren zum Einsatz, alles andere macht keinen Sinn.

flo
25. Oktober 2012, 20:58

Danke für den Hinweis. Generell habe ich den Aspekt, wie genau skaliert wird, einfach ausgeklammert. Das hätte die eigentliche Botschaft wahrscheinlich zu kompliziert gemacht…

nk
10. Dezember 2012, 17:31

„Durch die DPI-Angabe in Photoshop sollte man sich nicht irritieren lassen, da es sich lediglich um ein Meta-Datum handelt. Letztlich ist nur relevant, wie viele Pixel (=Bildinformationen) in einem Bild wirklich enthalten sind“

Finde ich etwas unsachlich. Besser wäre der Hinweis, dass DPI eine Angabe für Druckmedien ist, die für Screenmedien vernachlässigt werden kann. Photoshop ist eben ein Bildbearbeitungsprogramm und Bildbearbeitung beschränkt sich nicht nur auf den Bereich Digital/Screen.

Schreibe einen Kommentar

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

*

*