Worin liegt bei einer normalen Website der Vorteil von Retina-Displays?

Einer meiner Kollegen fragte vor kurzem auf Twitter, worin denn für eine „normale“ Website der Vorteil von Retina-Displays liegt, der den Mehraufwand bzw. die Mehrkosten bei mir als Webdesigner oder Webentwickler und vor allem auf Seite des Kunden rechtfertigt? Nachdem die Frage bei uns eine kleine Diskussion entfacht hat, ob sich der Mehraufwand für Retina-Displays denn nun lohnt oder nicht, hier einmal meine Sichtweise der Dinge.

Der Hauptvorteil von Retina-Displays ist, wie könnte es auch anders sein: Alles sieht schärfer und besser aus. Auf einer Website werden Texte und Vektorgrafiken (SVG) vom System her automatisch skaliert und wirken somit ohne Mehraufwand bereits gestochen scharf. Bei Fotos und Bildern ist dies leider nicht der Fall. An diesem Punkt entstehen die größten Mehrkosten. Bilder müssen in der doppelten Auflösung vorliegen, damit sie schärfer dargestellt werden können. D.h. ein Bild, dass auf einer Website mit einer maximalen Breite von 1200 Pixeln und einer maximalen Höhe von 500 Pixeln angezeigt werden soll, muss in einer Auflösung von mindestens 2400×1000 Pixel vorliegen.

Dies erzeugt natürlich auch eine sehr große Datenmenge und sorgt bei einer langsamen Internetverbindung für deutlich längere Ladezeiten. Hier sind technische Lösungsansätze gefragt! Welche Qualitätsstufe des Bildes geladen wird, sollte beispielsweise nicht nur von der möglichen Displayauflösung, sondern ebenfalls von der verfügbaren Internetgeschwindigkeit abhängig sein. Unabhängig davon, ob der Zugang zum Internet immer schneller wird, sei es durch LTE oder 50-100 Mbit/s DSL Anschlüsse, die Geschwindigkeit beim Aufruf einer Website bleibt immer ein wichtiger Performance-Faktor, und nicht jeder hat immer Zugriffe zu einem Highspeed-Internetanschluss.

Dadurch, dass Texte und Vektorgrafiken allerdings automatisch skaliert werden, wird der Unterschied zu den „normalen“ und nicht optimierten Bildern auf Retina-Displays deutlich sichtbar. Bilder dienen oft dazu, bestimmte Emotionen beim Betrachter zu erwecken. Ist das Schlüsselbild / Keyvisual einer Website dabei allerdings als einziges Element unscharf, so verfehlt es seine Wirkung, und kann unterbewusst zu einem negativen Erlebnis (User-Experience) führen.

Als Vergleich hierzu ein Beispiel aus der TV Welt. Wer einmal einen Film auf Blueray in HD gesehen hat, kann sich danach keinen Film mehr auf DVD in normaler SD Qualität anschauen, ohne sich (wenn auch vielleicht nur innerlich) über die Bildqualität zu beschweren. Natürlich geht es wie bei einer Website auch primär um die Inhalte, allerdings ist das Gefühl, das bei mir als Betrachter erweckt wird, nicht zu unterschätzen. So ist mir persönlich schon aufgefallen, dass ich beim „Zappen“ durch das TV Programm deutlich häufiger bei den HD Kanälen bleibe und die Sender mit normaler SD Qualität eher vermeide, unabhängig vom Inhalt der Sendungen, die im SD Programm laufen.

Aber zurück zum Thema Website. Man sollte stets abwägen, wie wichtig Bilder generell für die betreffende Website sind und anhand dessen entscheiden, ob sich der Mehraufwand lohnt. Handelt es sich lediglich um ein paar wenige Bilder, so hält sich der Aufwand für die Optimierung der Website sehr wahrscheinlich in Grenzen. Gerade bei Logos sollte man stets über eine Optimierung nachdenken, da sie meist etwas kleiner sind und dadurch etwas unschärfer wirken können. Und was gibt es schlimmeres, als das eigene Logo so unscharf zu zeigen, dass man es im schlimmsten Fall noch nicht einmal lesen kann?! Gerade bei kleingeschrieben Claims, die Bestandteil des Logos sind, kann so etwas schnell passieren.

