Warum sind die Logos in Websites meist unscharf?

Grundsätzliche Darstellungsunterschiede zwischen Print und Web

Um zu verstehen, warum ein Logo – oder jede andere Grafik – in einer Website immer etwas unschärfer dargestellt wird als in Druckmedien, muss man wissen, dass Monitore eine andere Auflösung haben als Printmedien.

Was ist nun wieder „Auflösung“?

Unter Auflösung versteht man – ganz grob gesagt – die Anzahl an Bildpunkten innerhalb einer Fläche. Also z.B. Bildpunkte per Inch, per Zentimeter oder per Zoll usw. Bildpunkte sind im Web „Pixel“. In Druckmedien spricht man dagegen von „Punkten“ oder „Dots“ (dpi = dots per inch).

Monitore können nur um ein Vielfaches weniger Bildpunkte innerhalb einer bestimmten Flächengröße anzeigen als Printmedien. In Printmedien sitzen also die Bildpunkte einer Grafik oder eines Fotos viel dichter aneinander als in einer Monitordarstellung. Dies erzeugt einen klareren, brillanteren und somit „schärferen“ Bildeindruck in Drucksachen.

Je kleiner die Grafik im Web, desto mehr optische Unschärfe

Der Unschärfe-Effekt in Web-Grafiken fällt umso mehr auf, je kleiner die Grafik dargestellt werden soll. Die „Treppen-Effekte“ die durch die pixelbasierte Monitordarstellung entstehen liegen ja wirklich im Größenbereich einzelner Pixel, also einer Mini-Größe. Diese fallen kaum auf bei einer großen Grafik.

Das Dumme an der Sache: Ausgerechnet Logos werden in Websites meist relativ klein eingesetzt

Dadurch ergibt sich dann leider insbesondere bei Logos in Websites ein leichter – aber bei genauem Hinsehen durchaus wahrnehmbarer – Unschärfeeffekt. In den meisten anderen grafischen Elementen einer Website fällt die – auch hier durchaus vorhandene Unschärfe –  kaum jemandem auf.

Lassen Sie sich dennoch trösten:

Auch Ihr leicht unscharfes Logo fällt den allermeisten Internet-Usern nicht auf. Denn wie schon gesagt, alle Logos sind im Web leicht unscharf. Was aber nur bei näherer und ganz bewusster Betrachtung auffällt. Denn der Fokus Ihrer Website-Besucher liegt in der Regel auf dem Inhalt und der Struktur Ihrer Website.

Der Beweis: Von unseren rund 100 Kunden haben im Laufe von über 11 Jahren lediglich drei (!) bemerkt, dass ihr Logo in ihrer Website etwas unscharf dargestellt wird. Übertrüge man dieses prozentuale Verhältnis auf die Menge „alle“, dann hieße das, 3% der Website-Besucher bemerken die leichte Unschärfe in Logos oder in anderen Grafiken. Das wäre ja auch schon eine beruhigende Zahl, aber noch besser ist: so einfach funktioniert dieses Zahlenspiel gar nicht. Denn schließlich gucken sich frisch gebackene „Website-Besitzer“ mit Argusaugen alles in ihrer Website an und manchmal  insbesondere eben auch Ihr grafisches Herzstück ihres Corporate Designs, ihr geliebtes Logo… Das sei ihnen unbenommen, würde ich genauso machen. Gar keine Frage.

Aber Sie können sicher sein, dass der normale Website-Besucher das nicht tut. Der interessiert sich für die Inhalte Ihrer Website. Gut so. Das soll er ja auch! Im Ergebnis ist also die prozentuale Menge der Website-Besucher, denen die Unschärfe in Logos auffällt, noch viel geringer als 3%.

