Bildformate der Zukunft: AVIF oder WebP, worauf solltet ihr setzen?

Zu Beginn möchten wir uns erst einmal die verschiedenen Bildformate ansehen, um die es hier geht. Ausgesucht haben wir uns WebP als den bekannten Standard für komprimierte Bilder. AVIF als den Neuankömmling unter den zukunftsträchtigen Bildformaten. Sowie natürlich MozJPEG als alten Hasen, der ein gealtertes Format auch heute noch effizient nutzbar machen möchte.

Was taugen die drei Bildformate, die so gnadenlos auf Komprimierung getrimmt wurden und nur dazu gedacht sind, möglichst wenig Speicherplatz zu verbrauchen? Wie bauen sie sich auf und wie genau sind sie zu verstehen? Gibt es Vorteile bei bestimmten Grafiken oder Motiven, so wie das bei JPEG, GIF und PNG der Fall ist? All das klären wir nun in unserer kurzen Analyse der drei Bildformate. Seid gespannt auf die Ergebnisse.

Anfangen möchten wir mit WebP, welches damals von Google ins Leben gerufen wurde. Vor allem deshalb, weil alle gängigen Bildformate daran scheiterten, mit einer modernen Komprimierung in Erscheinung zu treten. Genau das sollte sich mit WebP endlich ändern. Die Erstveröffentlichung fand im Jahr 2010 statt, als Ableger vom Videocodec VP8 und WebM (bei YouTube für Videos im Einsatz).

WebP setzt auf eine besonders starke Komprimierung, die dabei aber eine deutlich höhere Bildqualität liefert als beispielsweise JPEG. Ziel von Google war es, ein Format nur für das Web zu entwickeln. Dies sollte eine möglichst hohe Qualität gewährleisten, bei gleichzeitig äußerst geringem Speicherplatzverbrauch.

Dieser Fokus führte dazu, dass WebP von Anfang an ablieferte und fast alle Bilder deutlich kleiner waren als in vergleichbaren Formaten. Wohlgemerkt bei fast identischer oder sogar höherer Qualität. Auch die Unterstützung für Animationen wurde später noch hinzugefügt, sodass WebP das Zeug zum Allrounder hatte und am Ende dennoch scheiterte.

Das Problem mit WebP war nämlich, dass es von Google stammte. Webmaster*innen mochten es nicht und große Portale wollten sich nicht an Google binden. Apple integrierte es nicht in iOS und MacOS (kam erst kürzlich hinzu) und damit versickerte das Format, weil es niemand produktiv verwenden wollte. Außerdem war die Komprimierung aufwendig und gerade bei detailreichen Aufnahmen am Anfang noch schlechter als beim JPEG-Format.

Das noch recht neue Bildformat AVIF stammt aus dem Jahr 2019 und ist gekommen, um zu bleiben. Das gesamte Format entspricht modernen Standards und wird inzwischen aktiv von Netflix genutzt. Es wird als Nachfolger von WebP gehandelt und soll im Grunde das altbewährte JPEG als neues Standardformat ablösen. Dabei ähnelt es dem Format HEIC, auf das auch Apple setzt, ist aber offener angelegt.

Was AVIF ausmacht, ist die enorm hohe Kompressionsrate. Damit übertrifft es die bekannten Bildformate deutlich und ist noch einmal viel effektiver als das eh schon sehr komprimierte WebP. AVIF ist dabei im Grunde gleichauf mit HEIC.

Der größte Nachteil ist aktuell, dass das AV1-basierte Bildformat viel Leistung und Zeit bei der Codierung frisst. AV1-Encoder arbeiten entsprechend langsam, was bei umfangreichen Projekten schnell zum Flaschenhals werden kann. Hier muss sich also noch einiges tun, damit AVIF im produktiven Einsatz angewandt werden kann.

Die Zeichen, dass AVIF das Format der Zukunft ist, stehen dennoch äußerst positiv. Das Bildformat ist unseres Wissens nach frei von Lizenzgebühren, also royalty-free, wie es so schön heißt. Außerdem wird es von Google in Chrome und Android bereits unterstützt und Firefox hat ebenfalls die Implementierung eingeleitet. Auch von Apple ist zu erwarten, dass es nicht, wie zuletzt bei WebP, 10 Jahre dauern wird, da Apple ebenfalls Mitglied der Gruppe ist, die AV1 ins Leben gerufen hat.

Ach und dann gibt es da noch MozJPEG, ein verbessertes JPEG-Format, wenn man so möchte. Das liefert gute Ergebnisse, dem Format fehlt es aber an breiter Unterstützung. Außerdem verbessert es lediglich ein veraltetes Bildformat, welches einfach nicht für die Zukunft gemacht ist und dessen Möglichkeiten demnach viel zu stark begrenzt sind. Was dem JPEG fehlt, kann auch MozJPEG daher nicht ohne Weiteres hinzufügen.

Im Grunde ist MozJPEG eine Abspaltung von libjpeg-turbo, mit deutlich höherer Codiereffizienz. Kurz gesagt, erzeugt es kleine JPEG-Dateien, die extrem stark komprimiert sind und trotzdem eine sehr gute Darstellung besitzen. Es bleibt aber hinter allen anderen Formaten zurück und benötigt noch dazu viel Rechenleistung.

Das Einzige, was am Ende für MozJPEG spricht, ist die Tatsache, dass es gewöhnliche JPEG-Dateien ausgibt, die logischerweise überall angesehen werden können. Bei WebP hat es damals 10 Jahre gedauert, bis es breite Unterstützung fand. Bei AVIF wird es zwar schneller gehen, dauert jedoch auch noch eine ganze Weile, da sind wir uns recht sicher.

