Das neue iPad und die verschwundenen Pixel

Seit Freitag liegt das neue iPad mit Retina-Display in den Apple Stores. Es war fast ein bisschen Enttäuschung zu spüren nach der Präsentation am 7. März. Aha, noch ein iPad. Mit Retina-Display, wussten wir schon. Hat zwar mehr Rechenpower, aber die geht ja im wesentlichen dafür drauf, das Super-Display anzusteuern.

Was auf den ersten Blick so unscheinbar aussieht, hat es in sich. Das New iPad hat das Potenzial, die Webdesign-Welt gründlich aufzumischen.

Das Retina-Display des New iPad bringt erstaunliche 2048×1566 Pixel auf eine Fläche von 9,7 Zoll. Das sind etwa viermal so viele Bildpunkte wie bisher.

Bildquelle: Apple Website

Wie man sieht – sieht man nichts: Da sind keine Pixeltreppchen mehr, der Text ist gestochen scharf.
Das Display des neuen iPad ist mit 264 Pixeln pro Zoll ist fast so präzise wie eine Drucksache. Der Graben zwischen in Druck und Screen hat sich damit in Luft aufgelöst.

Sieht eine Website auf dem iPad 3 anders aus als auf dem iPad 2?

Ja und Nein. Texte und CSS-Effekte wie Schatten und Verläufe werden auf allen drei Geräten im Prinzip gleich dargestellt –  mit dem Unterschied, dass typografische Details auf dem iPad 3 sehr viel präziser sind.

Das New iPad (ebenso wie das iPhone 4) rechnet sich Textdarstellung und CSS-Anweisungen um. Damit schöpfen die Geräte einerseits ihre neuen Darstellungsmöglichkeiten aus, andererseits kriegt der Nutzer keinen Schreck, weil plötzlich alles anders aussieht. Websites, die auf hochauflösende Displays keine Rücksicht nehmen, werden dargestellt wie gewohnt.

Das ist praktisch, weil man beim Schreiben von CSS nichts weiter beachten muss. Aber es passiert etwas im Hintergrund, das auch unerwünschte Effekte haben kann. Aus einem Rahmen von einem Pixel wird mal eben ein Rahmen von zwei Pixeln. Das kann bei manchen Elementen störend wirken.

Ein Pixel ist kein Pixel

Pixel waren allerdings noch nie eine sonderlich verlässliche Einheit. Jedes Ausgabe-Gerät definiert sich die Fläche eines Pixels nämlich anders. Ein CSS-Pixel ist daher ein rein theoretischer, virtueller Wert. Die tatsächliche Größe ist immer abhängig vom Gerät, das sie darstellt.

Mit den hochauflösenden Displays wird es endgültig unübersichtlich: 1 (CSS-)Pixel auf dem einen Gerät (z. B. einem iPhone 3)  sind 1,5 oder 2 (Geräte-)Pixel auf dem anderen (z.B. einem Phone 4).
Ein Grund mehr, Pixel als Maßeinheit hinter sich zu lassen und mit Einheiten zu arbeiten, die einfacher zu handhaben sind (Prozentwerte oder em) und das Layout über Responsive Design anpassungsfähig machen.

Mit dem Verlust der Pixel als Maßeinheit ist das Webdesign mit festen Pixel-Werten am Ende. Das pixelgenaue Layout funktioniert nicht mehr, wenn die Größe eines CSS-Pixel nicht mehr abschätzbar ist. Das Retina-Display macht 2 Pixel draus, beim nächsten iPad, Samsung Tablet oder Playbook sind es vielleicht 2,5 Pixel oder mehr.

Das Retina-Display und die Bilder

Zwar werden auch Bilder vom New iPad automatisch angepasst, aber selbstverständlich sieht man den Unterschied, wenn man auf dem Retina-Display ein Bild betrachtet, das die hohe Auflösung des Bildschrims unterstützt. So ein Bild schaut um Welten “knackiger” aus.

Das heißt, wenn man das Potenzial von hochauflösenden Displays ausschöpfen möchte, muss man eine Möglichkeit finden, diese Displays gezielt anzusprechen.
Die Pixeldichte kann man mit der CSS-Anweisung device-pixel-ratio abfragen. Eine Media Query filtert die entsprechenden Geräte heraus und liefert ihnen ein höher aufgelöstes Bild:

Der Haken: Hoch aufgelöste Bilder sind dicke Brocken. Im Funknetz kostet das Zeit und Geld. Es ist also die Frage, ob bzw. wann ein hoch aufgelöstes Bild tatsächlich einen Mehrwert bietet, der diese Nachteile aufwiegt.

