Kontakt
Inhalt
Sie suchen Antworten auf Ihre Fragen?
Dieser Blog-Eintrag bringt Licht über die Möglichkeiten der einzelnen Bildformate ins Dunkel. Er zeigt deren Vorzüge und Mängel, die sich unmittelbar auf die Performance Ihrer Website oder Ihres Onlineshops auswirken. Dafür werden folgende Fragen beantwortet:
- Welche sind die gängigen Bildformate für das Web?
- Wie sehen die Vor- und Nachteile der einzelnen Formate aus?
- Welche Browser und Endgeräte werden von den einzelnen Bildformaten unterstützt?
Sie möchten nicht lange lesen, sondern direkt Kontakt mit uns aufnehmen? Kein Problem.
Buchen Sie direkt einen Beratungstermin oder nutzen Sie unser Kontaktformular.
1 Nutzung der Bildformate im Web
Viele Onlineshop-Betreiber stellen sich die Frage nach den Gründen für das Zurücklassen von Artikeln im Warenkorb. Der Besucher des Shops hat bis zum Zeitpunkt des Absprungs womöglich bereits verschiedene Kategorien durchsucht und sein Interesse an einzelnen Artikeln gezeigt, indem er sie in den Warenkorb gelegt hat. An diesem Punkt der Customer Journey ist es sehr wahrscheinlich, dass ein Kaufabschluss stattfindet. Dennoch lassen mehr als zwei Drittel der Onlineshopper diesen entscheidenden Schritt aus und verlassen die Seite vorher. Die Gründe für dieses Verhalten können unterschiedlichen Ursprungs sein. Die Hauptgründe für zurückgelassene Warenkörbe während des Checkout-Prozesses zeigt Abbildung 1.
2 Pixelbasierte und vektorbasierte Bildformate
Um das passende Format für die eigene Website auszuwählen, gilt es den Einsatzzweck zu beachten. Während PNG, JPEG, GIF und WebP rasterbasierte Dateiformate sind, ist das SVG-Format auf Vektoren basiert. Kurz erklärt:
- pixelbasiert: Bilder bestehen aus einzelnen Bildpunkten (Pixel), die in einem Raster angeordnet sind und unterschiedliche Farbinformationen besitzen. Pixelbasierte Bilder können viele Details und Farbabstufungen besitzen, die sich direkt auf die Bildqualität auswirken, ebenso wie die Bildauflösung.
- vektorbasiert: Grafiken bestehen aus geometrischen Formen, die durch verschiedene Parameter beschrieben werden (z. B. Farbe, Länge, Richtung, Startpunkt) und Bildinhalte als Objekte genau definieren. Dadurch lassen sich die Grafiken beliebig skalieren, ohne Bildqualität einzubüßen.
Legen Sie einen Beratungstermin mit uns fest!
Wir zeigen Ihnen Ihr Potenzial auf, um Dateigrößen zu minimieren und Ladezeiten zu optimieren. Damit auch Ihre Website wieder schnell lädt!
3 Arten der Datenkomprimierung
Auch in Sachen Datenkomprimierung (oder -kompression) gilt es genau hinzuschauen. Die Komprimierung beschreibt einen Vorgang, bei dem digitale Datenmengen reduziert bzw. verdichtet werden, um Speicherplatz einzusparen und Dateigrößen zu verringern. Da die Ladezeit von Websites unmittelbar mit der Gesamtgröße zusammenhängt, sollte darauf geachtet werden, möglichst kleine Dateien zu verwenden. Dies kann durch Datenkomprimierung erreicht werden. Hierbei gibt es verlustbehaftete und verlustfreie Möglichkeiten, die allerdings von den hier beschriebenen Bilddateiformaten unterschiedlich unterstützt werden. Je nach Qualitätsanspruch sollte möglichst ein verlustfreies Verfahren verwendet werden, um auch bei kleinen Dateien eine möglichst große Qualität der Bilder zu erreichen.
4 Vorteile und Nachteile
Zwischen den vorgestellten Dateiformaten gibt es diverse Unterschiede. Nachfolgend zeigen wir auf, wo deren Stärken und Schwächen für den Einsatz auf Ihrer Website oder in Ihrem Onlineshop liegen:
4.1 PNG
PNG (Portable Network Graphic) ist ein pixelbasiertes Dateiformat, das nicht ohne Qualitätseinbußen skaliert werden kann. Das bedeutet, Fotografien und Grafiken müssen in der entsprechend passenden Größe für die Anwendung exportiert werden. Für Grafiken, wie bspw. Piktogramme, eignet sich die verlustfreie Komprimierungsmöglichkeit von PNG, um diese ohne Qualitätsverlust in der Dateigröße zu reduzieren. Für diese grafischen Inhalte bietet sich PNG vor allem deswegen an, weil es Transparenzen unterstützt. Fotografische Inhalte kann PNG dank 16,7 Millionen unterstützter Farben auch abbilden, allerdings im Vergleich zu JPG immer verbunden mit einer größeren Dateigröße.
4.2 JPEG
Einer der Gründe, weshalb sich JPEG bereits so länge bewährt, ist dass es eine verhältnismäßig gute, verlustfreie Datenkomprimierung ermöglicht. Dateien können mit geringer Speichergröße und moderatem Qualitätsverlust gespeichert werden. Dennoch wird bei jedem erneuten Speichern eines JPEG die Bildqualität gemindert. Es können Artefaktdarstellungen auftreten, die auch in großen einfarbigen Flächen innerhalb von JPEG-Dateien auftreten können. Da sie rasterbasiert sind, lassen sie sich nicht beliebig ohne Qualitätsverlust speichern. Daher müssen für unterschiedliche Endgeräte mit variablen Displaygrößen auch unterschiedliche JPEG-Bilddateien angelegt und entsprechend ausgegeben werden. Ein für Smartphones optimiertes JPEG mit geringer Auflösung würde auf einem 24-Zoll-Bildschirm stark unscharf dargestellt werden. Ein weiterer Grund für die weite Verbreitung von JPEG im Web ist dessen Unterstützung durch sämtliche Webbrowser auf unterschiedlichsten Endgeräten.
4.3 SVG
Scalable Vector Graphics (SVG), der Name ist Programm. Im Gegensatz zu den anderen hier aufgeführten Formaten ist SVG ein vektorbasiertes, das sich verlustfrei beliebig verkleinern oder vergrößern lässt. Ebenso ist es möglich SVG zu manipulieren und via JavaScript oder CSS visuell zu verändern. Ob Farb- oder Formänderungen oder Animationen – mit SVG ist vieles möglich. Die Dateigröße hängt dabei stark von der Komplexität der Inhalte ab. Besonders geeignet ist dieses Dateiformat für flächige Darstellungen mit Linien und geometrischen Formen und für den Einsatz auf verschiedenen Endgeräten im Responsive Design. Auch transparente Bereiche sind für SVG kein Problem.
4.4 GIF
Das GIF-Format (Graphics Interchange Format) ist ein pixelbasiertes Dateiformat, das für relativ einfache Bilder entwickelt wurde. Es unterstützt maximal 256 Farben, weswegen es verglichen mit anderen Formaten weniger für Fotografien geeignet ist. Dafür umso mehr für Logos und Grafiken mit wenigen Farben und sauberen Linien und Kanten, die wenig Speicherplatz brauchen. Weshalb GIF-Dateien dennoch im Web heutzutage recht weit verbreitet sind, ist ihre Eigenschaft, simple Animationen durch aneinandergereihte Bilder darstellen zu können. Gerade auf Social-Media-Plattformen werden diese geräuschlosen, einfachen Animationen gerne verwendet. Verlustfreies Komprimieren ist ebenfalls ein Vorteil von GIF.
4.5 WebP
Auch WebP ist ein rasterbasiertes Dateiformat. Unter den aufgeführten ist es mit seiner Einführung im Jahr 2010 das jüngste und wurde – wie der Name verrät – speziell für das Web entwickelt. Fotos und Grafiken können ohne Qualitätsverlust komprimiert und Dateien somit klein gehalten werden. Für optimierte Ladezeiten durch geringen Speichergebrauch sind WebP-Dateien daher sehr gut geeignet. Neben einfachen Grafiken und Fotografien unterstützt WebP auch Animationen, die im Vergleich zu GIF auch wesentlich kleiner ausfallen. Seit 2021 wird WebP auch von Apple auf sämtlichen Plattformen unterstützt und spätestens seit der Einstellung von Internet Explorer durch Microsoft kann das Format von so gut wie allen Webbrowsern dargestellt werden. Ein Nachteil ist allerdings, dass durch die Weboptimierung WebP nicht unbedingt für Offline-Zwecke geeignet ist und eine Dateiformatkonvertierung notwendig werden kann.
Die optimale Lösung?
Das Wissen um die verschiedenen Dateitypen und ihres Verwendungszwecks kann Ihnen helfen, die Qualität und Leistung Ihrer Bilder und somit Ihrer Website zu verbessern. Allgemein lässt sich sagen, dass es nicht die eine optimale Lösung für jeden Einsatz gibt. Da das WebP-Format eine gute Kombination aus Bildqualität und kleiner Dateigröße sowie Möglichkeiten für Animationen bietet, ist es mittlerweile eine sehr gute Wahl für Abbildungen wie Fotos, die einen hohe Anzahl an Farben mit vielen Details beinhalten, wie beispielsweise Produktfotos. Sofern Sie Logos und einfache flächige Grafiken einsetzen, die auch skalierbar sein sollten, setzen Sie zusätzlich auf das vektorbasierte Format SVG.
Übrigens: Nachfolger für WebP, wie beispielsweise AVIF, stehen auch schon in den Startlöchern. Sie sind zur Zeit jedoch aufgrund mangelnder Kompatibilität noch nicht für den flächendeckenden Einsatz zu empfehlen.
Quellen
1 Sachs-Hombach/Schirra 1999, 75; Engelkamp 1998
2 w3techs.com (Stand: 16.01.2023)
Bildquelle: Seventyfour – stock.adobe.com
Kontaktieren Sie uns für ein Gespräch! Kostenlos und unverbindlich.
Wir zeigen Ihnen wie Sie das Maximum an Qualität aus Ihren Bildern herausholen und Ihre Shop-Performance verbessern. Mehr Umsatz für Ihren Onlineshop!
ahorn. gmbh
Marktstraße 53
68789 St. Leon-Rot
Telefon 06227 8609-0
kontakt@ahorngmbh.de