Bilddateiformate im Online Marketing und ihre Einsatzmöglichkeiten

Es ist ein offenes Geheimnis, dass die Optimierung der Bilder auf einer Webseite starke Auswirkungen auf deren Performance hat. Das betrifft vor allem die Ladezeit. Oft gilt je kleiner die Bilddatei, desto besser die Ladezeit. Dennoch muss die Qualität der Bilder stimmen. Doch wann eignet sich welches Dateiformat? Und was hat es mit den verschiedenen Dateiformaten auf sich? Diese Fragen beantworten wir euch im Folgenden. Zudem erklären wir euch die grundlegenden Unterschiede zwischen den Bilddateiformaten.

Raster- und Vektorgrafiken – Wo liegt der Unterschied?

Grundlegend lassen sich bei den Bilddateiformaten zwei Arten unterscheiden: Rastergrafiken und Vektorgrafiken. Der Hauptunterschiede zwischen den beiden Formaten liegt in der Art und Weise, wie Formen oder generell Bilder bzw. Grafiken dargestellt werden.

Bei Rastergrafiken sind die Bildpunkte (Pixel) rasterförmig angeordnet. Sie folgen einer vorgegebenen Struktur. Diesen einzelnen Bildpunkten ist eine Farbe zugeordnet, beispielsweise im RGB-Farbraum. Die gesamte Anzahl dieser Bildpunkte ergibt das letztendliche Bild oder die Grafik. Die Anzahl der Bildpunkte bestimmt dann schließlich die Auflösung. Sie wird in Höhe und Breite gemessen. Eine Datei mit einer Höhe und Breite von jeweils 1000 Pixeln hat eine Auflösung von 1.000×1.000=1.000.000 Pixel oder auch einem Megapixel. Neben der Breite und Höhe ist die Farbtiefe das dritte Hauptmerkmal einer Rastergrafik. Diese wird in Bit gemessen und entspricht standardmäßig 24 Bit. Dabei entfallen auf jeden Farbkanal im RGB-Farbraum 8 Bit. Jeder Farbkanal kann 256 Farben darstellen. Insgesamt können so 256³, also 16,7 Millionen Farben, dargestellt werden. Die bekannten Bilddateiformate für Rastergrafiken sind JPEG oder PNG-Dateien.

Im Gegensatz zu Rastergrafiken sind Vektorgrafiken nicht an eine feste Grundordnung in Form eines Pixelrasters gebunden. Vektorgrafiken werden über sogenannte grafische Primitive definiert. Das sind beispielsweise Linien, Kreise, Ellipsen oder Polygone. Diese beschreiben die Objekte einer Grafik durch Vektoren. Die Vektoren sind stufenlos skalierbar. Daher können Vektorgrafiken stufenlos und verlustfrei vergrößert oder verkleinert werden. Die Farben in diesen Formen werden über Farbcodes dargestellt. Dies ist auch bei den Rastergrafiken der Fall. Ein typisches Bilddateiformat für Vektorgrafiken ist das SVG-Format.

3 Bilddateiformate im Vergleich: JPEG, PNG, & SVG

Aufgrund der bereits eben angesprochenen Eigenschaften ist nicht jedes Format gleich gut für verschiedene Zwecke geeignet. In diesem Abschnitt wollen wir euch daher die Formate JPEG, PNG und SVG näherbringen und aus Sicht des Online Marketing und vor allem aus der Sicht des technischen SEO näher beleuchten.

Das JEPG-Format

Das wohl bekannteste Bilddateiformat ist das JPEG-Format. JPEGs sind Rasterdateien und bestehen daher aus Pixeln. Das Dateiformat stammt aus den Jahre 1992 und ist daher schon recht alt. Das Format ermöglicht die Darstellung von bis zu 16,7 Millionen Farben. Ein großer Vorteil ist, dass JPEGs komprimiert werden können und so die Dateigröße teils drastisch reduziert werden kann. Diese Tatsache wirkt sich positiv auf die Performance einer Website aus. Kleine Bilddateien werden schneller geladen und benötigen weniger Ressourcen.

Ein Nachteil der Komprimierung ist, dass sie verlustbehaftet ist. Bei der Komprimierung verliert das Bild oder die Grafik an Qualität. Dabei werden einzelne Pixel mit ähnlichen Farbwerten zusammengefasst. So werden die Bildinformationen und damit der benötige Speicherplatz verringert. Dies geschieht auf Kosten der Details im Bild. Im Beispiel werden die Blätter der Bäume verschwommen dargestellt. Links ist das unkomprimierte Bild zusehen und rechts eine stark komprimierte Variante.

Zudem können JPEGs keine transparenten Bereiche darstellen. Diese werden weiß dargestellt. Zudem lassen sich JPEGs nicht animieren.

