AVIF vs WebP: Warum AVIF besser komprimiert

WebP war früher die einfache Antwort auf „Was ist das kleinste Format, das ich sicher verwenden kann?”. Das stimmt heute in zweierlei Hinsicht nicht mehr ganz: AVIF, das seit 2020 still und leise an Unterstützung gewinnt, schlägt WebP inzwischen in den meisten realen Tests bei der reinen Komprimierung, und auch der alte Hauptgrund, warum viele es meiden — die Erstellung war umständlich —, trifft kaum noch zu.

Doch „AVIF ist kleiner“ ist eine zu grobe Zusammenfassung. Es gibt konkrete, vorhersagbare Fälle, in denen WebP weiterhin die bessere Datei liefert, und zu wissen, welcher Fall wann vorliegt, spart mehr Bytes als immer zum neuesten Format zu greifen.

Warum AVIF besser komprimiert

WebP basiert auf VP8, einem Video-Codec von 2010. AVIF basiert auf AV1, einem Video-Codec, der ein Jahrzehnt später fertig wurde — und Video-Codecs sind der Ort, an dem die Forschung zur Bildkompression tatsächlich stattfindet, denn im Streaming-Maßstab zählt schon ein Prozent enorm. AV1 brachte deutlich bessere Werkzeuge mit, und AVIF erbt sie alle.

Drei Unterschiede erledigen den größten Teil der Arbeit:

Flexible Blockgrößen. VP8 arbeitet in einem ziemlich starren Raster. AV1 kann das Bild in Blöcke von winzig bis sehr groß zerlegen und pro Region entscheiden. Eine gleichmäßige Himmelsfläche wird von einem großen Block beschrieben statt von Hunderten kleinen; ein detailreiches Gesicht wird so fein unterteilt, wie es nötig ist. Die Blockgröße an den Inhalt anzupassen, macht den größten Teil der Ersparnis aus.

Bessere Vorhersage. Bevor irgendetwas gespeichert wird, raten beide Codecs anhand der Nachbarn, wie ein Block aussehen wird, und speichern nur den Fehler dieser Schätzung. AV1 hat wesentlich mehr Möglichkeiten für diese Schätzung — darunter Richtungsmodi, die Kanten in vielen verschiedenen Winkeln folgen —, sodass der zu speichernde Fehler kleiner ausfällt.

Höhere Bittiefe. AVIF kodiert intern mit 10 oder 12 Bit pro Kanal, selbst wenn die Quelle 8 Bit hat. Das klingt, als müssten die Dateien dadurch größer werden, stattdessen verringert es die Streifenbildung: Der Encoder hat feinere Abstufungen zur Verfügung, wenn er einen sanften Verlauf annähert, sodass Himmel und Schatten bei gleicher Dateigröße weniger sichtbar stufen.

In der Praxis landet das bei Fotografien im Bereich von 20 bis 30 Prozent zugunsten von AVIF, wobei die größten und detailreichsten Bilder am meisten gewinnen. AVIF unterstützt außerdem HDR und großen Farbraum, was WebP überhaupt nicht darstellen kann — für die meisten Menschen im Alltag nicht relevant, für fotolastige Seiten aber entscheidend.

Wo WebP weiterhin gewinnt

Das ist der Teil, der meist weggelassen wird.

Sehr kleine Bilder. AVIF trägt mehr strukturellen Overhead pro Datei mit sich, und unterhalb einer gewissen Größe zahlt sich dieser Overhead nicht mehr aus. Bei gleichem flachem Symbol und fester Qualität haben wir WebP bis einschließlich 40 Pixel Kantenlänge als kleiner gemessen — 388 Byte gegenüber 427 Byte bei AVIF bei 32 px, 352 gegenüber 417 bei 40 px —, ab 48 Pixeln liegt AVIF vorn. In diesen Größen schlägt schlichtes PNG beide, denn eine flache Grafik ist genau das, was verlustfreie Kompression gut kann. Die ehrliche Grenze sind also Favicons und sehr kleine Avatare, nicht Vorschaubilder: bei 64 Pixeln liegt AVIF bereits deutlich vorn.