Sagen wir es mal so. GIF stammt noch aus dem Jahr 1989. JPEG ist ein Format aus den frühen 90ern. PNG-Dateien entstanden Mitte der 90er-Jahre. Alles also recht alte Formate, die entwickelt wurden, als Bilder und das Internet noch gar keine allzu große Rolle spielten. Doch selbst als sie es taten und die Bildformate verschiedene Verbesserungen erfuhren, waren es immer noch alte Greise, die in einer modernen Welt mitmischen wollten.

So hat sich auch das Internet stark gewandelt. Gab es früher nur vereinzelt Bilder, sind Bilder heutzutage fast immer der Aufmacher. Videos kamen hinzu und benötigten ebenso aufregende Thumbnails. Vorschaubilder also, die komprimiert sein mussten, um als Teaser für das Video dahinter zu funktionieren. Das Web änderte sich, doch die Bildformate blieben die ganze Zeit dieselben.

Wer Animationen teilen wollte, nutzte GIF aus den 80ern. Wer Fotografien ins Netz stellte, verwendete dafür das JPEG-Format. Wer Grafiken benötigte, setzte auf das Mitte der 90er-Jahre erfundene PNG, weil dieses selbige verlustfrei und ohne Artefakte speichern konnte. Und dann gab es da noch Exoten wie das APNG, welches wie ein GIF animiert sein konnte, allerdings eine wesentlich höhere Qualität lieferte. SVG sollte fairerweise auch noch erwähnt werden, da es als skalierbares Vektorformat komplett verlustfrei, vor allem aber eben skalierbar gespeichert werden kann. Letzteres hat sich daher vor allem für Icons durchgesetzt.

Es gibt also viele Formate, doch keines von ihnen ist für die heutige Zeit gedacht. Einige wurden zwar immer wieder verbessert, erneuert oder erweitert, doch so richtig in der Zukunft sind sie dadurch nicht angekommen.

Es braucht nun einmal eine komplette Neuentwicklung wie WebP oder AVIF, die auf die derzeitigen Bedingungen Rücksicht nimmt und entsprechend daraufhin optimiert wurde. Nur so kann ein Bildformat in der heutigen Zeit bestmöglich funktionieren. Deshalb sehnen wir uns auch alle so sehr nach einem neuen Format. Keines der alten bedient nämlich unsere heutigen Ansprüche. Auch wenn sie unumstritten funktionieren, sind es dennoch Dinosaurier in einer modernen Welt.

Nun gibt es verständlicherweise das Problem, dass wir viele verschiedene Bildformate nutzen, die nicht in ganzer Form von den Browsern und Plattformen unterstützt werden. Das war schon bei WebP die größte Komplikation. Es wurde zwar verwendet, benötigte aber einen aufwendigen Fallback bzw. eine Umleitung, falls das Format nicht unterstützt wurde.

Inzwischen hat sich bei der Entwicklung von Websites so einiges getan. Es gibt nun das Picture-Element, welches der Darstellung von responsiven Bildern dient und dazu genutzt werden kann, verschiedene Formate zu laden. Früher brauchte es dafür noch Hacks, heute gelingt dies mit nativem HTML.

Via <picture> kann somit eine Reihe von Bilddateien angegeben werden, deren Unterstützung nacheinander abgefragt wird. Der Browser checkt also, ob er das erste Format unterstützt. Ist dies nicht der Fall, springt er über zum nächsten Bild. Er geht also die gesamte Liste durch und zeigt anschließend nur das Bildformat an, welches er tatsächlich beherrscht.

So kann mit nativem HTML ein Fallback hinterlegt werden, welches der Browser nutzt, wenn AVIF nicht unterstützt wird. Ist der Browser hingegen dermaßen veraltet, dass er nicht einmal das neue <picture> -Element kennt, nutzt er den letzten Eintrag, also das <img> -Element. So wird jederzeit sichergestellt, dass in allen Browsern stets ein passendes Bild angezeigt wird.

<picture>
<source srcset="bild.avif" type="image/avif">
<source srcset="bild.webp" type="image/webp">
<img src="bild.jpg" alt="beschreibung">
</picture>

Gute Frage. Bei WebP haben damals auch viele gedacht, in ein paar Monaten oder Jahren hat das neue Format das gesamte Web erobert. Doch erst sträubte sich Mozilla, dann Apple und irgendwann ging es mit WebP einfach nicht mehr weiter. AVIF ist anders, weil es offener, besser, zukunftsträchtiger erscheint und von allen großen Unternehmen gemeinsam entwickelt wurde. Diesmal könnte es daher wirklich einen Wandel und somit einen neuen Standard geben.

Wie eingangs schon erwähnt, wäre dies auch wirklich notwendig. Abgesehen von WebP, sind alle derzeitigen Bildformate nämlich veraltet und nicht mehr bereit für die Bedürfnisse moderner Web-Entwicklung. Wir brauchen also ein neues Bildformat. Ein Format, welches Bilder blitzschnell lädt. Auch auf mobilen Plattformen oder mit mobilem Internet. AVIF könnte genau dieses neue Bildformat sein.

Die Unterstützung ist aktuell noch nicht gänzlich vorhanden, jedoch weitläufig angekündigt. Viele Expert*innen sehen in AVIF daher das Bildformat der Zukunft. Wir würden uns dieser Meinung anschließen. Jetzt bleibt nur noch zu hoffen, dass sich das neue Format möglichst schnell durchsetzt und wir schon bald damit aufhören können, aufgrund mangelnder Alternativen, drei völlig veraltete Bildformate zu verwenden.