WebP und AVIF sind die beiden Bildformate, die das moderne Web prägen. Beide komprimieren deutlich besser als JPEG und PNG, beide unterstützen Transparenz und Animation, und beide werden inzwischen breit unterstützt. Wenn du also deine Bilder modernisieren willst, welches solltest du tatsächlich verwenden?
Die ehrliche Antwort lautet oft "beide" — aber zu verstehen, wie sie sich unterscheiden, hilft dir, für jede Situation die richtige Wahl zu treffen. Dieser Leitfaden vergleicht WebP und AVIF bei den Dingen, die in der Praxis zählen: Kompression, Qualität, Browser-Support, Encoding-Tempo und Funktionen.
Die kurze Antwort
Wenn du möglichst kleine Dateien willst und ein modernes Publikum bedienst, gewinnt meist AVIF. Wenn dir die größtmögliche Reichweite und der einfachste, schnellste Workflow wichtig sind, ist WebP der sicherere Standard. Der beste Ansatz für die meisten Websites besteht darin, gar nicht zu wählen: Liefere AVIF mit einem WebP-Fallback und darunter einem JPEG- oder PNG-Fallback aus, und lass jeden Browser die beste Version herunterladen, die er unterstützt.
Der Rest dieses Leitfadens erklärt, warum.
Woher die beiden Formate stammen
WebP wurde von Google entwickelt und 2010 veröffentlicht, basierend auf dem Video-Codec VP8. Es hatte über ein Jahrzehnt Zeit zu reifen, was sich in seiner breiten Unterstützung und seinem stabilen Tooling zeigt.
AVIF erschien 2019 und basiert auf AV1, dem lizenzgebührenfreien Video-Codec der Alliance for Open Media — einer Gruppe, zu der Google, Apple, Microsoft, Mozilla und Netflix gehören. AV1 ist ein neuerer, ausgefeilterer Codec als VP8, und genau das ist die Wurzel von AVIFs Effizienzvorteil.
Kompression und Qualität
Bei gleicher visueller Qualität sind AVIF-Dateien typischerweise 20 bis 30 Prozent kleiner als WebP und ungefähr halb so groß wie ein vergleichbares JPEG. WebP wiederum ist meist 25 bis 34 Prozent kleiner als JPEG. Die Größenrangfolge von best zu schlechtest lautet also in der Regel: AVIF, dann WebP, dann JPEG.
AVIFs Vorteil ist bei niedrigen bis mittleren Qualitätsstufen am größten, wo sein moderner Codec Details bewahrt und die Blockbildung vermeidet, die ältere Formate unter starker Belastung zeigen. Es verarbeitet außerdem Farbverläufe und flache Farbflächen sauber und reduziert das Banding, das man manchmal in Himmel oder Schatten sieht. WebP bleibt hervorragend und ist für die überwältigende Mehrheit der Bilder mehr als gut genug, aber AVIF ist der Effizienzführer.
Browser-Support
Hier hat WebP nach wie vor die Nase vorn. WebP wird in jedem aktuellen großen Browser unterstützt und das seit Jahren, einschließlich Safari ab Version 14. Du kannst es nahezu jedem Publikum bedenkenlos ausliefern.
Auch die AVIF-Unterstützung ist inzwischen breit — Chrome, Firefox und Edge unterstützen es schon seit einiger Zeit, und Safari hat es in Version 16.4 hinzugefügt. Für die meisten Zielgruppen ist diese Abdeckung mehr als ausreichend, aber da ein kleiner Anteil älterer Geräte AVIF immer noch nicht anzeigen kann, ist ein Fallback ratsam. Das HTML-picture-Element macht das mühelos, sodass AVIFs etwas geringere Unterstützung selten ein echtes Hindernis darstellt.
Encoding-Tempo und Tooling
WebP encodiert schnell und verfügt überall über ausgereiftes, gut dokumentiertes Tooling. AVIF, das auf dem komplexeren AV1-Codec aufbaut, ist beim Encodieren langsamer und CPU-intensiver, bei höchster Kompressionsstufe mitunter erheblich. Bei einer Handvoll Bilder ist das nicht spürbar; bei der Verarbeitung von Tausenden Bildern in einer Build-Pipeline kann der Unterschied bei Zeit und Kosten ins Gewicht fallen.
Kurz gesagt: WebP ist operativ die leichtgewichtigere Wahl, während AVIF im Tausch gegen kleinere Dateien mehr Rechenleistung verlangt.
Funktionen
Beide Formate unterstützen verlustbehaftete und verlustfreie Kompression, volle Alpha-Transparenz und Animation. AVIF geht in einigen Bereichen weiter, die für hochwertige Bilder relevant sind: Es unterstützt High Dynamic Range, breite Farbräume und höhere Bittiefen bis zu 12-bit, während WebP auf standardmäßige 8-bit-Farben beschränkt ist. Wenn du HDR-Fotografie oder Artwork mit breitem Farbraum veröffentlichst, ist AVIF von beiden das einzige Format, das dies originalgetreu darstellen kann.
WebP vs. AVIF auf einen Blick
| Eigenschaft | WebP | AVIF |
|---|---|---|
| Basiert auf | VP8 (Google, 2010) | AV1 (AOMedia, 2019) |
| Typische Größe vs. JPEG | 25–34 % kleiner | Etwa 50 % kleiner |
| Qualität bei niedrigen Bitraten | Gut | Hervorragend |
| Browser-Support | Universell (Safari 14+) | Breit (Safari 16.4+) |
| Encoding-Tempo | Schnell | Langsamer, mehr CPU |
| Transparenz und Animation | Ja | Ja |
| HDR, breiter Farbraum, 12-bit | Nein | Ja |
Welches solltest du verwenden?
Verwende für die meisten Websites beide mit einer Fallback-Kette: AVIF zuerst, WebP an zweiter Stelle, JPEG oder PNG zuletzt. Jeder Besucher erhält das effizienteste Format, das sein Browser unterstützt, und auf älteren Geräten geht nichts kaputt.
Wenn du dich für ein einziges Format entscheiden musst, lass deine Priorität entscheiden. Wähle **WebP**, wenn breite Kompatibilität, schnelles Encodieren und ein einfacher Workflow am wichtigsten sind — es ist der sichere, praktische Standard. Wähle **AVIF**, wenn die Dateigröße oberste Priorität hat, etwa bei großen Hero-Bildern, Fotogalerien oder HDR-Inhalten, und du das langsamere Encodieren verkraften kannst. Hilfe bei der Entscheidung über alle Formate hinweg findest du unter So wählst du das richtige Bildformat fürs Web.
So erstellst du WebP- und AVIF-Dateien
Du kannst bestehende Bilder ganz ohne Software konvertieren. Für WebP: JPG zu WebP konvertieren oder PNG zu WebP. Für AVIF: JPG zu AVIF konvertieren oder PNG zu AVIF. Falls du jemals wieder ein universell kompatibles Format brauchst, kannst du auch WebP zu PNG konvertieren oder WebP zu JPG. Zum Hintergrund lies Was ist WebP und Was ist AVIF.