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:
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).
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.
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.
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.
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.
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/
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.
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.
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.
Presse Informationen
Alle relevanten Informationen können Sie in unserem Brandportal herunterladen.
Für die Aufnahme in unseren Presse-Verteiler schreiben Sie uns einfach eine Nachricht mit Ihren Kontaktdaten.
Pressekontakt
Sylvia Naumann
+49 6151 27918 21
presse@peak-group.de
Cavok Demoversion
Sie interessieren sich für Cavok und möchten die vielen Möglichkeiten in einer Demoversion testen? Füllen Sie einfach das Formular aus oder rufen Sie uns an unter +49 6151 62944 20. Wir stellen Ihnen innerhalb der nächsten 48 Stunden einen Demozugang zur Verfügung.
ACHTUNG: Cavok ist hochgradig individualisierbar. Um Ihnen eine möglichst genau und auf Ihre Anforderungen abgestimmte Konfiguration vorzuführen, empfehlen wir Ihnen, Ihre Vorstellungen kurz in dieser Nachricht zu beschreiben oder bitten Sie um einen Rückruf, um sich vorher abzustimmen.
Cavok Produktpräsentation
Sie möchten die vielfältigen Möglichkeiten von Cavok in einer Produktpräsentation zeigen lassen? Dann füllen Sie hierzu das Formular aus oder rufen Sie uns einfach an unter +49 6151 62944 20. Wir melden uns spätestens innerhalb der nächsten 48 Stunden bei Ihnen.
ACHTUNG: Cavok ist hochgradig individualisierbar. Um Ihnen eine möglichst genau und auf Ihre Anforderungen abgestimmte Konfiguration vorzuführen, empfehlen wir Ihnen, Ihre Vorstellungen kurz in dieser Nachricht zu beschreiben oder bitten Sie um einen Rückruf, um sich vorher abzustimmen.
Verwendung von Cookies
Wir möchten Ihnen den bestmöglichen Service bieten. Dazu verwenden wir auf unserer Website Cookies. Weitere Informationen über den Einsatz von Cookies und eine Möglichkeit Ihre Zustimmung zu widerrufen finden Sie in unserer Datenschutzerklärung.
Impressum Datenschutzerklärung
Mehr Informationen
Mehr Informationen
Mehr Informationen
Alle akzeptieren
Auswahl speichern
Notwendige Cookies
Notwendige Cookies sind für die einwandfreie Funktion der Website erforderlich. Daher kann man sie nicht deaktivieren. Diese Art von Cookies wird ausschließlich von dem Betreiber der Website verwendet (First-Party-Cookie) und sämtliche Informationen, die in den Cookies gespeichert sind, werden nur an diese Website gesendet.
Zurück
Analyse Cookies
Analyse Cookies sammeln Informationen darüber, wie diese Website genutzt wird. Der Betreiber der Website nutzt diese Cookies um die Attraktivität, den Inhalt und die Funktionalität der Website zu verbessern.
Google Analytics
Diese Cookies sammeln zu Analysezwecken anonymisierte Informationen darüber, wie Nutzer diese Website verwenden.
Cookies: _ga(Laufzeit: 2 Jahre), _gid(Laufzeit: 1 Tag), _gat_*(Laufzeit: 1 Minute).
Zurück
Marketing Cookies
Marketing Cookies werden verwendet, um das Verhalten der Website-Besucher zu analysieren und personalisierte Werbung auszuspielen. Der Betreiber der Website nutzt diese Cookies, um Werbeanzeigen auszuwerten und zukünftige Werbemaßnahmen zu optimieren.
Facebook Pixel
Der Facebook Pixels vom sozialen Netzwerk Facebook wird für die Analyse der Website, die Ausrichtung und Wirksamkeit der Werbung sowie zur Erstellung von Facebook Custom Audiences eingesetzt.
Cookies: fr(Laufzeit: 90 Tage), _fbp(Laufzeit: 90 Tage).
LinkedIn Insight-Tag
Der LinkedIn Insight-Tag vom sozialen Netzwerk LinkedIn wird für die Analyse der Website, die Ausrichtung und Wirksamkeit der Werbung sowie zur Erstellung LinkedIn Matched Audiences genutzt.
Cookies: lang(Laufzeit: Session), lidc(Laufzeit: 1 Tag), lissc(Laufzeit: 1 Jahr), bcookie(Laufzeit: 2 Jahre), UserMatchHistory(Laufzeit: 30 Tage).
Zurück