Im Kontext der Smartphones fällt die Entscheidung noch mehr oder weniger leicht. Mobile Geräte müssen mit Funknetzen zurechtkommen. Auch wenn diese Netze schneller werden (das New iPad unterstützt den neuen Standard LTE), im Zweifelsfall ist es immer besser, ein paar Kilobyte einzusparen.

Beim New iPad ist diese Entscheidung schon schwieriger. Das iPad passt zwar in die Tasche, ist aber kein “klassisches” Mobilgerät. Mit dem iPad surft man zum großen Teil übers WLAN. Hier ist Bandbreite kein Thema und die User sind vielleicht ganz begeistert über schicke, knackige Bilddaten. Wobei man die Ladezeiten von großen Bildern auch bei schnellen Datenverbindungen sicher nicht ganz unter den Tisch fallen lassen kann. Server sind gelegentlich überlastet und unter großen Bilddaten leiden nicht zuletzt Speicher und Prozessor des Rechners.

Wie geht es weiter?

Eine Antwort auf das Bilddaten-Dilemma könnte das Bildformat SVG sein. SVG ist ein Vektorformat, das zumindest einen Teil der JPEGs und PNGs auf einer Website ersetzen könnte. Aber ein Foto lässt sich nicht so ohne Weiteres in ein Vektorformat umwandeln. Und Kompressionsverfahren haben Grenzen.

Bleibt der Faktor der Geschwindigkeit der Datenübertragung. Sicher, die Funknetze werden schneller werden, auch die Anzahl der Highspeed-Anschlüsse nimmt zu.
Aber eine flächendeckendes Hochgeschwindigkeitsnetz wird es nicht geben. Schon wer außerhalb von Großstädten und Ballungsgebieten wohnt, hat wahrscheinlich auch in Zukunft Probleme, einen DSL-Anschluss zu bekommen. Ganz zu schweigen von Ländern mit schwächerer Infrastruktur.
In gewisser Weise sind die neuen Super-Displays sind ein weiterer Stein auf dem Weg in Richtung Zwei-Klassen-Internet.

Veröffentlicht von

Hallo, mein Name ist Kirsten Schelper. Ich bin Webdesignerin aus München mit einer Passion für italienischen Kaffee, vegetarische Küche und Fahrradfahren. Ihr findet mich nicht bei Facebook, dafür aber auf Twitter und auf Google+.

3 Kommentare » Schreibe einen Kommentar

  1. Danke für den profunden Artikel. Stehe vor einem Konzeptauftrag für einen Kunden, der seine Website explizit auf die mobilen Endgeräte ausgerichtet haben will. Das Thema Mobile wird uns Webdesigner in den nächsten Jahren beschäftigen und weil hierzu Standards erst in der Vorbereitung sind, ist der Austausch zur Problematik höchst willkommen.

  2. “Retina”-Displays werden wir mit hoher Wahrscheinlichkeit schon bald nicht nur in Tablets sondern auch in Notebooks sehen. Das wird das Webdesign nachhaltig verändern. Die Bandbreitenfrage bereitet Kopfzerbrechen, wenn man plötzlich die mehrfache Datenmenge pro Webseite über das Funknetz laden muss. Apple hat auf der iPad-Website damit begonnen, Bilder in hoher Auflösung bereitzustellen, die vom iPad 3 *zusätzlich* heruntergeladen werden.

    Eine Lösung deutet sich mit sog. “responsive CSS Images” an, die in Abhängigkeit der verfügbaren Bandbreite geladen werden:
    http://lists.w3.org/Archives/Public/www-style/2012Feb/1103.html

    Das könnte dann so ähnlich aussehen:
    selector {
    background: image-set(url(foo-lowres.png) 1x low-bandwidth,
    url(foo-highres.png) 2x high-bandwidth);
    }

    Eine erste WebKit-Implemenation soll es bereits geben:
    http://www.webkit.org/blog/1869/last-week-in-webkit-the-move-of-wtf-and-responsive-css-images/

    SVG ist ein Zombie-Format, das alle Jahre wieder aus dem Grab klettert. Vielleicht klappt’s ja diesmal.

    • Hallo, Frank,

      vielen Dank für Deinen interessanten Kommentar!
      Ich musste über das Zombie-Format sehr lachen. Ich bin auch gespannt, wie es damit weitergeht.
      So eine richtig mächtige Lösung ist das SVG-Format wohl nicht, eigentlich eher eine randständige Geschichte.

      Schöne Grüße

      Kirsten