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

Publiziert am by & filed under Responsive Webdesign, Webdesign.

Werbung

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.

Vergleich von hochauflösender Retina-Webgrafik zu normaler Grafik

In diesem Vergleich sieht man die Unterschiede deutlich: Während das Pixxelpassion-Logo rechts auf hochauflösenden Retina Displays deutlich verwaschen wirkt, erscheint das extra angepasste Logo links dagegen gestochen scharf.

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:

<img src="normal-image.jpg" srcset="better-image.jpg 2x"/>

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.

Werbung

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.

Chris Donner, Autor dieses Artikels

Über den Autor dieses Artikels:

Ich, Chris Donner bin der Inhaber von Pixxelpassion und arbeite als freier Webdesigner und Referent im Bereich Suchmaschinenoptimierung. Weitere Informationen und mein Portfolio gibt's auf Pixxelpassion - oder du folgst mir auf Twitter.

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

  1. Florian

    Hallo Chris,

    danke für den Hinweis. Das war mir bis jetzt so noch nicht bewusst. Ich habe es nun mal ausprobiert und es hat einwandfrei funktioniert.

    Grüße

Ihr Kommentar

  • (will not be published)