Verlustfreie Grafiken. Der verlustfreie Modus von WebP ist ein wirklich exzellenter, eigens für flache Farben und scharfe Kanten entworfener Ansatz. Der verlustfreie Modus von AVIF wirkt dagegen wie ein nachträglicher Einfall und unterliegt bei Screenshots, Logos und Strichzeichnungen häufig sowohl WebP verlustfrei als auch schlichtem PNG. Wenn Sie pixelgenaue Ausgabe brauchen, ist WebP meist die bessere moderne Wahl.

Kodierzeit. AVIF ist drastisch langsamer zu erzeugen — für dasselbe Bild oft um ein Vielfaches langsamer als WebP, weil all diese Flexibilität bedeutet, einen viel größeren Raum möglicher Kodierungen zu durchsuchen. Bei einem Bild fällt das nicht auf. Bei einem Ordner mit vierhundert ist es der Unterschied zwischen einer Kaffeepause und einem Nachmittag.

Sehr hohe Qualitätseinstellungen. Je weiter Sie die Qualität Richtung Maximum schieben, desto schmaler wird der Vorsprung von AVIF, und er kann sich umkehren. Nahezu verlustfrei ist nicht der Bereich, für den es abgestimmt wurde.

Die ehrliche Regel ist also enger als „AVIF gewinnt“: AVIF gewinnt bei Fotografien mit normalen Qualitätseinstellungen in vernünftigen Abmessungen. Das beschreibt zufällig die meisten Bilder auf den meisten Websites, weshalb es eine gute Voreinstellung ist — universell ist es nicht.

Der Haken, der kaum noch einer ist

Was AVIF davon abhielt, die naheliegende Wahl zu sein, war dies: Jeder moderne Browser kann eine AVIF-Datei problemlos anzeigen, aber eine direkt im Browser zu erzeugen funktionierte nur in Chrome und Edge zuverlässig. Firefox und Safari haben nie einen nativen AVIF-Encoder ausgeliefert, weshalb Werkzeuge, die für die Umwandlung auf das Canvas des Browsers setzen, dort schlicht ein anderes Ergebnis liefern oder AVIF ganz ausgrauen.

Das ist eine echte Einschränkung, aber eine Einschränkung dieses konkreten Ansatzes, nicht von AVIF. img-compress verlässt sich nicht auf den eingebauten Encoder des Browsers, sondern führt einen eigenen, nach WebAssembly kompilierten AVIF-Encoder aus — genauso wie bei jedem anderen Format. Das Ergebnis: AVIF-Umwandlung, die in Chrome, Firefox, Safari und Edge identisch funktioniert, vollständig auf Ihrem Gerät und ohne dass irgendetwas hochgeladen wird.

Und die Browser-Unterstützung?

Fürs Anzeigen sind beide durch. Jeder Browser, der noch Updates bekommt, stellt WebP und AVIF ohne Rückfallebene dar. WebP hat die längere Geschichte und funktioniert daher auch in einem längeren Schwanz aufgegebener Software, aber wenn Ihr Publikum irgendetwas Gepflegtes nutzt, ist das keine echte Unterscheidung mehr.

Wo es sehr wohl noch zählt, ist außerhalb des Browsers: Upload-Formulare, ältere Desktop-Anwendungen, Druckabläufe und Content-Management-Systeme akzeptieren WebP merklich öfter als AVIF, schlicht weil es länger existiert. Wenn etwas Ihre Datei ablehnt, ist das meist der Grund — und die Lösung heißt JPG oder PNG, nicht der Wechsel zwischen den beiden modernen Formaten.

Die Qualitätszahlen sind nicht vergleichbar

Daran scheitern fast alle, die die beiden fair vergleichen wollen. Qualität 80 in WebP und Qualität 80 in AVIF sind nicht dieselbe Einstellung. Es sind Eingaben für völlig verschiedene Encoder, und jeder bildet seine Skala auf eigene interne Entscheidungen ab. Beide auf 80 zu stellen und die entstehenden Dateigrößen zu vergleichen, sagt sehr wenig aus, denn Sie vergleichen mit ziemlicher Sicherheit zwei unterschiedliche visuelle Qualitäten.

Besonders die Skala von AVIF läuft tendenziell „heißer“: Eine bestimmte Zahl erzeugt dort oft ein sichtbar besseres Bild als dieselbe Zahl in WebP, wodurch die AVIF-Datei in einem naiven Vergleich unfair groß wirkt. Für eine belastbare Antwort gleichen Sie beide nach Aussehen an — nachjustieren, bis sie Ihnen in der Größe, in der Sie sie tatsächlich zeigen, gleichwertig erscheinen — und vergleichen erst dann die Bytes.

