Übersicht: Bild- & Grafik Dateiformate im Web
Von Jonas Jedes webkompatible Dateiformat für Bilder und Grafiken hat Vor- und Nachteile hinsichtlich des Einsatzes, der Qualität oder der Funktionsweise.
Attraktive visuelle Inhalte können für den Erfolg einer Website sehr wichtig sein. Die verschiedenen Grafikformate, die in Websites verwendet werden können, unterscheiden sich in erster Linie in der Art der Kompression und in ihrem Funktionsumfang. Wenn ihr also das passende Dateiformat wählt, erreicht ihr die beste visuelle Qualität, bei gleichzeitig kleinster Dateigröße.
Warum es wichtig ist, das richtige Dateiformat zu wählen
Bei Bildern und Grafiken könnt ihr grundsätzlich zwischen pixelbasierten und vektorbasierten Grafiken unterscheiden. Vektorbasierte Grafikformate eignen sich besser für eine grafische, flächigere Anmutung. Fotos und detaillierte Abbildungen lassen sich besser mit Pixelgrafiken abbilden.
Im Bereich der Pixelgrafiken unterscheiden sich die Dateiformate u.a. in der Art, wie sie mit Farben und Kompression umgehen. Einige Formate unterstützen z. B. deutlich mehr Farben als andere, erlauben Animationen oder eine einstellbare Kompression. Eine praktische Hilfestellung welches Format sich für welches Motiv am besten eignet findet ihr hier.
Browser-Kompatibilität für Bild/Grafik-Dateiformate
Einige Grafikformate gibt es seit langer Zeit – hier kann von einem flächendeckenden Browser-Support ausgegangen werden. Das betrifft u. a. die Formate JPG, GIF, PNG aber auch SVG. Neuere Formate wie WebP sind auch 2021 noch nicht in allen Browsern vollumfänglich unterstützt. Hier müssen mit Responsive Images und dem <picture>-Element Alternativen angeboten werden. Noch schlechter ist der Browser-Support für AVIF, das Dateiformat, dass WebP in Zukunft ersetzen soll. Anfang 2021 ist der Support noch sehr fragmentiert.
SVG (Scalable Vector Graphics)
SVG ist ein XML-basiertes Vektorgrafikformat, das den Inhalt eines Bildes als eine Reihe von Zeichenbefehlen angibt. In SVG stehen u.a. Befehle zum Zeichnen von Formen, Linien, Farben, Filter usw. zur Verfügung.
Ein großer Vorteil ist die Möglichkeit zur Manipulation. Eine SVG kann z.B. in einem Vektor-Grafikprogramm wie Illustrator, XD, Figma oder Sketch erstellt werden. Anschließend könnt ihr die SVG in einem Code-Editor öffnen und mit Hilfe von JavaScript oder CSS Animationen und Effekte hizufügen.
SVG-Grafiken können ohne Qualitätsverlust vergrößert werden. Das Dateiformat bietet sich daher insbesondere für Icons, Diagramme und grafische Formen wie z.B. Logos an. Es ist zwar auch möglich, Pixelgrafiken (Bitmaps) in eine SVG aufzunehmen, dieses Vorgehen ist allerdings eher unüblich. SVG sollte im Web Design nicht dafür verwendet werden, Pixelgrafiken darzustellen.
Die Dateigröße von SVG kann bei simplen, geometrischen Formen sehr klein sein. Wenn die Form allerdings über viele Kurvenpunkte verfügt, steigt die Dateigröße erheblich an. Es kommt regelmäßig vor, dass SVG gegenüber anderen Bildformaten hinsichtlich der Dateigröße nicht die beste Wahl ist. Dennoch kann es sich aus anderen Gründen anbieten, trotzdem SVG einzusetzen. Beispielsweise, da ihr die Grafik in verschiedenen Farben einsetzen möchtet.
JPG/JPEG (Joint Photographic Expert Group)
JPEG ist ein solides Grafikformat zur Speicherung von Fotos und Grafiken mit vielen Farben und Tonwerten. Das Dateiformat unterstützt 16,7 Millionen Farben, speichert Bilder jedoch immer verlustbehaftet ab. Beachtet vor allem, dass mehrmaliges Öffnen und Abspeichern derselben JPEG Datei (auch bei 100 % Qualität) immer einen Qualitätsverlust zur Folge hat.
Kompression
Beim Speichern einer Datei ins JPEG-Format wird das JPEG Kompressionsverfahren angewandt. Hierbei wird das Bild in 8 x 8 Pixel große Bereiche unterteilt, und diese Bereiche werden dann auf sich wiederholende Strukturen überprüft. Je stärker der Kompressionsfaktor, desto stärker werden die Pixel in diesen Quadranten einander angeglichen. Dies führt bei starker Kompression zu sogenannten JPEG-Artefakten. Diese Artefakte sind dann im Bild deutlich sichtbar. Der Vorteil des JPEG-Formats ist jedoch die individuelle und auf Wunsch starke Verringerung der Dateigröße.
Transparenz und Animationen
JPEG unterstützt weder Transparenzen noch die Möglichkeit, Animationen zu erstellen.
GIF (Graphics Interchange Format)
Beim Speichern einer Grafik im GIF Dateiformat werden maximal 256 Farben in der sogenannten Indextabelle der Datei abgelegt. Ihr bemerkt das z. B., wenn Ihr eine GIF Datei in einem Programm wie Photoshop öffnet: Ihr werdet nur mit den in der Indextabelle vorhandenen Farben die Grafik bearbeiten können. Photoshop informiert euch mit dem Zusatz »Indiziert« über diese Tatsache.
Sobald eine Grafik mehr als 256 Farben besitzt, werdet ihr deutliche Qualitätseinbußen erkennen können. Farbverläufe werden stufig dargestellt, und das Bild verliert an Tiefe.
Transparenz
GIF unterstützt eine Transparenzstufe. Dies bedeutet, dass ihr jede der maximal 256 Farben transparent setzen könnt. Da es sich jedoch nur um eine Transparenzstufe handelt, könnt ihr Farben nicht halb transparent darstellen, sondern lediglich festlegen, ob eine Farbe 100% sichtbar oder 100 % transparent ist. Die Transparenzfunktion von GIF eignet sich daher nur für Grafiken mit harten Übergängen von Transparenz zu Sichtbarkeit. Sobald der Übergang weich ist, werdet ihr eine unschöne Kontur oder »harte Abrisse« wahrnehmen.
Animationen
Mit GIF könnt ihr Animationen erstellen, die bekannten (und berüchtigten) GIF-Animationen. Hierbei werden mehrere einzelne GIF Grafiken nacheinander abgespielt, ähnlich wie bei einem Daumenkino. Ihr könnt bestimmen, wie lange jedes einzelne Bild sichtbar bleibt und ob die Animation loopen, also sich wiederholen soll.
Kompression
GIF ermöglicht eine verlustfreie Kompression über das lizenzpflichtige LZW Kompressionsverfahren. Es stehen keine unterschiedlichen Kompressionsarten zur Verfügung, da die Farben immer in einer Indextabelle abgespeichert werden. Beachtet jedoch, dass GIFs ohne Animation gegenüber PNG8 Grafiken in der Regel keine Vorteile bieten.
PNG8 (Portable Network Graphics)
Das PNG8-Format ist vergleichbar mit GIF, da es ebenso maximal 256 Farben sowie eine Transparenzstufe in einer Farbindextabelle unterstützt. Animationen sind beim PNG-Format jedoch nicht möglich.
Kompression
Die Kompression von PNG ist verlustfrei. Ihr habt daher keine Wahl einer Qualitätsstufe, könnt jedoch die Anzahl der Farben verringern, um die Dateigröße zu beeinflussen. Das Verfahren beruht auf dem gleichen Kompressionsverfahren, das auch bei ZIP Anwendung findet. Hinzu kommen sogenannte Vorfilter, die die Dateigröße zusätzlich reduzieren. PNG komprimiert deutlich besser als GIF.
Transparenz
Wie bei GIF könnt ihr einzelne Farben der Indextabelle transparent setzen. Diese Farbe ist dann jedoch vollständig unsichtbar, eine semitransparente Färbung ist auch hier nicht möglich. Durch den ähnlichen Umfang an Funktionen ergeben sich hier vergleichbare Probleme wie beim Einsatz von GIF-Grafiken. Weiche Übergänge von Opazität zu Transparenz sollten vermieden werden, da dies zu unschöner und pixeliger Kantenbildung führt.
PNG24
Das PNG24-Format bietet gegenüber den Grafikformaten GIF und PNG8 teils deutliche Vorteile. PNG24 unterstützt 16,7 Millionen Farben und eignet sich daher für alle Bilder und Fotos. Der große Vorteil gegenüber den anderen Webgrafikformaten ist die Unterstützung von Alpha-Transparenzen. Animationen werden von PNG24 jedoch nicht unterstützt.
Transparenz
PNG24 unterstützt bis zu 256 Transparenzstufen pro Farbe. Diese Technologie nennt sich Alpha-Transparenz. Mittels Alpha-Transparenzen ist es möglich, auch weiche Übergänge von deckenden zu transparenten Flächen, wie beispielsweise Schatten oder Spiegelungen, optimal zu realisieren.
Kompression
Das Kompressionsverfahren von PNG24 Dateien entspricht dem von PNG8 Grafiken. Auch hier kommen ein Kompressionsalgorithmus sowie Vorfilter zum Einsatz. Sobald Alpha-Transparenzen in die Datei aufgenommen werden, steigt die Dateigröße rasant an. Verwendet PNG24-Dateien daher nur, wenn es für den gewünschten Einsatzzweck unumgänglich ist. Wenn das Bild nicht über Transparenzen verfügt, ist PNG24 normalerweise nicht die beste Wahl. Hier komprimieren JPEG, WebP oder PNG8 besser.
Wenn ein Grafikprogramm beim PNG-Export keine Wahl zwischen PNG8 und 24 bereitstellt, handelt es sich i. d. R. um PNG24.
APNG
Das APNG-Format erweitert gewissermaßen PNG24 um die Möglichkeit, Animationen zu verwenden. Es wurde seinerzeit von Mozilla vorgestellt und wird u. a. für Animationen im Firefox-Browser eingesetzt. In Websites kann APNG verwendet werden, ist allerdings sehr selten im Einsatz. Wie PNG24 sind 16,7 Millionen Farben und Alpha-Transparenzen möglich. Bei Animationen kann die Dateigröße rasant ansteigen.
WEBP (Web Picture Format)
Das WebP-Format bietet sich gleichermaßen gut für Fotos und detaillierte Grafiken wie für simple Grafiken und Animationen an. Es wurde als modernes Bildformat für das Internet mit dem klaren Ziel konzipiert, ältere Formate wie JPG, PNG oder GIF zu ersetzen.
Kompression
WebP ermöglicht sowohl verlustbehaftete Komprimierung wie JPG als auch verlustfreie Kompression wie PNG. Die verlustbehaftete Kompression wird mittels »Predictive Coding« basierend auf dem VP8-Videocodec erreicht. Die verlustfreie Komprimierung arbeitet – vereinfacht ausgedrückt – mit Wiederholungsmustern in der Datei.
Im direkten Vergleich sind WebP-Bilder durchschnittlich 25–35 % kleiner als JPEG-Grafiken mit visuell ähnlichen Komprimierungsstufen. Im Vergleich mit PNG ist WebP etwa 26 % kleiner als dieselben Bilder im PNG-Format (Quelle).
Aufgrund der geringeren Dateigröße sollte WebP in den meisten Fällen den anderen Dateiformaten gegenüber bevorzugt werden.
AVIF (AV1 Image File Format)
AVIF ist ein Open-Source-Dateiformat ohne Lizenzgebühren. Das ist erwähnenwert, da bei anderen Dateiformaten Lizenzprobleme die Entwicklung und Verbreitung negativ beeinflusst haben. AVIF bietet sehr vielfältige Funktionen und Kompression auf dem neuesten Stand der Technik. Ähnlich wie WebP dazu konzipiert wurde, JPG und PNG abzulösen, soll AVIF wiederum WebP ablösen.
Kompression
AVIF verwendet das AV1-Codierungsformat. AV1 wurde ursprünglich für die Videoübertragung über das Internet entwickelt. Das Format profitiert von deutlichen Fortschritten bei der Videokodierung in den letzten Jahren. Im Vergleich zu JPG ist AVIF ca. 50% kleiner. Die mit WebP erreichbaren Dateigrößen werden ebenfalls noch einmal deutlich unterschritten.
Geschrieben von Jonas
Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.