JPEGs sind am besten für Bilder mit hohem Farbumfang und ohne transparente Bereiche geeignet. Das können beispielsweise Produktbilder, Werbebilder oder Bilder im Headbereich einer Seite sein.

Das PNG-Format

Das zweite vorgestellte Bilddateiformat ist das PNG-Format. Wie auch das JPEG ist ein PNG eine Rastergrafik. Das Format stammt aus dem Jahr 1994 und wurde als Alternative zum GIF-Format entwickelt. Dieses war bis zum Jahr 2006 durch ein Patent geschützt. PNGs teilen sich in zwei verschiedene Varianten auf, einmal das PNG8 und PNG24. Die 8 bzw. 24 geben die Farbtiefe des jeweiligen PNGs an. Das PNG8 kann 256 Farben darstellen und das PNG24 kann, wie das JPEG, 16,7 Millionen Farben darstellen. PNG-Dateien können verlustfrei komprimiert werden. Details bleiben bei der Komprimierung erhalten, als Folge entstehen jedoch größere Dateien. Diese beanspruchen wiederum mehr Ressourcen und können sich negativ auf die Performance einer Website auswirken.

Ein großer Vorteil von PNGs ist jedoch, dass sie transparente Bereiche über den sogenannten Alpha-Kanal darstellen können. Je nach Art des PNGs sind dabei 256 Abstufungen (PNG8) oder 65.536 Abstufungen (PNG24) möglich. Dies ermöglicht die Einbindung von beispielsweise Logos oder Icons unabhängig vom Hintergrund. Ist der Hintergrund des PNG transparent, ist automatisch der Hintergrund bzw. die Hintergrundfarbe der Webseite zu sehen.

PNGs als Bilddateiformat eigenen sich daher für Bilder mit transparenten Bereichen. Dies ist aber eher ein Sonderfall. Zudem sind PNGs besonders gut für Logos oder auch Text geeignet. Je nach Farbumfang des Logos sollte auf das PNG24-Format zurückgegriffen werden, um alle Farben korrekt darzustellen.

Das SVG-Format

Abschließend widmen wir uns dem SVG-Format. Dieses Bilddateiformat ist im Gegensatz zu JPEG und PNG eine Vektorgrafik. SVG steht dabei für Scalable Vector Graphics. Das Format stammt aus dem Jahr 2001, basiert auf der Auszeichnungssprache XML und wurden vom W3C im Jahr 2001 entwickelt.

Im Gegensatz zu PNG- oder JPEG-Dateien können SVG-Dateien direkt als XML-Code in den HTML-Code einer Website integriert werden. Folglich hat dies positive Auswirkungen auf die Website-Performance und insbesondere die Ladezeiten. Die Grafik wird direkt im Browser erstellt und muss nicht erst vom Server geladen werden. Das spart Ressourcen und verringert die Zahl der Anfragen zwischen Browser und Server. SVGs können von allen aktuellen Browsern dargestellt werden, auch vom Internet Explorer ab Version 9.

Ebenso wie PNGs können SVGs auch transparente Bereiche über den Alphakanal darstellen. Zudem können diese, im Gegensatz zu den Rastergrafiken JPEG und PNG, mittels Java Script animiert werden. SVG-Dateien sind besonders für geometrische Formen, sprich Logos, Icons, Diagramme oder auch Infografiken, geeignet. Der größte Vorteil dieses Format ist die verlustfreie Skalierbarkeit. Daher eigenen sich SVG-Dateien besonders für den Einsatz in Responsive Designs. Die Dateien sind klein und automatische Anpassungen sind ohne Qualitätsverlust möglich. Dabei ist jedoch zu beachten, dass im Code keine begrenzenden Höhen- und Breitenangaben verwendet werden.

Neue Bilddateiformate: FLIF & HEIF

Vor allem bei den Dateiformaten für Rastergrafiken fällt auf, dass deren Entwicklung schon mehr als 20 Jahre zurückliegt. Mittlerweile hat sich besonders im technischen Bereich viel getan. Schnelle Internetverbindungen, hochauflösende Displays und Kameras gehören zum Alltag. Diesen Entwicklungen tragen die Formate FLIF und HEIF Rechnung.

Das FLIF Format – JPEG und PNG vereint

FLIF steht für Free Lossless Image Format. Die aktuellste Spezifikation des Formats stammt aus dem April 2017 und trägt die Versionsnummer 0.3. Es soll verlustfreie Komprimierungen ermöglichen und dabei kleinere Dateien als beispielsweise beim JPEG Standard erzeugen. Die Entwickler geben an, dass bis zu 43% kleinere Dateien bei PNGs und bis zu 74% kleinere Dateien bei JPEGs möglich sind. Zudem wird wie bei PNG-Dateien die Darstellung transparenter Bereiche unterstützt.