Derselbe Vorbehalt gilt für jeden Benchmark, den Sie lesen, einschließlich der 20 bis 30 Prozent weiter oben. Diese Zahlen stammen aus Studien, die zuerst sorgfältig die wahrgenommene Qualität angleichen. Ein Blogbeitrag, der beide Regler auf 75 stellt und die Differenz meldet, misst gar nichts.

Animation

Beide Formate beherrschen Animation, und beide zerlegen GIF: Animiertes WebP und AVIF sind regelmäßig ein Bruchteil der Größe bei weit besserer Farbtiefe, denn GIF steckt bei 256 Farben fest.

Zwischen den beiden ist animiertes WebP heute die sicherere Wahl. Die Unterstützung für animiertes AVIF ist dünner als die für statisches, und einige Player und Vorschauwerkzeuge, die ein stehendes AVIF anstandslos anzeigen, zeigen von einem animierten nur das erste Bild. Der Kompressionsvorteil ist real, das Risiko einer stillschweigend kaputten Animation aber ebenso, und bei kurzen Schleifen ist die absolute Ersparnis klein.

Wie Sie es an Ihren eigenen Bildern testen

Benchmarks mitteln über Bildsammlungen, die Ihren vermutlich in nichts ähneln. Zehn Minuten mit Ihren eigenen Dateien schlagen jeden Artikel, auch diesen:

1. Wählen Sie drei oder vier Bilder, die Ihre Arbeit wirklich repräsentieren: ein detailreiches Foto, eine flache Grafik und etwas dazwischen.
2. Wandeln Sie jedes in beide Formate und justieren Sie die Qualität, bis beide Fassungen in Anzeigegröße für Sie gleich aussehen.
3. Vergleichen Sie die Dateigrößen und notieren Sie, welche Inhaltsarten einen echten Abstand zeigen und welche sich nichts nehmen.

Meist stellt sich heraus, dass die Antwort genau so inhaltsabhängig ist, wie dieser Artikel es beschreibt: ein großer Abstand bei Fotos, ein deutlich schmalerer bei einfachen Grafiken und eine Umkehr bei allem Kleinen.

Entscheiden, praktisch

• Fotos fürs Web, und Sie kodieren nicht Hunderte auf einmal → AVIF. Das ist der Fall, in dem es am besten ist, und der häufigste.
• Screenshots, Logos, Strichzeichnungen, alles mit Text → WebP verlustfrei. AVIF ist hier das falsche Werkzeug.
• Favicons und winzige Avatare, etwa 40 Pixel und darunter → WebP, bei flachen Grafiken PNG. Unterhalb dieser Größe wiegt der Overhead von AVIF schwerer als seine Effizienz; ab 48 Pixeln gilt das nicht mehr.
• Ein sehr großer Stapel, bei dem die Durchlaufzeit zählt → WebP. Der Größenunterschied rechtfertigt selten, die Kodierzeit mit mehreren Hundert zu multiplizieren.
• Fotos archivieren, wo Speicherkosten dominieren → AVIF, und lassen Sie es so lange dauern, wie es dauert.
• Etwas hat Ihren Upload abgelehnt → die Antwort ist JPG oder PNG, nicht das andere moderne Format.

Selbst ausprobieren

Der JPG-zu-AVIF-Konverter von img-compress übernimmt Fotos, der PNG-zu-AVIF-Konverter arbeitet direkt mit Screenshots und Grafiken, und der WebP-zu-AVIF-Konverter beginnt bei einer WebP-Datei, wenn Sie herausholen wollen, was noch drin ist — alle drei laufen vollständig in Ihrem Browser. Müssen Sie in die andere Richtung, weil ein Zielsystem AVIF noch nicht kennt? Die Konverter AVIF zu JPG und AVIF zu PNG erledigen das ebenso direkt, und wenn es um breitere Akzeptanz statt maximaler Kompatibilität geht, ist der AVIF-zu-WebP-Konverter der kleinere Schritt zurück, der Transparenz erhält. Es wird nichts auf einen Server hochgeladen, und es funktioniert in jedem Browser gleich. Wenn Sie Formate grundsätzlicher gegeneinander abwägen, deckt WebP vs JPG vs PNG vs AVIF das ganze Bild ab.