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.
ommentare
Für WordPress habe ich dieses Plugin gefunden, weiss aber noch nicht ob es wirklich alles richtig macht. Vielleicht möchtest du es mal testen.
http://wordpress.org/extend/plugins/wp-retina-2x/
Würde mich auch interessieren. Eine Erklärung auf Deutsch suche ich bis jetzt noch vergebens.
(welches Plugin hast du für die Kommentarfunktion)
Dafür braucht man kein jQuery. CSS Only Lösung mit Media Queries:
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min–moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1) {
/* Retina zueg */
}
Na bravo. Jetzt kann ich wegen dem Apple Dreck auch noch alle Grafiken doppelt erstellen. 😉
Ich wusste nicht, dass man Webseiten speziell für Retina optimieren kann. Wertvoller hinweis. Ich werde es selber testen.
Danke, ein wertvoller Trick mit dem Jquery Plugin – auch fuer andere Angelegenheiten. Werde ich gerne austesten, hatte mich gerade vor kurzem bzgl. dem Retina Display etwas schlauer gemacht, da kommt mir dieser Hinweis sehr gelegen.
Vielen Dank für den Hinweis betreffend Retina im CSS