Apple hat mit seinem Retina-Display, das sie bereits in MacBooks, iPads und iPhones verbauen, neuer Maßstäbe für hochauflösende Bildschirme gesetzt. Doch damit Ihre Internetpräsenz auf diesen Geräten in voller Schärfe brilliert, müssen Sie einige Vorkehrungen treffen.

Was ist ein Retina-Display?

Unter dem Begriff Retina-Display bezeichnet Apple Bildschirme mit einer besonders hohen Auflösung. Die Pixeldichte der Displays ist so hoch (das iPad 3 hat unglaubliche 2048 x 1536 Pixel), dass das menschliche Auge aus einem typischen Betrachtungsabstand nicht in der Lage ist, einzelne Pixel zu erkennen.

Derzeit werden diese hochauflösenden Bildschirme in den Produkten iPod touch, iPhone, iPad und MacBook Pro verbaut. Aber auch andere Hersteller bestücken ihre Geräte immer öfter mit Bildschirmen, die eine relativ hohe Pixeldichte vorweisen, wie zum Beispiel beim HTC Rezound.

Was bedeutet das Retina-Display für meine Website

Das Problem ist, dass normale Websites, die auf traditionellen Bildschirm noch sehr gut aussahen, plötzlich auf den neuen hochauflösenden Bildschirmen ziemlich unscharf wirken. Das liegt daran, dass die Bilder für die höhere Auflösung größer dargestellt werden müssen. Dafür werden sie in Höhe und Breite gestreckt.

Da der Trend zu hochauflösenden Bildschirmen mittel- bis langfristig nicht mehr aufzuhalten ist, wird es nötig, über die Konsequenzen für den eigenen Webauftritt nachzudenken.

Betroffen von der höheren Pixelanzahl sind vor allem die Bilddateien (Logos, Icons, Fotos und sonstige grafische Elemente) Ihrer Website: Um auf dem Retina-Display einen brillanten Eindruck zu hinterlassen, müssen diese Elemente in doppelter Auflösung vorhanden sein.

Eine Beispielrechnung

In HTML verwendet man die Anzahl der Pixel (Pixel per Inch, PPI), um die Größe eines Bildes einer Webseite zu bestimmen. Pixel sind die kleinste physische Einheit eines Bildschirms. Kombiniert man die winzigen beleuchteten Flächen, entsteht ein Bild. Das Problem: Die angezeigte Größe des Bildes hängt von der Auflösung des Bildschirms ab und kann stark variieren.

Früher waren 72 PPI Standard. Heutzutage haben die meisten modernen Bildschirme eine Auflösung von mindestens 90 PPI und weit mehr. Zum Vergleich: das iPad 2 hat mit einer Anzahl von 1024 × 768 Pixel einen Wert von 132 PPI. Das iPad mit seinen unglaublichen 2048 × 1536 Pixel erreicht sogar 264 PPI. Ausgehend von der Pixelanzahl des iPad 2 muss also ein Logo oder Foto für eine scharfe Anzeige auf dem iPad 3 eine doppelt so hohe Auflösung haben.

Nur so nebenbei, weil wir immer wieder darauf angesprochen werden: für Websites ist die Punktdichte – die Maßeinheit für die Auflösung im Druck gemessen in DPI (Dots per Inch) – irrelevant.

Doppelte Auflösung = Doppeltes Datenvolumen

Doppelt aufgelöste Bilder haben aber auch eine gut doppelt so hohe Datenmenge. Das wirkt sich negativ auf die Ladezeiten der Website aus. Außerdem wird zurzeit die Mehrheit der Besucher Ihrer Website bestraft, die noch mit „normaler“ Auflösung bei Ihnen vorbeisurft. Sie haben nicht nur eine höhere Ladezeit, auch Ihre mobilen Datentarife werden entsprechend unnötig belastet.

Was also kann man tun, um den unterschiedlichen Bedürfnissen gerecht zu werden?

Eine Website für hochauflösende Bildschirme optimieren

Tipp: Weniger Bilder verwenden

Der erste Aufruf gilt den Webdesignern, weniger Bilder zu verwenden und grafische Elemente wie zum Beispiel abgerundete Ecken, Schatten und Farbverläufe stattdessen mithilfe von CSS (Cascading Style Sheets) abzubilden. Icons lassen sich mithilfe von Webfonts darstellen. Sie basieren auf Vektoren anstelle von Pixeln. Auf Basis von Text und CSS erstellte Grafiken skalieren auf den Retina-Displays ohne eine Verringerung der Qualität.

Natürlich kommt nicht jede Website völlig ohne Bilder als Strukturelemente aus, aber die Anzahl der Images auf das Nötigste einzudämmen, reduziert den Aufwand, eine Website für Retina zu optimieren.

Tipp: Mehr Bilder verwenden

Kommt man um Fotos oder Logos nicht herum, gibt es nur eine Lösung: die Bilder müssen hochauflösender eingesetzt werden. Um den Großteil der Besucher mit normal auflösenden Bildschirm nicht mit hohen Datenmengen zu bestrafen, benötigen wir Bilder in zweierlei Auflösung.

Doch woran erkennt WordPress, welche Bilder ausgeliefert werden sollen? Für Programmierer gibt es zwei Lösungen: Apple selbst zeigt auf seiner Webseite zunächst Bilder in Normalauflösung an und lädt mithilfe eines Javascripts hochauflösende Bilder nach, wird die Website mit einem Retina Display besucht. Das Problem ist aber auch mithilfe sogenannter „CSS Media Queries“ zu lösen: Die Technik ermöglicht es, die Auflösung des Bildschirms zu erkennen und ein entsprechendes Bild anzuzeigen.

Mit einem Plugin zur richtigen Auflösung

Damit wir nicht programmieren müssen, verwenden wir ein Plugin, das die nötigen Arbeiten für uns erledigt. Einmal installiert, erstellt das kostenlose Plugin WP Retina 2x automatisch für unsere Website die benötigen Bilddateien und regelt die passende Anzeige in Abhängigkeit der Bildschirmauflösung.

Ist die Auflösung der vorliegenden Bilder nicht hoch genug, werden Sie in der Medienübersicht gewarnt. Denn Bilder können nicht hoch skaliert werden, da sie sonst wieder unscharf werden. In diesem Fall müssen Sie die Bilder in einer höheren Auflösung erneut auf Ihren Webserver hochladen.