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

Schreibe einen Kommentar

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

*

*