So bietest du gestochen scharfe Grafiken für hochauflösende Retina-Displays an – ohne CSS oder JS

Eines der größten Verkaufsargumente der neueren Iphone-, IPad-Modelle und seit neuestem auch dem Macbook ist das sogennante Retina-Display. Ein hochauflösender Bildschirm, welcher durch eine extreme Pixeldichte auch bei ganz genauem Hinschauen keinerlei Pixel erkennen lässt. Nicht nur das andere Smartphone-Hersteller nachziehen – selbst die Nachfolger: 4K-Smartphones sind bereits in aller Munde. Grund genug darauf ein Auge zu werfen.

Was für den technikverliebten Smartphone-Nutzer freilich sehr schön ist, stellt sich für den geneigten Webdesigner schnell als Herausforderung heraus. Denn auch wenn die Pixelgrafiken auf dem Desktop noch so gestochen scharf aussehen: auf einem Retina Display wirken sie meist verwaschen, durch deren höhere Pixeldichte.

Verschiedene Lösungsansätze

Nun gibt es diverse Lösungsansätze um den entgegenzuwirken:

• generell ist es nicht verkehrt, einfache Grafiken, Icons und Scribbles auch als SVG oder Iconfonts auszugeben, anstatt durch pixelbasierte Bilder. Diese sind auf jeglichem Display frei skalierbar und immer gestochen scharf. Das geht natürlich nicht für Fotos.
• Es gibt diverse CSS- und/oder JS-Lösungen mit denen über Media-Queries oder Auslesen der Pixeldichte entsprechend zwei Arten von Grafiken ausgeliefert werden. Eine normale aufgelöste für herkömmliche Monitore. Und eine doppelt so große für hochauflösende für Retina-Displays.

Die schlanke Webkit Lösung

Auf dieser doppelten-Bilder Strategie basiert auch die wesentlich elegantere Lösung:

Hier wird einfach der altbekannte img-Tag sinnvoll erweitert. WebKit unterstützt diese Funktion schon länger.

Mit dem 2x wird speziell ein Bild definiert, welches nur bei einem hochaufgelösten Retina-Display ab doppelter Pixeldichte geladen wird. Sonst wird sich des normalen Fallback-Bildes bedient. Anders als bei normalen CSS Lösungen wird also nur die Bildgröße geladen, die tatsächlich benötigt wird.

Anstatt der 2x können selbstverständlich auch andere Multiplikatoren benutzt werden: 4x, 6x, 8x,… Inwiefern hier der Aufwand Nutzen gegeben ist, werden zukünftige Auflösungen noch zeigen.

[sam id=”3″ codes=”true”]

Momentan gibt es diese Lösung für hochauflösende Web-Grafiken lediglich für die Webkit-Browser. Dieser ist gegenüber den alternativen ressourcenhungrigen JS oder zeitaufwendigen CSS Lösungen einer der besten Wege um Grafiken momentan zu handlen. Da die Verbreitung von Retina Displays jedoch rapide steigt, ist anzunehmen, dass über Kurz oder Lang ein einheitlicher Standard etabliert wird. Ein dafür vorgesehenes <picture>-Tag, welches mit speziellen Parametern gefüttert werden kann, wäre wohl übergreifend die beste Lösung.