AVIF: Bildformat-Zukunft und Nachfolger von WebP?

Was Webdesign und Bildformate betrifft, hat sich einiges getan und auch vieles verändert. Während Apple an die zehn Jahre benötigte, bevor WebP überhaupt unterstützt wurde, ist jetzt schon der inoffizielle Nachfolger am Start. Der nennt sich AVIF und kann mehr als WebP, wobei der Support bald schon deutlich besser ausfallen wird.

Warum das so ist, warum WebP nicht mehr die Zukunft ist, was AVIF kann und verspricht – all das soll der folgende Artikel klären.

AVIF: Bildformat-Zukunft und Nachfolger von WebP?

Der ein oder andere von euch wird sich bestimmt noch an meinen Artikel erinnern, in welchem ich die verschiedenen Bildformate ein wenig ausführlicher vorstellte. Damals ging es vor allem um die grundsätzliche Frage, welches Format sich für welche Art von Bild eignet.

Wir stellten damals fest, dass es nicht einfach ein Format für alle Arten von Bildern gibt, sondern viele unterschiedliche Formate, die sich für ganz abweichende Arten von Grafiken und Darstellungen eignen.

SVG, PNG, GIF und JPG waren damals die genannten Beispiele, aber auch das zukunftsträchtige WebP-Format, welches alles noch ein wenig besser zu machen schien. Doch jetzt kommt AVIF.

Was ist AVIF überhaupt?

AVIF ist noch ein sehr frisches Format. Entwickelt im Jahr 2019, stieß es schnell auf große Begeisterung. So groß, dass beispielsweise Netflix das Format gleich für die eigene Plattform entdeckte. Letzteres ist dabei kein Wunder, da AVIF von der Alliance for Open Media entwickelt wurde. Die wiederum ist ein Zusammenschluss großer Firmen. Darunter Apple, Google, Facebook, Microsoft, Mozilla, AMD, Nvidia und eben auch Netflix. Die Alliance for Open Media hat in erster Linie das Ziel, Medientechnologien effizienter zu gestalten und Standards zu entwickeln, die dann gemeinsam genutzt werden können.

Dabei wird AVIF als Nachfolger von WebP betrachtet und soll auf lange Sicht auch das JPEG-Format ablösen. AVIF wurde quasi als neues Standardformat entwickelt, welches in nahezu allen Bereichen glänzen soll. Es ähnelt dem HEIC-Format, welches Apple aktuell nutzt, ist aber offen angelegt, wird sich also schnell verbreiten. Dabei bietet es eine ähnlich hohe Komprimierung, die für wenig Speicherplatz bei gleichzeitig hoher Qualität sorgt.

Da sich nahezu alle großen Unternehmen in der Alliance for Open Media befinden, wird auch der Support nicht lange auf sich warten lassen. Schon jetzt ist der Chrome Browser bereit, der Firefox arbeitet an der Implementierung und auch Apple wird, so scheint es diesmal, nicht wieder zehn Jahre für die Integration benötigen (was bei WebP allerdings sicherlich auch daran lag, dass es von Google kam).

Der einzige große Nachteil von AVIF ist zurzeit noch, dass gängige AV1-Encoder recht träge arbeiten und dabei viele Ressourcen verschlingen. Hier muss sich technisch also viel tun, damit das Format im Alltag schneller und effektiver verwendet werden kann.

Picture-Tag nutzen und warten

Der Support für AVIF ist zurzeit noch nicht gegeben. Das kommt alles erst noch. Aktuell unterstützen nur Chrome und Opera das neue Bildformat. Die Implementierung im Firefox läuft bereits, Safari wird sicherlich auch bald folgen, wobei hier noch völlig unklar ist, wann dies der Fall sein wird. Erst einmal kommt die zehn Jahre zu späte Unterstützung für WebP, die mit MacOS Big Sur endlich Einzug in den Browser erhält.

Allerdings haben sich die Zeiten geändert. Wer damals WebP verwenden wollte, musste zum Teil komplizierte Fallbacks programmieren, damit iPhone und MacOS eine Alternative auslieferten. Das geht heute ganz einfach mit dem Picture-Tag.

Wie bei anderen Medien geht der Picture-Tag die Einträge nacheinander durch. Wird das erste Format nicht unterstützt, versucht der Browser das nächste zu laden. Wird das auch nicht unterstützt, geht es zum nächsten und immer so weiter.

Damit ist es problemlos möglich, erst AVIF, dann WebP und dann ein JPG zu hinterlegen. Wobei ich persönlich auf WebP komplett verzichten würde, weil es für mich keine Zukunft mehr hat. So kann ein AVIF-Bild schon jetzt eingesetzt werden, ohne dass die Unterstützung eingeschränkt wird.

