Die aktuelle Smartphone, Tablet und sogar Computer Generation beschert uns mit den, umgangssprachlich als Retina Displays bekannten (danke Apple), High-DPI (HiDPI) Displays schärfere Schrift und grandiose Bilder. Wer bereits ein Endgerät mit Retina Display sein eigenen nennen darf, wird mir zustimmen, dass der Wechsel zurück zu einem normal aufgelösten Gerät, sich doch sehr unangenehm anfühlt (bei mir bezieht sich das ganze auf einen Vergleich zwischen dem iPad 1 und einem iPad 4). Plötzlich werden Schriften und Bilder grob und pixelig, ganz generell springt einem jeder einzelne Pixel ins Auge.
Aber diese Zeiten sind ja Gott sei Dank vorbei, ab jetzt werden nur noch Geräte mit Retina Displays gekauft und alles ist gut, aber Moment da war doch noch etwas…
Wenn wir jetzt auf unseren neuen und schicken Retina-Tablets auf nicht für High DPI Displays optimierten Webseiten surfen, wirken Bilder und Icons auf einmal merkwürdig verwaschen und gar nicht so schön scharf, wie es eigentlich sein sollte.
Aber wie optimiert man seine Webseite denn jetzt eigentlich für Retina bzw. High DPI Displays? Tja, eigentlich ist das ganze relativ einfach, erfordert aber einiges an Fleißarbeit, wenn man wirklich alles optimieren will. Grundvoraussetzung für die Retina Display Optimierung ist, dass von sämtlichen oder zumindest den wichtigsten Grafiken eine zweite Variante in doppelter Größe angelegt wird.
Hier ein Beispiel vom Webdesign-Podcast.de Logo, einmal für Nicht-Retina-Geräte und hier die Variante für Retina-Displays.
Tipp: Gängige Dateinamen für die Retina Grafiken haben am Ende einfach ein -2x oder @2x. Beispiel: webdesign-podcast-logo-2x.png.
Liegen also alle Grafiken in entsprechend doppelter Auflösung vor, gibt es zwei Möglichkeiten die Grafiken auf der Webseite durch die Retina Grafiken zu ersetzen, natürlich nur dann, wenn auch wirklich ein Gerät mit High DPI Display auf die Seite zugreift. Würde man generell die großen Grafiken ausliefern, leidet die Ladezeit der Webseite und der Traffic geht in die Höhe, obwohl viele der Geräte mit den Retina Grafiken nichts anfangen können.
Retina Display / High DPI Optimierung mittels CSS Media Queries
Die meiner Meinung nach beste und eleganteste Lösung, ist die Retina Optimierung mittels CSS über Media Queries. Hier einmal ein Beispiel, wie hier auf Webdesign-Podcast.de die Retina Grafik für das Logo eingebunden wird:
/* Standard-CSS der für alle Geräte gilt */
header #branding a{width:324px;height:125px;background:url(img/webdesign-podcast-logo.png) no-repeat;}
/* Media Query für Retina Geräte */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
header #branding a{background:url(img/webdesign-podcast-logo-2x.png) no-repeat; background-size: 100% auto;}
}
Ihr könnt also einfach in dem gezeigten Media Query alle Ersetzungen definieren und schon wird eure Webseite Retina tauglich. Wichtig ist in dem gezeigten Beispiel der Wert background-size: 100% auto;, ohne diesen würde die Grafik einfach nur größer in dem Container dargestellt werden, nicht aber mit Höherer Auflösung schärfer.
Neben der bereits gezeigten Lösung über Media Queries, gibt es noch eine weitere Möglichkeit, diese sieht wie folgt aus:
/* Standard-CSS der für alle Geräte gilt */
header #branding a{
background-image: url(img/webdesign-podcast-logo.png);
background-image: -webkit-image-set(
url(img/webdesign-podcast-logo.png) 1x,
url(img/webdesign-podcast-logo-2x.png) 2x);
width:324px;
height:125px;
}
Retina Display / High DPI Optimierung mittels JavaScript – Retina.js
Das JavaScript Retina.js funktioniert relativ simpel, wenn es eingebunden ist, checkt das Script einfach ob zu den eingebundenen Grafiken eine „@2x“ Variante vorliegt und ersetzt diese.
So wird dann aus:
<img src="/images/image.png" />
einfach diese Variante:
<img src="/images/image∂2x.png" />
Natürlich werden die Grafiken mit Retina.js nur dann ersetzt, wenn die Webseite auch wirklich durch ein Gerät mit High DPI Display aufgerufen wird. Weitere Informationen zu Retina.js können der Webseite entnommen werden.
Ich persönlich bevorzuge allerdings die CSS-Variante über Media Queries, dennoch kann es auch gerechtfertigte Anwendungsfälle für Retina.js geben, dass natürlich auch tadellos funktioniert.
Bildquelle: Apple Inc. (Press / Media Service)