Webseiten optimieren für Retina-Displays bei Apple-Geräten
iPad 3 und das MacBook Pro mit Retina-Display zeigen dank doppelter Auflösung einen bislang nicht gekannten Detailreichtum. Damit Webseiten diese Fähigkeiten bei der Anzeige von Bildern automatisch nutzen und anderen Geräten weiterhin niedrig aufgelöste Grafiken servieren, gilt es jedoch einiges zu beachten.
- Detlef Beyer
"Responsive Web Design" ist im Trend. Flexible Raster und dynamische Layoutanpassungen sind die Antwort auf die wachsende Vielfalt von Geräten und Bildschirmgrößen. Die Webseite wird für die jeweilige Anzeigefläche optimiert: beispielsweise einspaltig auf einem iPhone, zweispaltig auf einem iPad und dreispaltig auf dem Desktop. Grundlage ist aber derselbe Datenbestand – moderne HTML5- und CSS3-Funktionen ermöglichen diese automatische Anpassung.
Eine vergleichbar komfortable Lösung für die Bild-Problematik auf Retina-Displays gibt es dagegen in den Standards noch nicht. Während der Browser Schriften und CSS-Effekte wie abgerundete Ecken selbsttätig hochaufgelöst berechnet, klappt das mit Bildern nicht. Da die bessere Datenbasis fehlt, werden sie nur hochskaliert und erscheinen dann schnell grob pixelig. Um das zu verhindern, sollte ein Pixel eines Bildes einem Pixel auf dem Display entprechen. Bei verdoppelter Auflösung ist das die vierfache Anzahl an Pixeln.
Jetzt könnte man meinen, eine hochaufgelöste Version des Bildes würde reichen, denn dieses ließe sich auf dem Client für Nicht-Retina-Displays einfach verkleinern. Technisch geht das, aber es wäre eine riesige Ressourcenverschwendung, Server und ältere Mobilgeräte wären schnell überlastet.
Der Webdesigner sollte in Zukunft besser mit zwei Bildversionen hantieren, möchte er die beste Qualität auf Normal- und Retina-Display erzielen. Dazu braucht es aber zusätzlich einen Automatismus, der entscheidet, ob beim Aufruf der Seite das hochaufgelöste Bild geladen werden soll oder nicht. Neben der Punktdichte des Displays sollte dabei auch die Leitungsqualität der Internetverbindung eine Rolle spielen. Denn niemand möchte auf die Retina-Qualität zu lange warten, wenn die mobile Datenverbindung das nicht hergibt. Die technischen Gegebenheiten des Gerätes zu erfragen, ist mit den in CSS3 eingeführten Media Queries zwar recht einfach, die Leitungsqualität spielt darin aber keine Rolle.