Und? Hat`s geklappt mit dem Trösten? ;-)

Keine Regel ohne Ausnahme: bei Retina-Displays ist es anders

Wie jetzt? Erst reden wir hier von „alle“ Logos in Websites sind unscharf und jetzt kommen wir mit Ausnahmen?  So ist es. Wie so oft üblich, ist „alle“ ja umgangssprachlich doch irgendwie ein dehnbar verwendeter Begriff…

Retina Displays haben eine viel höhere Auflösung als herkömmliche digitale Displays.

Dadurch ergibt sich ein ähnlicher klarer Bildeindruck wie bei Printmedien – oder eigentlich noch viel schöner. Die Leuchtkraft von Retina Displays stellt gedruckte Grafiken und Fotos völlig in den Schatten. Das ist aber nicht immer nur ein Segen für die Darstellung von Fotos und Grafiken in Websites, denn diese müssen für die höhere Auflösung der Retina Displays auch in dieser höheren Auflösung vorhanden sein in der Website. Falls nicht – und das ist die Regel – werden sie noch viel unschärfer dargestellt als in den Displays mit normaler Auflösung.

Ergo: man müsste streng genommen Grafiken und Fotos in zwei Versionen in der Website bzw. auf dem Webserver hinterlegen und dann im Quellcode der Website abfragen, welche Display-Art denn der Website-Besucher gerade verwendet. Diesem Besucher wird dann die entsprechende Version der Grafik angezeigt. So weit die schöne Theorie. Umsetzen tun das bislang die wenigsten Webdesigner oder Internetagenturen – weil es einfach mehr Aufwand ist. Aufwand, den die meisten Kunden nicht bezahlen möchten. Was im Grunde auch nachvollziehbar ist bei der zurzeit noch geringen Menge an Endgeräten mit Retina-Displays.

Die retinadisplay-gerecht hinterlegten größeren Grafiken nützen allerdings leider auch nichts für die schärfere Darstellung in normalen Displays. Hier bleibt die Situation wie oben beschrieben.

Hinzu kommt, dass die größeren Grafildateien auch eine größere Ladezeit erfordern. Setzt man nur für das Logo eine solche Datei ein, ist das sicher ein zu vernachlässigender negativer Effekt. Über das Einsetzen von zusätzlichen größeren Dateien für zum Beispiel mehrere Fotos oder andere JPGs in einer Seite, sollte man jedoch kritisch nachdenken und prüfen, ob im individuellen Einzelfalle diese qualitativ bessere Darstellung auf Retina-Displays so viel Nutzen bringt, dass eine längere Ladezeit gerechtfertig ist. Ein Beispiel: Auf unserer Seite zum Thema Webdesign Köln haben wir zahlreiche Screenshot-Ausschnitte von Kunden-Websites eingefügt. Circa 20 Stück. Hätten wir diese alle zusätzlich noch als größere Datei hochgeladen, würde sich das ganz sicher bemerkbar machen durch Verlängerung der Ladezeiten.

In Zukunft wird das besser: Vektorbasierte Grafiken im Dateiformat SVG

Das Dateiformat SVG (Scalable Vector Graphic) stellt laut vieler Webdesign-Koryphäen eindeutig die Zukunft der Grafikdateiformate im Web dar. Aber eben „die Zukunft“, nicht die Gegenwart…

SVG wird nämlich nur von modernen Browsern unterstützt

Bis also ältere Browser von den Rechnern der User verschwunden sind und modernen Browser-Versionen Platz gemacht haben, bleibt auch für den Einsatz von SVG nur eine Lösung mit doppeltem Boden. Und die sieht so aus, dass man eine Grafik einmal als SVG und einmal als herkömmliche Pixelgrafik (JPG, Gif, PNG) erzeugt und beide –  genau wie beim Thema Retina Display –  auf dem Webserver hinterlegt und mittels Abfrage im Quellcode dem User die ihm, bzw. seinem Browser, entsprechende Grafik in der Website anzeigt.

Und falls Sie das immer noch doof finden, gehen Sie zurück zum Absatz „Lassen Sie sich dennoch trösten“ und lesen Sie diesen nochmal. :-)