Das hochauflösende Web - Retina-Displays
Lesezeit: 1 Minute, 23 Sekunden
Die technologische Entwicklung von Displays hat in letzter Zeit einen riesigen Sprung nach vorne gemacht. So wie HDTV schon Wohnzimmer revolutioniert hat kommt nun auch ein wichtiger Schritt für Webdesigner und Grafiker. Die Pixeldichte moderner Displays wie z.B. die des neuen iPad von Apple liegt jenseits von allem, was unser Auge bisher an Bildschirmen wahrgenommen hat.
Bislang sind die meisten aller im Web verwendeten Bilder mit 72ppi (Pixels per Inch) abgespeichert. Im Printdesign arbeitet man mit 300ppi, was viele Webworker denken lässt, Onlinegrafiken ließen sich nicht zufriedenstellend ausdrucken. In Wahrheit spielt die ppi-Kennzahl im Web jedoch keine Rolle. Alles was zählt ist die tatsächliche Größe in Pixeln. Ein 200x200px großes Bild sieht online gleich aus, egal ob es mit 72, 150 oder 300ppi aus dem Bildbearbeitungsprogramm der Wahl exportiert wurde.
Um höchstauflösende Retina-Displays korrekt zu bedienen und deren Vorteile auszuspielen, müssen dennoch einige Punkte beachtet werden. Es sollten für den Anfang stets zusätzliche Versionen in doppelter Auflösung (@2x) hinterlegt werden.
Weiterhin seien Vektorgrafiken wärmstens empfohlen. Bitmap-Grafiken sollten vermieden werden. Mit Vektoren hingegen ist man gewappnet für unterschiedlichste Auflösungen, denn diese Dateien sind skalierbar.
Mit CSS3 können Schlagschatten oder Verläufe erstellt werden, ohne dass kilobytelastige Grafiken auf Webserver geladen werden müssen. Diese Elemente sind gestochen scharf und skalieren automatisch zur Auflösung ohne hohe Ladezeiten in Anspruch zu nehmen.
Schnell haben findige Webworker auch Lösungen mittels CSS für die unterschiedlichen Elemente von Benutzerinterfaces gefunden - mit Webfonts (@font-face) lassen sich nicht nur perfekt fast alle erdenklichen Schriftarten darstellen, sondern auch Icons und andere häufig verwendete Symbole.