Hochauflösende (Retina) Bilder ohne Plugins realisieren

Jaja, ich weiß, Retina ist ein Wort aus der Apple Welt, aber Ihr wisst alle worum es geht. Mit den neuen iPhones (ab iPhone 4), iPads (3 und 4) oder Retina MacBooks, sowie diversen Android Geräten gibt es hochauflösende Displays, bei denen bisherige Grafiken im Web, irgendwie nicht knackig genug dargestellt werden.

Warum ist das so?

Nun, Retina Displays haben eine viel höhere Auflösung, die angeforderten Bilder von Internetseiten werden auf die vierfache Größe skaliert, aber dennoch in der ursprünglichem Fläche dargestellt. Als Beispiel: Eine 100×100 Pixel Grafik wird auf 200×200 Pixel hochskaliert, im Browser dennoch auf 100×100 Pixel dargestellt. Durch das Hochskalieren, geht natürlich Qualität verloren und die sieht man recht eindeutig.

Lösungsversuche

Zum einen würde es ausreichen immer die Bilder in der höheren Auflösung zur Verfügung zu stellen, diese aber kleiner anzeigen zu lassen. Das Retina-Prinzip findet dann immer statt, weil auch auf Nicht-Retina-Displays die Bilder mit höherer Auflösung geladen werden, was letztendlich Bandbreite kostet.

Zum anderen gibt es u. a. für WordPress diverse Plugins, aber ich bin kein Freund davon, sich die WordPress Installation mit Plugins vollzumüllen, wenn es mit weniger Codezeilen schneller und geschmeidiger gelöst werden kann. Mehr Plugins bedeuten mehr Coding, der beim Abruf der Seite ausgeführt werden muss, was zu langsameren Ladezeiten führen kann.
Ich habe auch die Erfahrung gemacht, dass diese Plugins das Nachladen der Bilder Client-seitig durchführen, was bedeutet, dass erst alle Bilder ganz normal geladen werden, anschließend gecheckt, ob ein Retina-Display vorliegt und dann werden die höher aufgelösten Bilder nachgeladen. Das sieht erstens unschön aus, weil erst die unscharfen Bilder dargestellt werden, außerdem kostet dies ebenfalls wieder enorme Ladezeit der Internetseite.

Ich habe mich für eine server-seitige Umleitung auf hochaufgelöste Bilder entschieden, da dies nicht zu Lasten der Ladezeit geht und die Umleitung quasi in Echtzeit ausgeführt wird.
Notwendig ist hierfür ein kleines Javascript, welches überprüft, ob eine Retina-Auflösung vorliegt und ein entsprechendes Cookie zur Laufzeit auf dem Endgerät setzt: retinadisplay=true ansonsten retinadisplay=false.
Dieses Script habe ich in die header.php meiner WordPress Installation direkt am Anfang des-Abschnittes gesetzt.

<!--script to set "Retina Cookie" -->
<script>
if((window.devicePixelRatio===undefined?1:window.devicePixelRatio)>1)
document.cookie='retinadisplay=true;path=/;domain=domainname.de';
else
document.cookie='retinadisplay=false;path=/;domain=domainname.de';
</script>


Damit wird das Cookie gesetzt, bevor überhaupt Bilder ausgeliefert werden. Nun kann eine server-seitige Umleitung in der .htaccess-Datei Eures Servers eingerichtet werden.
Es wird überprüft, ob das Cookie “retinadisplay” nicht den Wert false hat und es wird geprüft, ob die angeforderte Datei nicht ein @2x im Dateinamen hat. Ist beides der Fall werden alle Anfragen an Dateitypen von JPG, GIF oder PNG direkt weitergeleitet an die Datei mit dem Zusatz @2x. Existiert keine Datei mit diesen Namen, wird die ursprüngliche Grafik geladen.
Nun werden immer und ohne Umschweife direkt die hochaufgelösten Grafiken geladen, Voraussetzung ist hierfür, dass im gleichen Verzeichnis der ursprünglichen Datei eine mit gleichen Namen und dem Zusatz @2x existiert. Statt datei.png wird nun datei@2x.png geladen. Ihr könnt Euch auch einen anderen Suffix ausdenken und die Bilder entsprechend benennen. Achtet dann darauf den Code entsprechend anzupassen. Denkt bitte auch daran die Bilder immer mit den Parametern width und height anzusprechen.


<IfModule mod_rewrite.c>
Options -MultiViews
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_COOKIE} !^.*retinadisplay.*=false$ [NC]
RewriteCond %{REQUEST_FILENAME} !@2x
RewriteRule ^(.*)\.(gif|jpg|png)$ $1@2x.$2
# if @2x is not available fulfill the original request
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)@2x\.(gif|jpg|png)$ $1.$2
</IfModule>


Anmerkung: Es würde ausreichen nur dann ein Cookie zu setzen, wenn eine Retina-Auflösung vorliegt und in der htaccess nur abzufragen, ob dieses Cookie existiert:
RewriteCond %{HTTP_COOKIE} ^.*retinadisplay.*$ [NC]

Allerdings hat diese Methode bei mir nicht funktioniert. Vielleicht weiß jmd. eine Lösung hierfür.

Vorteile dieser Methode:

• Keine unnötigen Ladezeiten der Seite
• Bilder können normal von Suchmaschinen indexiert werden
• Wenn Javascript und/oder Cookies deaktiviert sind, gibt es keine Funktionseinschränkungen, es werden immer die hochaufgelösten Bilder geladen (da kein Cookie existiert, also auch keins mit dem Wert false)

Schöner wäre hier die andere Lösung, die bei mir wie gesagt nicht funktioniert. Dann würde es heißen: Keine Kekse, keine Retina-Bilder.

Beispiel (nur sichtbar auf Retina-Displays):

ohne Retina Auflösung

in Retina Auflösung

Ich werde nun ab sofort auf diesem Blog hochaufgelöste Bilder bereitstellen.

Quelle der Inspiration ist: http://shauninman.com/tmp/retina/