Die besten Grafikformate für eine starke Website
Ohne Bilder, Grafiken und Animation, wäre das World Wide Web ganz schön langweilig. Erst durch ansprechende visuelle Effekte wird eine Website interessant. Fotos, Animationen und Grafiken lockern den dargestellten Text auf und animieren User dazu, sich mit diesem auseinanderzusetzen. Es gibt viele verschiedene digitale Bildformate. Doch welche Formate eignen sich besonders für die Darstellung auf Bildschirmen und der Platzierung auf der eigenen Website? Wie optimiert man Bilder für das Web? Dieser Artikel gibt einen Überblick, worauf es ankommt:
Das richtige Farbmodell für die Bildschirmdarstellung wählen
Achtung: Unterschiedliche Bildschirmtypen können Farben anders abbilden: Bei einem schlecht eingestellten Monitor können die Farben anders aussehen als bei einem gut eingestellten. Kalibrieren Sie daher Ihren Monitor.
Klassisch gibt es bei digitalen Bildern zwei Farbmodelle, die zum Einsatz kommen: RGB und CMYK. Für die Darstellung auf Bildschirmen, also z. B. auf einer Website platziert, eignet sich nur das RGB-Farbmodell.
RGB ist ein sogenannter additiver Farbraum. Jede Farbe lässt sich demnach durch ihren Rot-, Grün und Blauanteil definieren. Bei CMYK handelt es sich hingegen um einen subtraktiven Farbraum, der von einem Monitor nicht angezeigt werden kann. CMYK bildet die technische Grundlage für den Vierfarbdruck und steht für die drei Farbanteile Cyan, Magenta, Yellow und den Schwarzanteil (Key).
Auf die Bild- und Dateigröße achten
Lange Ladezeiten von Webseiten werden vor allem durch zu große Bilddateien im falschen Format verursacht. Das nervt nicht nur die Besucher der Website, sondern wird auch von Suchmaschinen wie Google abgestraft. Wenn der Pagespeed einer Seite zu langsam ist, wirkt sich das unmittelbar auf das Ranking in den Suchergebnissen aus. Die Ladegeschwindigkeit einer Website kann z. B. in den PageSpeed Insights von Google überprüft werden.
Um die Ladegeschwindigkeit zu verbessern, ist es wichtig, dass Bilder und Grafiken im passenden Format und optimierter Bild- und Dateigröße eingebunden werden. Die Bildgröße umfasst die Anzahl der Pixel, die Dateigröße den benötigten Speicherplatz dafür. Allgemein gilt: Je mehr Pixel pro Zoll, desto größer die Auflösung und dementsprechend auch der benötigte Speicherplatz. Maximal sollte als Größe für Website-Bilder 1920x1080 Pixel gewählt werden. Dies entspricht einer gängigen Monitor-Auflösung in Full HD. Soll das Bild nicht über die komplette Monitorgröße dargestellt werden, kann dementsprechend auch eine kleinere Pixelanzahl gewählt und die Dateigröße komprimiert werden. Besonders für die Darstellung auf mobilen Geräten gibt es hier häufig Optimierungsmöglichkeiten. Je nach genutztem Content-Management-System werden Bilder für eine mobile Ansicht bereits automatisch vom System optimiert. Es gilt stets einen Kompromiss zwischen kleinster Dateigröße und optimaler Bildqualität auf allen Geräten zu finden. Einige Grafikformate eignen sich daher besonders gut für den Einsatz auf Webseiten.
Grafikformate - Vor- und Nachteile für Webseiten
JPG oder PNG Format?
Die wohl bekanntesten Grafikformate sind das JPEG und PNG Dateiformate. Beide Formate sind sogenannte Raster- bzw. Pixelformate und eignen sich gut für die Einbindung in Webseiten. Das JPEG Dateiformat eignet sich besonders für Fotos. Die Komprimierung ist verlustbehaftet, dennoch bieten JPGs einen guten Kompromiss zwischen Dateigröße und Bildqualität. Transparenz via Alphakanal wird von JPG-Dateien nicht unterstützt. Das Grafikformat PNG eignet sich dagegen gut für illustrierte Grafiken, Icons oder wenn Transparenz gefordert ist, da PNG den Alphakanal unterstützt. Auch für Icons kann dieses Grafikformat optimal genutzt werden. Eine PNG Datei kann mehr Informationen speichern als eine JPEG-Datei, daher kann die Dateigröße größer sein als bei einem JPEG. Vor dem Einsetzen auf der Website sollte immer geprüft werden, ob die Dateigröße durch Kompression noch weiter verlustfrei verringert werden kann. Die Kompression von PNG ist verlustfrei möglich.
GIF für Animationen oder eher eine Alternative?
Das GIF Dateiformat wird häufig für Animationen genutzt. GIF Dateien lassen sich einfach als Loop (Wiederholungsschleife) generieren. Sie können je nach Komprimierung und Animation jedoch eine relativ große Dateigröße aufweisen. Andere Formate wie das mp4 oder WebM Dateiformat benötigen weniger Speicherkapazität und bieten dabei eine bessere Qualität, weswegen sich diese Formate eher für die Einbindung kurzer Animationen auf einer Website anbieten.
SVG Vektorgrafiken für ein responsives Webdesign?
Für die Einbindung von geometrischen Formen oder Elementen in ein responsives Webdesign, das sich je nach Bildschirmgröße anpasst, kann das Vektorformat SVG gut genutzt werden. Es kann ohne Qualitätsverlust skaliert werden und weist eine geringere Dateigröße als die vorgestellten Rastergrafiken auf.
WebP – der neue Standard?
Google empfiehlt das moderne Webp Format für die Einbindung in Websites. Im Vergleich zum JPEG Format kann die Dateigröße nochmal weiter verlustfrei verringert werden. Das Format wird von älteren Browsern nicht unterstützt, die Einbindung wird jedoch von Google positiv bewertet. Welche Browser welche Grafikformate unterstützen, lässt sich hier prüfen: https://caniuse.com/
Welches Grafikformat eignet sich am wenigsten für das Internet?
Grafikformate, die primär für den Druck gedacht sind, eignen sich nicht für die Einbindung auf einer Website. Dazu zählen aufgrund der Dateigröße z.B. TIFF oder PDF-Dateien. Auch Dateiformate, die rein für die Bearbeitung gedacht sind, wie etwa PSD oder AI Dateien haben auf einer Website nichts verloren. Fotos werden je nach Kameramodell in einem Rohdatenformat wie RAW, CR2 oder DNG abgespeichert. Diese sollten vor der Nutzung im Web unbedingt noch bearbeitet und die Dateigröße komprimiert werden.
Dateiname und Alt-Tag ergänzen für Suchmaschinenoptimierung
Wenn das passende Grafikformat gewählt und die Datei auf die passende Größe komprimiert wurde, muss diese nur noch auf der Website eingesetzt werden. Damit Suchmaschinen wie Google den Inhalt des Bildes erkennen, sollte man auf einen aussagekräftigen Dateinamen (ohne Leerzeichen, Umlaute oder Sonderzeichen) achten und via ALT-Tag eine Beschreibung für das Bild hinterlegen.
Mit Digital Asset Management Website-Bilder automatisch optimieren
Bei der Verarbeitung und Optimierung von Bilddateien für die eigene Website entstehen häufig eine Menge doppelte Dateien, die für Chaos auf den Servern sorgen können. Ein Digital Asset Management System wie Cavok kann Ihnen dabei helfen sämtliche Bilder übersichtlich und zentral zu speichern und diese zudem automatisch für Ihre Website optimieren. Das DAM-System kann zum Beispiel automatisiert die Konvertierung und Kompression der Dateien in die passenden Formate (z.B. von TIFF zu JPEG) übernehmen und die Bilder direkt an Ihre Website übermitteln.
Erfahren Sie, wie die Grube KG durch automatische Workflows mit dem Digital Asset Management System Cavok den E-Commerce des Unternehmens optimiert.