WebP vs. AVIF

WebP (Google, 2010) und AVIF (Alliance for Open Media, 2019) sind die zwei führenden modernen Bildformate für das Web – beide übertreffen JPEG deutlich in Effizienz, unterscheiden sich aber in Kompressionsrate, Enkodierungsgeschwindigkeit, Feature-Unterstützung und Browser-Kompatibilität.

Rubrik: Ausgabeformate & Technische Standards · Unterrubrik: Bild-Dateiformate · Niveau: Einsteiger Dateiendung: .webp (WebP); .avif (AVIF) · Entwickler: Google (WebP); Alliance for Open Media (AVIF) · Eingeführt: 2010 (WebP); 2019 (AVIF)

Was sind WebP und AVIF?

WebP und AVIF sind die zwei modernsten, weit unterstützten Bildformate für Webanwendungen. Beide übertreffen JPEG und PNG erheblich in der Kompressionseffizienz und bieten Transparenz sowie Animation. Sie repräsentieren verschiedene Generationen der Codec-Entwicklung und verschiedene Abwägungen zwischen Effizienz, Geschwindigkeit und Kompatibilität.

Dieser Vergleichsartikel hilft Entwicklerinnen und Designern, die richtige Wahl für ihr Projekt zu treffen.

Erklärung

Technische Grundlagen

WebP:

• Basiert auf VP8-Video-Codec (verlustbehaftet) und angepasstem DEFLATE (verlustfrei)
• Von Google 2010 eingeführt, heute Teil des Open-Media-Ökosystems
• Lizenzfrei (Apache 2.0 Lizenz)

AVIF:

• Basiert auf AV1-Video-Codec, dem modernsten offenen Video-Kompressionsstandard
• Entwickelt von der Alliance for Open Media (Google, Apple, Mozilla, Netflix, Amazon, Microsoft)
• Lizenzfrei (royalty-free)

Kompressionseffizienz

Die Effizienz variiert stark je nach Bildtyp und Qualitätsstufe:

Fotos (typische Ergebnisse bei vergleichbarer visueller Qualität):

• JPEG Qualität 85: Basisreferenz
• WebP Qualität 80: ca. 25–35 % kleiner als JPEG
• AVIF Qualität 65: ca. 45–55 % kleiner als JPEG (30–25 % kleiner als WebP)

Grafiken/Illustrationen:

• PNG: Basisreferenz
• WebP verlustfrei: ca. 26 % kleiner als PNG
• AVIF verlustfrei: Ähnlich oder leicht kleiner als WebP verlustfrei (Vorteil geringer als bei Fotos)

Fazit Kompression: AVIF gewinnt bei verlustbehafteter Fotokompression deutlich. Bei verlustfreier Kompression ist der Unterschied kleiner.

Enkodierungsgeschwindigkeit

Dies ist einer der größten praktischen Unterschiede:

WebP:

• Schnelle Enkodierung: Typisch < 1 Sekunde für ein 4K-Foto bei Qualität 80
• Serverseitige On-the-Fly-Konvertierung gut möglich
• Low-Level-C-Bibliothek, effizient optimiert

AVIF:

• Langsame Enkodierung: Typisch 5–30 Sekunden für dasselbe Bild (je nach Qualitätseinstellung und CPU)
• Für großen Bildbestand praktisch nur mit Caching-Strategie realisierbar
• Neuere Encoder (libaom, rav1e, SVT-AV1) verbessern sich kontinuierlich; SVT-AV1 ist deutlich schneller als libaom bei ähnlicher Qualität

Praktische Konsequenz: AVIF-Deployment erfordert zwingend vorherige Konvertierung und CDN-Caching – On-the-Fly-Konvertierung bei hohem Traffic ist teuer.

Feature-Vergleich

Browser-Kompatibilität (Stand 2025)

WebP:

• Chrome: ab Version 23 (2012)
• Firefox: ab Version 65 (2019)
• Safari: ab Version 14 (2020)
• Edge: ab Version 18 (2018)
• Unterstützung: ~97 % aller Nutzer weltweit

AVIF:

• Chrome: ab Version 85 (2020)
• Firefox: ab Version 93 (2021)
• Safari: ab Version 16 (2022)
• Edge: ab Version 121 (2024)
• Unterstützung: ~90 % aller Nutzer weltweit (Stand 2025)

Deployment-Strategie

Die empfohlene Web-Praxis kombiniert beide Formate:

``html <picture> <source srcset="bild.avif" type="image/avif"> <source srcset="bild.webp" type="image/webp"> <img src="bild.jpg" alt="Bildbeschreibung" loading="lazy"> </picture> ``

Browser wählen automatisch das erste unterstützte Format. So profitieren AVIF-fähige Browser von optimaler Kompression, ältere Browser erhalten WebP, und als letzter Fallback bleibt JPEG.

Empfehlungen nach Anwendungsfall

Foto-intensive Websites (News, E-Commerce, Portfolio):

