AVIF vs. WebP — die kleinere Datei ist nicht immer die richtige

Ich habe mal einen peinlichen Abend damit verbracht, dasselbe Hero-Bild als WebP und AVIF gegeneinander zu stellen, zwischen zwei Browser-Tabs hin und her zu springen und einen Unterschied zu erhaschen, den meine Augen tatsächlich sehen konnten. Das AVIF war 31 % kleiner. Ich konnte sie nicht auseinanderhalten. Ich saß da und fühlte mich, als hätte ich gratis Geld gefunden — und dann ließ ich die Charge über einen Ordner mit 200 Bildern laufen und erinnerte mich an den Haken.

AVIF ist die meiste Zeit die kleinere Datei. Das stimmt und ist gut zu wissen. Aber „kleiner" ist nur eine Spalte in der Tabelle, und in den anderen Spalten wohnt die Entscheidung wirklich.

Wo AVIF gewinnt

AVIF baut auf dem AV1-Videocodec auf und ist ein echt neuerer, cleverer Entwurf als WebP. Bei fotografischem Material landet es typisch 15–30 % kleiner als ein WebP bei gleicher optischer Qualität. Es meistert weiche Verläufe — Himmel, Haut, sanfte Schatten — ohne die blockigen Artefakte, die ältere Codecs darüber schmieren. Es unterstützt HDR und weiten Farbraum, was WebP nicht kann. Es behält einen vollen Alphakanal, genau wie WebP.

Ein paar grobe Zahlen aus dem erwähnten Ordner, alle bei einer Qualitätsstufe, wo ich keinen Unterschied erkennen konnte:

Schau dir die letzte Zeile noch mal an. Bei flachen, einfachen Grafiken kommt AVIF manchmal größer heraus. Seine Cleverness ist auf fotografische Komplexität abgestimmt, und in einer zweifarbigen Illustration hat es nichts zu kauen. WebP, oder sogar PNG, kann dort gewinnen.

Wo AVIF dich etwas kostet

Der Größengewinn ist nicht gratis. Zwei echte Preise:

Kodierzeit. AVIF komprimiert dramatisch langsamer. Beim selben Bild kann eine AVIF-Kodierung mehrfach länger dauern als ein WebP — manchmal der Unterschied zwischen „sofort" und „ein paar Sekunden pro Datei warten". Für ein einzelnes Hero-Bild egal. Für eine Charge von 200 spürst du jede Sekunde. WebP kodiert so schnell, dass es praktisch gratis ist.

Dekodierung und Unterstützung. Jeder Browser, den Leute wirklich nutzen, dekodiert AVIF inzwischen — Chrome seit 2020, Firefox nicht lange danach, Safari ab Version 16 Ende 2022. 2026 deckt das die überwältigende Mehrheit des echten Traffics ab. Aber „unterstützt" und „universell" sind nicht dasselbe Wort. WebP hat ein paar Jahre mehr Sättigung im Rücken, und es dekodiert auf schwachen Telefonen schneller, wo AV1-Dekodierung tatsächlich spürbar Akku und CPU kosten kann. Manche E-Mail-Clients und ältere eingebettete Webviews fassen AVIF weiter gar nicht an.

Die 20-Prozent-Frage

Die echte Entscheidung läuft also auf das hinaus: Zählen die zusätzlichen ~20 % für dieses Bild an diesem Ort?

Für ein großes Hero-Bild auf einer Landingpage — das eine schwere Asset, das jeder Besucher herunterlädt — ja. 100 KB von dem Ding abzuschaben, das dein erstes Rendern aufhält, ist eine langsamere Kodierung wert, die du nur einmal zahlst. Das ist der klarste Fall für AVIF, den ich kenne.

Für ein Miniaturbild-Raster, die inline-Screenshots eines Blogs oder alles, was als WebP schon unter etwa 50 KB liegt, lautet die Antwort meist nein. Zwanzig Prozent einer kleinen Zahl sind eine kleinere Zahl. Du hast Kodierzeit und ein Stück Kompatibilität eingetauscht, um Bytes zu sparen, auf die niemand wartete. WebP ist dort der ruhigere Standard.

Wann ich mir AVIF spare

Wenn eine Datei irgendwohin außerhalb eines modernen Browsers geht — ein E-Mail-Newsletter, ein altes CMS, das System eines Partners, das ich nicht kontrolliere —, zocke ich nicht mit AVIF. Ich nehme WebP, oder schlichtes JPG, wenn ich null Risiko will. Die kleinste Datei, die nicht rendert, ist nichts wert.

Und flache Grafiken, Logos oder Strichzeichnungen kodiere ich nicht in AVIF. Dafür ist der Codec nicht da, und ich habe oft genug zugesehen, wie er dabei gegen WebP verliert, um es sein zu lassen.

Wie ich tatsächlich entscheide

Mein ehrlicher Ablauf: Ich wandle das schwere fotografische Zeug in AVIF um und behalte das leichte, einfache und weit verteilte Zeug als WebP. Es ist nicht ein Format, um alle zu beherrschen. Es ist die Wahl pro Bild.

Wenn du den Vergleich selbst probieren willst, laufen beide hier in deinem Browser — WebP zu AVIF, um vorhandene WebP-Assets weiter zu quetschen, und PNG zu AVIF, um direkt von einem Master zu gehen. Nichts wird irgendwohin hochgeladen; die Kodierung passiert auf deiner Maschine, weshalb du AVIFs Langsamkeit auch aus erster Hand spürst. Das ist kein Fehler. Das ist der Codec, der mehr Arbeit für eine kleinere Datei leistet, direkt vor dir.

Lass dein eigenes Hero-Bild durch beide laufen. Wenn du den Unterschied nicht siehst und das AVIF merklich kleiner ist, hast du deine Antwort. Nimm nur nicht an, dass die Antwort für die nächsten 200 Dateien dieselbe ist.