ChatGPT Praxiskurs - Teaser

Der 5 Stunden
ChatGPT Praxiskurs

Lerne ChatGPT professionell zu nutzen. Der 5 Stunden Videokurs zu zeigt dir an konkreten Beispielen und Anwendungsfällen, wie auch du Zeit und Aufwand sparen kannst. Kurzzeitig mit 33% Rabatt.

Vergleich Retina Webgrafiken

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.

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:

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.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Bisher keine Bewertungen! Sei der Erste, der diesen Beitrag bewertet.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen
Cookie Consent mit Real Cookie Banner