Wie sieht es dagegen bei größeren und bildreicheren Websites oder zum Beispiel bei Online-Shops aus? Bei einer großen Menge an Bildern, beispielsweise bei vielen Produktfotos, kann ein deutlicher Mehraufwand und dadurch Mehrkosten entstehen, die sich aus finanzieller Sichtweise nicht unbedingt lohnen müssen. Bei Online-Shops könnte man hierfür zum Beispiel durch A/B-Tests versuchen herauszufinden, ob Benutzer eher Produkte mit schärferen Produktfotos kaufen oder nicht. Abhängig davon kann man dann entscheiden, ob sich der Mehraufwand derzeit rechnet oder nicht.

Fazit

Im Endeffekt muss man es von Fall zu Fall entscheiden, ob sich der Mehraufwand für die Retina-Optimierung rechnet oder nicht. Erwähnen sollte man allerdings auch, dass die Anzahl der Besitzer von retina-fähigen Geräten wie iPhones, iPads, Retina Macbook Pro & co. prozentual noch deutlich in der Minderheit sind, aber täglich steigen. Dazu reicht ein Blick in die Apple Quartalszahlen und der Gedanke, dass in der Zukunft immer mehr Hersteller hochaufgelöste Geräte verkaufen werden.

Natürlich kostet die Retina-Optimierung mehr Zeit und Geld als nichts zu tun, aber meiner Meinung nach sind hochaufgelöste Displays mit ziemlich hoher Wahrscheinlichkeit die Zukunft. Auch im TV Bereich hat es Jahre gedauert, bis sich HDTV in der breiten Masse durchsetzen konnte.

Jeder möchte ein schärferes Bild sehen und spätestens, wenn die direkte Konkurrenz ihre Website für Retina-Displays optimiert hat, wird es Zeit nachzuziehen!

Da in diesem Falle die Letzten aber nicht die Ersten sein werden: Go Retina! :)

Weitere Artikel und Links zum Thema

StandardVeröffentlicht am Kategorie: BeitragSchlagworte: ,

4 Gedanken zu “Worin liegt bei einer normalen Website der Vorteil von Retina-Displays?”

  1. Hi, der Kollege war dann wohl ich :-)
    Deine Punkte sind alle richtig, aber beantworten nicht den Punkt: Um die Vorteile (ich behaupte weiterhin, dass der Vorteil „es sieht einfach besser aus“ nicht wirklich einer ist im *web*kontext) nutzen zu können, gibt es derzeit entweder keine oder nur lückenhafte Möglichkeiten, dies im „realworldcheck“-Rahmen zu leisten.
    Ich habe noch nirgends eine Antwort gesehen, wie wir als Entwickler der Seiten zb zwischen der hardwareseitigen chance, fette photos benutzen zu können und der gleichzeitig aber möglichen mobilen nutzung im eingeschränkten bandbreitenumfeld sinnvoll, also auch an unsere kunden verkaufbar, umgehen sollen.
    ich sehe da eher die hersteller in der pflicht, und nicht, dass wir als nutzer und entwickler der websiten „den preis“ dafür zahlen, dass da gerade am auflösungsrad gedreht wird.
    das mal so von der leber weg, das thema ist sicher noch wesentlich vielschichtiger.

  2. Es ist doch geradezu absurd, dass einerseits mit Mobile First et al gerade die Fackel des „Inhalte und Struktur vor Design und Oberfläche“ die Entwicklergemeinde durchs Dorf treibt und gleichzeitig „scharfe bilder fuuuuu“ das neue heisse Ding wird…

  3. Klar ist es irgendwo absurd, dass man mit dem Mobile-First Ansatz versucht, immer mehr für mobile Geräte zu optimieren, um dann gerade diesen Geräten die höher aufgelösten Bilder auszuliefern. Allerdings will ich auf meinem iPad 3 keine „verpixelten“ Bilder sehen, wenn ich bei mir zuhause im WLAN bin. Ich glaube allerdings nicht, dass es seitens der Hardwarehersteller hierfür eine Lösung geben wird. Stattdessen sind (leider) wieder einmal die Web-Entwickler gefragt, eine passende Lösung zu finden. Erste Ansätze dafür gibt es ja bereits wie z.B. Retina.js (http://retinajs.com/) oder Adaptive Images (http://adaptive-images.com/). Leider wird bei beiden die verfügbare Bandbreite nicht mit berücksichtigt, also genau das von dir bemängelte. Vielleicht gibt es da aber auch schon weitere Ansätze, die mir bisher nicht bekannt sind.
    Eine weitere Diskussion zum Thema „Responsive Images“ gibt bei Peter Kröner > http://www.peterkroener.de/die-responsive-images-story/

Kommentare sind geschlossen.