201213Apr

Webdesign: Retina-Grafiken für iPad/iPhone ausliefern

Mit der Einführung des "Retina Displays" steht bei neueren iPhone- und iPad-Modellen die vierfache Menge an Pixeln zur Verfügung. Das iPad 3 kommt so beispielsweise mit einer Bildschirmauflösung von 2048×1536 Pixeln und bietet eine entsprechend höhere Bildqualität, die sich in erster Linie bei HD-Videos bemerkbar macht.
Auch im Web kann das eine Umstellung bedeuten, denn Grafiken können jetzt mit der doppelten Größe ausgeliefert werden, so dass mehr Details geboten werden können. Bei der Entwicklung von nativen iOS-Apps können Retina-Grafiken einfach durch den Dateinamen kenntlich gemacht werden und so muss lediglich der Suffix "@2x" angehängt werden. Wer diese Lösung auch auf Websites einsetzen möchte, kann sich Retina.js ansehen: Die JavaScript-Lösung überprüft, ob eine Retina-Version einer Grafik existiert und tauscht diese entsprechend aus.

Retina Images

Eine weitere Lösung, bei der noch PHP zum Einsatz kommt, wäre Retina Images. Hier besteht der Vorteil darin, dass nur eine Grafik an den Benutzer ausgeliefert wird und zudem Fallbacks bestehen, wenn JavaScript oder Cookies deaktiviert sind. Das PHP-Skript wertet die vorliegende Information über die Bildschirmauflösung aus und liefert die bestmögliche Größe aus. Zu beachten ist, dass img-Grafiken die Attribute "width" und "height" und CSS-Background-Images das Attribut "background-size" besitzen müssen. Downloads und Informationen finden sich wieder bei GitHub.

RSS-Feed abonnieren Bookmark bei Del.icio.us