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:
- CSS-Pixel: Pixelgröße, in der das Bild dargestellt wird.
- Bild-Pixel: Anzahl der Pixel, die ein Bild tatsächlich hat (z.B. 320×240).
- Device- bzw. Display-Pixel: Tatsächliche Pixel des Device-Bildschirms, auf denen das Bild dargestellt wird
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.
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.
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.
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.
