Der CO2-Doc fragt: Welches Bildformat ist das beste?

Torsten Beyer
Torsten Beyer

Dr. Torsten Beyer ist promovierter Chemiker und seit 1998 selbstständig. Als Keynote Speaker, Buchautor, Akademie-Gründer, Podcaster und Berater ist es seine Leidenschaft, Webseiten und digitale Kommunikation datensparsamer und nachhaltiger zu machen, um so den CO₂-Fußabdruck zu verkleinern. Er unterstützt Unternehmen bei der technischen Suchmaschinenoptimierung und hat sich auf die Realisierung schneller Webseiten spezialisiert. Dr. Beyer ist Autor zahlreicher Veröffentlichungen, war schon zu Gast in vielen Podcasts und teilt sein Wissen regelmäßig auf Konferenzen sowie in der „Web, But Green!“ Akademie.

Mehr von diesem AutorArtikel als PDF laden

Eigentlich könnte man denken, dass es das meistverwendete Format JPEG ist. Oder sein Nachfolger JPEG-XL mit dem besten Komprimierungsalgorithmus und dem kleinsten Datenvolumen. Weder – noch! Die Antwort ist differenzierter. Und was ist mit den weiteren Formaten ICO, GIF, PNG, SVG, WEBP und AVIF?

Die allererste Webseite von Tim Berners-Lee Anfang der 1990erJahre enthielt nur Text und Links – Bilder waren zu datenintensiv für die damalige Internetgeschwindigkeit. HTML 1.0 unterstützte zunächst nur das GIF-Format, da BMP und TIFF aufgrund ihres großen Datenvolumens ungeeignet waren. Später kamen JPEG und PNG hinzu, die dank effizienter Komprimierung das WWW mit der Verbreitung von Bildern revolutionierten. Damit trat das Web seinen Siegeszug in der breiten Öffentlichkeit an und entwuchs der Welt der IT-Nerds. Mit zunehmender Bandbreite und der Einführung von Flatrates in den 2000er-Jahren stieg allerdings auch das durchschnittliche Datenvolumen einer einzelnen Webseite bis auf 2,5 MB, wovon Bilddateien rund 1 MB ausmachen. Im Schnitt sind es 17 pro Seite. Damit sind sie ein signifikanter Beitrag zu den CO2-Emissionen, deren Optimierung sinnvoll ist.

Die große Vielfalt der Bildformate hat historische Ursachen: GIF ist auf 256 Farben beschränkt, erlaubt einen transparenten Hintergrund und Animationen in Endlosschleife. Aufgrund des Barrierefreiheitsgesetzes sollten GIF-Animationen zukünftig durch Videos ersetzt werden, deren Abspielen man blockieren kann. JPEG mit 16,7 Millionen Farben und verlustbehafteter Komprimierung ist ideal für Fotos auf Webseiten. PNG entstand wegen Lizenzfragen um GIF und bietet transparente Hintergründe, hat aber eine schlechtere Komprimierungsrate als JPEG. Das ICO-Format von Microsoft wird ausschließlich für Favicons verwendet, obwohl PNG datensparsamer wäre. Und das Vektorformat SVG ist optimal für Logos und Icons, denn es erlaubt eine verlustfreie Skalierung und lässt sich mit CSS-Anweisungen modifizieren.

In den letzten Jahren wurden effizientere Formate wie WEBP, AVIF und JPEG-XL entwickelt. WEBP von Google bietet eine bessere Kompressionsrate, während mit dem auf einem Video-Codec basierenden AVIF noch kleinere Dateien möglich sind (Abbildung 1). Und das aktuell nur von Apple forcierte JPEG-XL punktet mit der besten verlustfreien Komprimierung und ist ideal zur Sicherung von Originalbildern. Auf Webseiten dominiert allerdings verlustbehaftete Komprimierung, solange sie visuell keinen Unterschied macht. Und da ist AVIF am effizientesten.

Welche Formate sollten nachhaltige Webseiten nutzen? Der Standard sollte WEBP oder, falls möglich, AVIF sein – mit einer Fallback-Version auf JPEG oder PNG für die ca. 5 % älteren inkompatiblen Browser. Das reduziert nicht nur das Datenvolumen und die CO2-Emissionen, sondern verbessert die Ladezeiten, sorgt für eine bessere User Experience und wirkt sich positiv für SEO aus.