<picture>
<source type="image/avif" srcset="snow.avif">
<img alt="Fallback" src="fallback.jpg"
</picture>

In WordPress braucht es ebenfalls ein kleines Snippet, um AVIF-Dateien hochladen zu können. Genau wie bei den Bildbearbeitungen, ist der Support auch hier nämlich noch nicht gegeben und muss erst noch erfolgen.

Um AVIF Dateien umzuwandeln, wird daher ebenfalls ein Online-Converter verwendet, da die meisten Programme es aktuell noch nicht gänzlich unterstützen.

JPEG vs. WebP vs. AVIF

Ein Bild sagt mehr als tausend Worte und daher habe ich hier einige Beispiele für euch erstellt.

Die sollen in erster Linie verdeutlichen, wie die Unterschiede der einzelnen Formate sich bemerkbar machen.

Das JPEG liegt dabei als Original vor und wird noch einmal entsprechend optimiert.

Das Ziel im Beispiel war KEINE verlustfreie Optimierung, sondern eine Darstellung davon, wie die optischen Unterschiede bei sehr starker Komprimierung ausfallen.

Beispiel 1:
Schön zu sehen ist, wie das JPG komplett versagt und Artefakte bildet. Wer das Bild vergrößert, sieht zudem, dass sich WebP und AVIF zwar kaum voneinander unterscheiden, WebP aber dazu neigt schneller Artefakte zu bilden (siehe Himmel).

Zum Vergrößern anklicken

Beispiel 2:
Auch bei Formen zeigt AVIF, dass es gleichauf mit dem PNG liegt. Während das optimierte PNG nämlich immer noch 2 KB groß ist, schafft es ein AVIF auf minimale 1.5 KB und zwar bei fast gleicher Qualität. WebP hingegen sieht bei dermaßen starker Komprimierung vollkommen verwaschen aus.

Zum Vergrößern anklicken

Warum brauchen wir AVIF?

Nahezu alle Bildformate stammen noch aus dem 20. Jahrhundert. Damals gab es andere Ansprüche, Streaming und bildgewaltige Websites gab es beispielsweise noch gar nicht. Heute bestimmen Vorschaubilder das Internet. Egal ob bei YouTube oder Netflix, egal ob für Artikel oder Blogbeiträge – alles hat ein eigenes Vorschaubild.

Das wiederum bedeutet, dass wir ein neues Format benötigen. Eines, welches von Anfang an für diesen Anspruch entwickelt wurde. Welches möglichst klein ausfällt, bestmöglich geladen werden kann und in der Erstellung nicht zu viele Ressourcen verschlingt. WebP war so ein Format, stammte aber von Google, weshalb viele es nicht verwenden wollten und es nie zum Standard wurde.

AVIF ist wie WebP, nur noch einmal besser optimiert. Es stammt von der Alliance for Open Media und ist ein offener Standard, der ohne Lizenzgebühren oder idiotische Machtspiele der einzelnen Konzerne entsteht. Wir brauchen AVIF, um die Formate der 90er endlich loszuwerden und die Darstellung von Bildern im Web in ein neues Zeitalter zu führen. Ganz dringend sogar.

Es ist, als ob ihr euren alten Opel Kadett immer wieder neu aufbereitet, verbessert und mit modernen Teilen ausstattet, den Motor dabei aber unangetastet lasst. Was ihr also auch versucht, es bleibt im Kern ein Opel Kadett. Der wurde zwar geringfügig verbessert, wird dadurch aber trotzdem kein Tesla.

Fazit und Prognose zu AVIF

Es hat lange gedauert, doch endlich ziehen alle großen Unternehmen an einem Strang und erschaffen ein Bildformat, welches die Vorteile von WebP noch ausbaut und bereit für die Zukunft ist. Aktuell ist der Support zwar noch nicht vollständig gegeben, doch es ist davon auszugehen, dass zeitnah alle Plattformen, Systeme und Browser das AVIF-Format unterstützen werden.

Mir gefällt vor allem, wie stark sich AVIF komprimieren lässt, ohne dabei schlecht auszusehen. Es bildet weniger Artefakte und wirkt selbst bei extremer Komprimierung eher etwas verwischt als direkt pixelig. Wer auf Details verzichten kann, darf also besonders heftig optimieren, ohne gleich Artefakte vorzufinden.

Natürlich hängt all das immer vom Bild ab. Grundsätzlich aber ist AVIF für mich die Zukunft. Die Tatsache, dass Netflix bereits darauf setzt, spricht ebenfalls Bände. Persönlich werde ich allerdings noch warten, bis ich nicht mehr das Picture-Element benötige und alle Grafiken mit AVIF ohne Fallback ersetzten kann. Dies wird nicht mehr lange dauern.

Was ist eure Meinung zum neuen Bildformat? Seid ihr schon bereit es einzusetzen?