Das Internet wird immer schärfer – ihr Logo auch?
Das Internet ist schon lange nicht mehr begrenzt auf 72 DPI. Mit dem sogenannten Retina-Display, welches von Apple 2012 auf den Markt kam, werden die Auflösungen der Monitore, Smartphones und Tablets immer besser. So können Bilder, Texte oder Videos immer schärfer dargestellt werden. Damit werden Webseiten auf den meisten Geräten schon lange nicht mehr nur mit 72 DPI dargestellt. Neuere Monitore haben nun schon die Möglichkeit über 200 DPI darzustellen.
Was bedeutet DPI?
DPI (Dots per Inch, auch als PPI bekannt – Points per Inch) geben an, wie viele Farbpunkte (Pixel) in einem Inch (2,54 cm) dargestellt werden können. Je höher also der DPI-Wert eines Monitors, desto mehr Pixel können pro Inch dargestellt werden und desto schärfer nimmt unser Auge ein Bild wahr.
Die Herausforderung in der Webentwicklung
Durch die unterschiedlichen Auflösungen der Monitore und mobilen Endgeräte gibt es schon lange nicht mehr die eine Auflösung, in der man eine Webseite anlegen sollte. Doch sollte man auch die Ladezeiten der Webseite nicht außer Acht lassen. Denn je hochauflösender Bilder oder Videos sind, desto mehr Speicherplatz benötigen sie. Das wirkt sich auf die Ladezeit der Webseite aus.
Es gibt unterschiedlichste Ansätze, diesen Spagat zwischen Darstellung und Performance zu schaffen. Zum Beispiel können mehrere Bilder in verschiedenen Auflösungen hinterlegt werden, die dann je nach Auflösung passend angezeigt werden. Doch jede Lösung hat seine Vor- und Nachteile. So unterstützen meist nicht alle Browser eine Lösung. Es dauert häufig 1-2 Jahre, bis sich ein Lösungsansatz auch in allen gängigen Browsern durchgesetzt hat.
„SVG’s eignen sich super für Logos“
SVG-Dateien, auch Vektorgrafiken genannt, sind im Gegensatz zu gängigen Bildern nicht pixelorientiert. Die in SVG-Dateien enthaltenen Flächen werden durch Vektoren berechnet. Dadurch sind sie unbegrenzt skalierbar, ohne an Qualität und Schärfe zu verlieren. Die Dateigröße bleibt zudem konstant, egal wie groß die SVG-Datei dargestellt wird.
Mittlerweile unterstützten alle Browser die Darstellung von SVG-Dateien. Es gibt somit keinen Grund das Logo einer Webseite nicht als SVG-Datei einzubinden. Man hat mit einer Datei alle Auflösungen darstellender Geräte abgedeckt und gleichzeitig keine Verluste in der Performance.
Der Vorteil: SVG’s eignen sich super für Logos, da diese meist aus Text und einfarbigen Flächen bestehen.
Der Nachteil: SVG-Dateien können durch die Vektoren nur klar getrennte Flächen darstellen. Ein Team-Foto aller Mitarbeiter kann nicht als SVG-Datei umgewandelt werden.
Zu viel Theorie? Probieren Sie es!
Auf unserer Webseite www.clickstorm.de und natürlich auch direkt hier in unserem Blog wurden die Logos im Kopfbereich der Webseite als SVG-Datei eingebunden. Am Besten sehen Sie einen Effekt, wenn Sie auf Ihrem Smartphone in die Webseite zoomen. Das ganze geht natürlich auch an einem Desktop-Rechner mit der Zoom-Funktion des Browsers. Sie werden schnell merken, dass das Logo mit stärkerem Zoom-Faktor nicht pixelig wird. Probieren Sie es doch auch einmal auf Ihrer Webseite.
Als SVG-Datei ist Ihr Logo immer scharf dargestellt, egal ob der Webseiten-Nutzer Ihre Website mit seinem aktuellen 4K iMac aufruft oder noch den 20 Jahre alten Röhren-Monitor nutzt.
Haben Sie Interesse daran auch Ihr Firmen-Logo als SVG-Datei in Ihre Webseite einzubinden? Sprechen Sie uns an.
