Wie hochauflösende Displays das Webdesign verändern

Die neueren iPhone und iPad Generationen haben es schon, und nun bekommt auch das neue MacBook Pro von Apple ein Retina-Display verpasst. Retina-Displays, das ist Apples neuste Generation hochauflösender Displays.
Dabei bezeichnet Apple alle seine Screens als Retinas, bei welchen der einzelne Pixel für das menschliche Auge nicht mehr erkennbar ist.

Schärfer als HDTV

Mit über 5 Millionen Pixel auf seinem 15,4 Zoll Display hat das MacBook eine Pixeldichte von 220ppi, damit liegt es zwar noch hinter der des neusten iPads (264ppi) und des iPhone 4S (326ppi), hat aber dennoch eine mehr als doppelt so hohe Auflösung als ein Standardgerät mit HDTV-Auflösung.
Noch ist Apple Vorreiter beim Einsatz solcher hochauflösenden Displays, doch andere Unternehmen werden nachziehen und ihrerseits hochauflösende Displays verbauen, sei es auf IPS-LCD Basis, wie Apples Retina oder auf OLED-Basis, auf der Samsung seine Smartphones mit hochauflösenden Super-AMOLED-Displays ausstattet.

Das Internet ist noch nicht HD ready

Weil hochauflösende Displays viel mehr Pixel haben als der bisherige Standard, wird ein einzelnes Pixel logischerweise auch viel kleiner angezeigt. Damit aber etwa Grafiken nicht nur noch einen Teil ihrer Größe haben, werden sie von den HD-Geräten einfach hochskaliert. Dabei geht dann aber Bildqualität verloren und Grafiken erscheinen unscharf und pixelig.

Zwar hat Apple seine Anwendungen schon für die neuen Herausforderungen optimiert und auch andere Anbieter werden ihre Programme anpassen. Doch im Web sind die meisten dieser Inhalte in der Regel in bewusst niedriger Qualität gehalten um die Ladezeiten zu verkürzen. Wenn also HD-Displays bald zum Standard zählen muss bei der Gestaltung von Websites umgedacht werden, da Geräte mit Retina Display, Bilder, Grafiken und Videos in entsprechender Qualität verlangen.

Lösungsansätze

Das Problem bei Retina-Displays erstreckt sich zunächst vor allem auf pixelbasierte Grafiken. Bei auf Vektoren basierenden Grafiken oder Schriften gibt es das Problem nicht. Sie erscheinen gestochen scharf, sei es auf herkömmlichen oder hochauflösenden Displays.
Ein möglicher Lösungsansatz wäre es deshalb, Icons & Piktogramme als Fonts anzulegen.
Eine andere Möglichkeit ist in CSS3 mit Hilfe von MediaQueries nicht nur die Abmessungen sondern auch die Auflösungen von Bildschirmen abzufragen um auch Pixelgrafiken im Layout ideal für verschiedene Auflösungen darzustellen. Dabei werden zwei Sprites angeboten, mit hoher und normaler Auflösung.

Für Grafiken innerhalb des Inhaltsbereichs einer Site gibt es aber leider noch keine Ideallösungen. Im Moment wird hier vor allem mit Plugins und Scripten experimentiert welche die Auflösungen der Endgeräte speichern und die Verfügbarkeit hochauflösender Bilder prüfen und gegebenenfalls anzeigen. Dazu müssen die Bilder dann aber auch in verschiedenen Auflösungen bereit liegen.

Und damit bleibt das Problem der großen Datenmengen die sich aus hochauflösende Bilder und Grafiken ergeben zunächst einmal bestehen. Zwar wird die Geschwindigkeit der Netze weiterhin zunehmen, aber wer etwa außerhalb großer Ballungsgebiete oder in Regionen mit schlecht ausgebauter Infrastruktur lebt, für den wird es noch längere Zeit problematisch sein “HD ready-Inhalte” auf seinem Retina-Gerät zu genießen.