Websites für Retina Displays optimieren

Apple nennt sie Retina Displays. Die neuen hochauflösenden Displays im iPhone 4S (326ppi), dem neuen iPad (264ppi) und dem neuen MacBook Pro (220ppi).

Natürlich ist auch das Apple Betriebssystem auf die neuen Displays ausgelegt. Sogar (einige) der Entwickler von Apps für iPhone, iPad und Mac optimieren ihre Produkte für die neue Display-Generation.

Aber was ist mit den Webdesignern? Wer einmal mit einem MacBook Pro mit Retina Display im Internet unterwegs war, war einerseits von den atemberaubend scharfen Schriften beeindruckt. Andererseits aber machte sich beim Betrachten von Grafiken Ernüchterung breit. Sie sind unscharf.

Normale Pixeldichte

Doppelte Pixeldichte

Der Grund dafür ist, dass die normalen Grafiken auf 200% hochskaliert werden. Wer das einmal in Adobe Photoshop (oder einer ähnlichen Software) gemacht hat, erhielt das gleiche unscharfe Resultat. Rastergrafiken lassen sich eben nicht über 100% skalieren ohne an Qualität und Schärfe zu verlieren.

Eines ist klar: Webdesigner, die ihre Website für Retina Displays optimieren wollen, müssen alle Grafiken doppelt herstellen. Einmal in normaler Grösse, einmal doppelt so gross.

jQuery hilft

Der findige Entwickler Troy Mcilvena stellt nun ein Plugin für jQuery bereit. Dieses Script tauscht einfach das Bild in normaler Auflösung gegen das Bild in doppelter Grösse aus. Natürlich ohne, dass die Website neu geladen werden muss.

Beispiel

Jeder weiss, wie ein Bild in die Website eingebettet wird:

<img src="ordner/dateiname.jpg" width="600" height="400" />

Damit das jQuery Plugin greift, muss die grössere Grafik mit dem Zusatz @2x eingebettet werden:

<img src="ordner/dateiname@2x.jpg" width="600" height="400" />

Das jQuery Plugin ersetzt also dateiname.jpg durch dateiname@2x.jpg. Da das Bild immer noch gleich gross in der Website eingebettet wird, verdoppelt sich die Pixeldichte und das Bild sieht auch auf dem Retina Display scharf aus. Ja sogar noch schärfer!

Das jQuery Plugin kann kostenlos aus dem GIT Repository des Entwicklers heruntergeladen werden. Die Installation ist ganz einfach.

Website Performance

Grundsätzlich können Retina-Grafiken auch von Anfang an verwendet werden. Aufgrund der grösseren Datenmenge lädt die Website aber länger als gewohnt. Und das kann sich u.a. negativ auf das Ranking bei Google auswirken.

Das jQuery Script ersetzt die normale Grafik nur dann, wenn die entsprechende grössere Datei auch vorhanden ist. Andernfalls wird die normale Grafik angezeigt.