Allerdings befindet sich das Format noch in der Entwicklung und unterstützt noch nicht alle gängigen Farbräume. Auch der Komprimierungsalgorithmus ist noch nicht optimal ausgearbeitet, so dass es noch einige Programmierarbeit gibt. Dennoch sollte man das Format in Zukunft beobachten. Die Ansätze sind vielversprechend. Über die aktuelle Entwicklung des Formats informiert die offizielle Webseite der Entwickler. Hier können auch technische Aspekte und Hintergründe nachgelesen werden.

Das HEIF Format – Apples Weg

Anders als es die Überschrift vermuten lässt, wurde das HEIF Format nicht von Apple entwickelt. Das Format gibt es schon seit dem Jahr 2000. HEIF steht für High Efficiency Image File Format. Größere Bekanntheit erlangte das Format allerdings erst durch den kalifornischen Konzern. Dieser verwendet es standardmäßig für Bilder in seinen neuesten Betriebssystemen für Smartphones und Tablets sowie Desktops und Notebooks. Im Vergleich zu JPEGs sollen die Dateien bis zu 40% weniger Speicherplatz benötigen und bessere Qualität liefern.

Da das Format im Moment nur von aktuellen Apple-Geräten genutzt wird, ist es schwierig dessen Verbreitung zu beurteilen. Es stellt aber in jedem Fall eine Alternative zum alteingesessen JPEG-Format dar. Das Besondere ist zudem, dass nicht nur Einzelbilder, sondern auch Serienaufnahmen mit dem Format problemlos möglich sind. Wie auch beim FLIF-Format gilt es das Bilddateiformat im Auge zu behalten.

Fazit – Wann welches Format verwenden

Es zeigt sich, dass es bei den Bilddateiformaten einige Entwicklungen gibt. Die alteingesessen Formate JPEG und PNG werden zwar nicht sofort verdrängt oder ersetzt, aber Neuentwicklungen stehen in den Startlöchern.

Die Standardformate werden nicht allzu schnell von der Bildfläche verschwinden. Denn sie sind nach wie vor sehr nützlich und können aufgrund ihrer Vielseitigkeit fast überall eingesetzt werden.

JPEGs eignen sich am besten für Produktfotos oder große, ausdruckstarke Bilder. Durch die Komprimierung können kleine Dateien erzeugt werden, die sich positiv auf die Ladezeiten und die Performance einer Webseite auswirken. Zudem lockert eine passende Bebilderung Fließtexte und Beschreibungen auf. Neben der Komprimierung solltet ihr unbedingt auf die Auflösung achten. Diese hat ebenfalls großen Einfluss auf die Dateigröße. Bindet Fotos oder Bilder nur so groß wie nötig ein und verwendet die Komprimierung soweit, dass alle Details erkannt werden.

Für Logos und teilweise auch Texte ist das PNG das Bilddateiformat der Wahl. Sein großer Vorteil ist die Darstellung von transparenten Bereichen mittels Alpha Kanal. So können Logos unabhänging vom Hintergrund platziert werden. Ändert sich beispielsweise die Hintergrundfarbe, müssen nicht auch die Logos angepasst werden. Dies geschieht „automatisch“, da die Datei einen transparenten Hintergrund besitzt. Leider sind PNG-Dateien aufgrund der verlustfreien Komprimierung größer als vergleichbare JPEG-Dateien. Der einzige Stellschraube mit Einfluss auf die Dateigröße ist hier die Auflösung. Wie auch beim JPEG sollte eine passende Auflösung gewählt werden. Zudem solltet ihr darauf achten, das PNG24-Format zu verwenden, da hier alle Farben korrekt dargestellt werden.

Die Nachteile, die JPEG und PNG haben, merzt das SVG-Format aus. Zumindest wenn es um Logos geht. Der große Vorteil des SVG-Formats ist dessen hohe Skalierbarkeit. Es ist daher für alle Bilder und Grafiken mit einfachen geometrischen Formen geeignet, insbesondere Logos, Icons oder Diagramme. Zudem lassen sich SVG animieren, das ist z.B. bei Menü-Icons auf Websites sinnvoll, um die User Experience zu verbessern und aufzulockern. Durch die hohe Skalierbarkeit sind SVG Dateien besonders für responsives Design geeignet. Dabei ist zu beachten, dass im Code keine Begrenzungen für Höhe und Breite verwendet werden.

Insgesamt gilt:

• JPEG lebt und eignet sich richtig angewendet für detailreiche Bilder und Fotos.
• PNG ist geeignet für Logos und Text, bei detailreichen Bildern oder Fotos entstehen größere Dateien als bei JPEG.
• SVG lässt sich quasi unendlich skalieren und arbeitet sehr ressourcenschonend, da es direkt im Code eingebettet ist.
• Neue Formate wie FLIF und HEIF stehen in den Stärtlöchern. Diese gilt es zu beobachten, da sie einige Vorteile bieten.