WebP, AVIF oder JPEG
Drei Formate, drei Kompromisse und im Netz reichlich selbstbewusste Ratschläge, die seit 2021 nicht aktualisiert wurden. Hier der tatsächliche Stand.
Die Kurzfassung
Nimm WebP für fast alles im Web. Deutlich kleiner als JPEG, überall unterstützt und schnell zu kodieren.
Nimm AVIF, wenn die Dateigröße wirklich wichtiger ist als alles andere und du das Ergebnis prüfen kannst. Nochmals kleiner, aber auf beiden Seiten langsamer.
Nimm JPEG für alles, was deine Website verlässt — E-Mail, Kundendateien, Druck, Uploads zu Plattformen, deren Unterstützung du nicht prüfen kannst.
Wie die Zahlen aussehen
Bei einem typischen Foto und vergleichbarer Qualität ungefähr:
- JPEG — die Basis, an der alles gemessen wird.
- WebP — 25–35 % kleiner.
- AVIF — nochmals rund 20 % kleiner als WebP, also etwa die Hälfte von JPEG.
Das sind Durchschnitte, deine Bilder werden abweichen. Flächige Grafiken begünstigen WebP stärker, rauschige detailreiche Fotos verringern den Abstand. Zählen tut nur die Zahl, die du auf deinen eigenen Bildern misst — deshalb lohnt es sich, eine Handvoll umzuwandeln und zu vergleichen, bevor du eine ganze Bibliothek anfasst.
Browser-Unterstützung, ehrlich betrachtet
WebP ist erledigt. Chrome, Firefox, Edge, Safari und Opera unterstützen es, Desktop wie Mobil. Safari war die letzte relevante Lücke und hat 2020 nachgezogen. Solange du keine Browser von vor 2020 bedienen musst, kannst du WebP ohne Fallback ausliefern.
AVIF wird breit, aber nicht universell unterstützt. In aktuellem Chrome, Firefox und Safari gut, der lange Schwanz älterer Geräte und eingebetteter Browser fehlt teilweise noch. Wenn du AVIF einsetzt, dann über ein <picture>-Element mit WebP- oder JPEG-Fallback statt allein.
Der Haken an AVIF
Die Kompression von AVIF ist objektiv besser. Der Preis ist Zeit, an beiden Enden.
Das Kodieren ist deutlich langsamer als bei WebP — spürbar, wenn du einen Stapel verarbeitest. Wichtiger noch: das Dekodieren ist ebenfalls langsamer, und das passiert auf dem Gerät deines Besuchers. Auf einem schwachen Handy kann ein großes AVIF so lange zum Dekodieren brauchen, dass ein Teil des Übertragungsvorteils wieder verloren geht.
Deshalb ist AVIF nicht einfach die richtige Antwort. Bei einem kleinen Bild ist die absolute Ersparnis gering und die Dekodierkosten sind real. Bei einem großen Hero-Bild auf einem schnellen Gerät gewinnt AVIF klar.
Eine Regel, die trägt
Standardmäßig WebP bei Qualität 75. Wandle zusätzlich deine schwersten Bilder in AVIF um und vergleiche — ist die Ersparnis bei genau diesen Dateien groß, liefere sie über ein <picture>-Element aus. JPEG-Originale behältst du für alles, was die Seite verlässt.
So holst du den größten Teil des möglichen Nutzens, ohne deine Asset-Pipeline in ein Forschungsprojekt zu verwandeln.