• Primär AVIF für maximale Kompression
• WebP als Fallback
• Enkodierung im Build-Prozess oder CDN (Cloudinary, Imgix, Bunny CDN)

Web-Apps und Dashboards:

• WebP verlustfrei für Grafiken, Icons und UI-Elemente
• AVIF für Fotos bei modernem Tech-Stack

Legacy-Systeme oder eingeschränkte Ressourcen:

• WebP als primäres modernes Format
• JPEG als Fallback

HDR-Fotografie und Wide-Gamut-Displays:

• AVIF als einzige Option mit nativer HDR/P3-Unterstützung

Animationen:

• Kurze Loops: Animiertes WebP (besser unterstützt als animiertes AVIF)
• Längere Animationen: MP4/WebM-Video ist deutlich effizienter als jedes Bildformat

Beispiele

1. E-Commerce-Plattform: Shopify und WooCommerce-Shops konvertieren alle Produktbilder zu AVIF (primär) und WebP (Fallback) über CDN-Dienste wie Cloudinary, mit JPEG als letztem Fallback.
2. Nachrichten-Website: Eine große Nachrichtenredaktion stellt AVIF für Desktop-Nutzer bereit (wo Enkodierungszeit kein Problem ist, da Bilder vorher verarbeitet werden) und WebP für mobile Nutzer.
3. Progressive Web App: Die Ressourcen-Bilder einer PWA werden im Build-Prozess (Webpack, Vite) automatisch zu WebP konvertiert; kritische Hero-Bilder werden als AVIF vorberechnet.
4. Bildergalerie eines Fotografen: Portfoliobilder werden in drei Varianten ausgeliefert (AVIF, WebP, JPEG), wobei AVIF auf modernen Macs und Smartphones die besten Ergebnisse zeigt.
5. Wissenschaftliche Visualisierung: HDR-Datensätze werden als AVIF mit 10-Bit-Farbtiefe veröffentlicht, da WebP kein HDR unterstützt.

In der Praxis

Konvertierungs-Tools:

• Squoosh (browser-basiert): Einfacher Vergleich, manuell
• ImageMagick: Kommandozeile, beide Formate
• cwebp / avifenc: Offizielle Referenz-Encoder
• FFmpeg: Stapelverarbeitung
• Cloudinary / Imgix: Automatische On-the-Fly-Konvertierung im CDN
• Vite / Webpack-Plugins: imagemin-webp, vite-imagetools für Build-Pipelines

Qualitätsäquivalenz (grobe Orientierung):

• JPEG 85 ≈ WebP 80 ≈ AVIF 65 (visuell)

Server-Konfiguration (Content Negotiation): Statt <picture>-Element kann der Server das Format anhand des Accept-Headers ausliefern. Nginx-Beispiel: Bei Accept: image/avif → AVIF servieren, bei Accept: image/webp → WebP, sonst JPEG.

Vergleich & Abgrenzung

Für eine reine Effizienz-Entscheidung gewinnt AVIF klar. Für pragmatische Produktions-Entscheidungen unter Berücksichtigung von Enkodierungsgeschwindigkeit, Workflow-Komplexität und Kompatibilität ist WebP oft die bessere Wahl – insbesondere für kleinere Projekte ohne CDN.

Für neue, gut ausgestattete Projekte mit CDN-Unterstützung: AVIF + WebP-Fallback. Für schnell umzusetzende Optimierungen: WebP reicht.

Häufige Fragen (FAQ)

Wann sollte ich AVIF statt WebP verwenden? AVIF ist die bessere Wahl, wenn maximale Dateigrößen-Reduktion wichtig ist, HDR- oder Wide-Gamut-Bilder geliefert werden, und der Workflow Vorproduktion aller Bilder erlaubt (kein On-the-Fly ohne Caching). WebP ist sinnvoller, wenn schnelle Enkodierung, breitere Tool-Unterstützung und geringere Komplexität gewünscht werden.

Welche Qualitätseinstellungen sind für WebP und AVIF optimal? WebP verlustbehaftet: Qualität 80–85 für Fotos, entspricht visuell JPEG 85–90 bei ~30 % kleinerer Datei. AVIF verlustbehaftet: Qualität 60–70 für Fotos, entspricht visuell JPEG 85 bei ~50 % kleinerer Datei. Zu niedrige Qualitätswerte erzeugen bei AVIF spezifische Artefakte (Farbschmieren, Detailverlust). Verlustfrei: WebP mit Kompression 4 oder AVIF verlustfrei für Grafiken – WebP ist dabei meist schneller zu enkodieren.

Weiterführend

• Kornel Leszczynski: „WebP vs AVIF: A Comparison" – siipo.la (2022)
• Google: WebP vs AVIF comparison – developers.google.com/speed/webp/docs/avif-comparison
• web.dev: „AVIF for Next-Generation Image Coding" (2021)
• caniuse.com/avif und caniuse.com/webp – aktuelle Browser-Unterstützungsstatistiken