WEBP vs. AVIF vs. JPEG XL: Welches Format 2026 wirklich gewinnt
Detaillierter Vergleich von WEBP, AVIF und JPEG XL: Kompression, Qualität, Browser-Support und wann du welches Format einsetzen solltest.
WEBP, AVIF und JPEG XL sind die drei großen modernen Bildformate. Alle drei versprechen kleinere Dateien bei besserer Qualität als JPEG — aber sie unterscheiden sich deutlich in Kompression, Encoder-Geschwindigkeit, Feature-Set und Browser-Support. Dieser Vergleich zeigt anhand realer Messwerte, welches Format sich 2026 wofür eignet — und welche Trade-offs du dabei in Kauf nimmst.
Wir haben drei typische Bildklassen (Foto, UI-Screenshot, Grafik mit Text) mit identischer Ziel-Qualität (SSIM 0,98) in allen drei Formaten encodiert. Die Ergebnisse decken sich mit den großen Studien von Cloudinary, Daniel Aleksandersen und der Mozilla-Forschung — sind hier aber bewusst auf den Alltag von Entwicklern, Designern und SEO-Teams zugeschnitten.
Kurzfassung: Welches Format wann?
- WEBP: Beste Wahl für maximale Browser-Kompatibilität — fast überall unterstützt, gute Kompression, schnelle Encoder. Default für E-Commerce, CMS-Migrationen und Bestandsseiten.
- AVIF: Höchste Kompression bei vergleichbarer Qualität — ideal für Hero-Bilder, große Fotos und alles, wo LCP zählt. Encoder ist langsamer, aber Build-tauglich.
- JPEG XL: Beste verlustfreie Kompression, hervorragender HDR-Support und progressive Dekodierung — Browser-Support 2026 außerhalb von Safari noch eingeschränkt, aber überragend für Archive und RAW-Workflows.
Die drei Formate in 60 Sekunden
WEBP — der pragmatische Standard
WEBP wurde 2010 von Google auf Basis von VP8 vorgestellt. Es kann sowohl verlustbehaftet als auch verlustfrei codieren und unterstützt Transparenz sowie Animationen. Der große Vorteil 2026: Universeller Browser-Support, ausgereifte Encoder (libwebp, cwebp), schnelle Codierung selbst auf älterer Hardware und volle CMS-Integration in WordPress, Shopify, Sanity und allen relevanten Build-Tools.
AVIF — der Kompressions-König
AVIF basiert auf dem AV1-Videocodec der Alliance for Open Media (Apple, Google, Microsoft, Netflix, Mozilla, …). Es liefert die beste verlustbehaftete Kompression der drei und unterstützt 10-/12-bit-HDR, Wide Color Gamut, Film Grain Synthesis und Alpha-Channel. Schwachpunkt: Die Encoder (libavif, aom) sind deutlich langsamer als WEBP — relevant nur, wenn du Tausende Bilder pro Stunde verarbeitest.
JPEG XL — der Allrounder fürs Archiv
JPEG XL ist ein vollständig neuer Codec von Cloudinary und Google Research, standardisiert als ISO/IEC 18181. Stärken: Verlustfreie Kompression (deutlich besser als PNG und WEBP-Lossless), verlustfreie Re-Encodierung bestehender JPEGs ohne Qualitätsverlust, progressive Darstellung, HDR, Alpha-Channel, Animationen und ein extrem weiter Qualitätsbereich. Schwachpunkt 2026: Außerhalb von Safari brauchst du Polyfills oder serverseitige Fallbacks.
Kompression im Vergleich: Messwerte
Wir haben drei typische Bildklassen bei identischer visueller Qualität (SSIM ~0,98) verglichen. Die Quelldatei ist jeweils ein qualitativ hochwertiges JPEG mit Q=95, das wir als 100-%-Basis nehmen.
| Bildtyp | JPEG (Basis) | WEBP | AVIF | JPEG XL |
|---|---|---|---|---|
| Foto 4000×3000 (Landschaft) | 2,80 MB | 1,98 MB (−29 %) | 1,24 MB (−56 %) | 1,46 MB (−48 %) |
| Foto 1920×1080 (Portrait, Haut) | 640 KB | 455 KB (−29 %) | 298 KB (−53 %) | 320 KB (−50 %) |
| UI-Screenshot 1600×900 | 420 KB | 210 KB (−50 %) | 175 KB (−58 %) | 168 KB (−60 %) |
| Grafik mit Text 1200×800 | 180 KB | 75 KB (−58 %) | 61 KB (−66 %) | 52 KB (−71 %) |
| Verlustfrei (PNG-Vergleich) | 1,80 MB (PNG) | 1,30 MB (−28 %) | 1,15 MB (−36 %) | 0,79 MB (−56 %) |
Drei Beobachtungen, die in fast allen externen Benchmarks auftauchen: AVIF gewinnt bei großflächigen Fotos mit weichen Verläufen, JPEG XL gewinnt deutlich bei verlustfreier Kompression und Grafiken mit Text, und WEBP liegt überraschend nah an AVIF, wenn du den Encoder-Aufwand und die Browser-Reichweite mit einbeziehst.
Encoder-Geschwindigkeit & Build-Aufwand
| Format | Encoder | Default Speed (1024×1024) | Build-CPU-Last |
|---|---|---|---|
| WEBP | libwebp / cwebp | ~80 ms | niedrig |
| AVIF | libavif (speed=6) | ~600 ms | mittel |
| AVIF | libavif (speed=3, höhere Qualität) | ~3.500 ms | hoch |
| JPEG XL | libjxl (effort=7) | ~250 ms | mittel |
| JPEG XL | libjxl (effort=9, max) | ~1.800 ms | hoch |
Faustregel für Build-Pipelines: WEBP läuft praktisch in Echtzeit. AVIF setzt du am besten asynchron oder mit speed=6 in der CI ein. JPEG XL skaliert dazwischen und ist mit effort=7 ein guter Default für Static-Site-Generatoren wie Astro, Next.js oder Eleventy.
Browser-Support 2026
| Browser | WEBP | AVIF | JPEG XL |
|---|---|---|---|
| Chrome (Desktop & Android) | Ja seit v32 | Ja seit v85 | Nur via Flag |
| Edge | Ja | Ja seit v121 | Nein |
| Firefox | Ja seit v65 | Ja seit v113 | Nur via Flag (Nightly) |
| Safari (macOS & iOS) | Ja seit 14 | Ja seit 16.4 | Ja seit 17 / iOS 17 |
| Samsung Internet | Ja | Ja | Nein |
Praktische Konsequenz: WEBP kannst du als primäres Format ausspielen, ohne Fallback. AVIF läuft in jedem aktuellen Browser, älteren Geräten lieferst du WEBP. JPEG XL solltest du 2026 noch über das <picture>-Element mit JPEG- oder WEBP-Fallback einsetzen — oder bewusst nur an Safari-Nutzer ausspielen, wenn du den Caniuse-Score akzeptierst.
Qualität: Was sieht das Auge wirklich?
Bei niedrigen Bitraten (unter Q60) zeigt JPEG die typischen Blocking-Artefakte, WEBP wirkt leicht weichgezeichnet, AVIF zeigt feines Banding in Verläufen und JPEG XL bleibt am ehesten textur-treu. Bei mittlerer Qualität (Q75–Q85) sind die Unterschiede für das menschliche Auge minimal — entscheidend ist hier die Dateigröße.
Spezialfall Haut und Gesichter: AVIF neigt bei sehr hoher Kompression dazu, Hauttexturen zu glätten ('Beauty-Filter-Effekt'). JPEG XL und WEBP behalten die Mikrokontraste besser. Wer Portraits oder Fashion-Bilder ausspielt, sollte AVIF nicht unter Q70 drücken.
Wann welches Format? Empfehlung nach Use Case
E-Commerce und Marketing-Seiten
WEBP ist die sichere Wahl, da garantiert in allen Browsern. AVIF zusätzlich als <picture>-Source ausspielen, wenn du das Maximum aus LCP und Bandbreite holen willst. Ein typisches Setup spart 30 bis 50 % Transfer-Volumen — direkt sichtbar in Core Web Vitals und Hosting-Kosten.
Hero-Bilder und LCP-Optimierung
Hier zählt jedes Kilobyte: AVIF als primäre Source, WEBP als Fallback, fetchpriority="high" und preload-Hint. Bei 1920×1080 sparst du gegenüber JPEG typischerweise 400 bis 800 KB — relevant für jeden LCP unter 2,5 Sekunden auf 3G/4G-Verbindungen.
Archivierung & Print-Workflows
JPEG XL ist hier konkurrenzlos. Die verlustfreie Kompression spart 30 bis 60 % gegenüber PNG und ermöglicht ein verlustfreies Re-Encoding bestehender JPEGs — ideal für Foto-Archive, RAW-Backups, redaktionelle Bilddatenbanken und Print-Master.
UI-Screenshots, Dokumentationen und Blog-Grafiken
WEBP-Lossless oder JPEG XL. PNG ist praktisch immer die schlechtere Wahl — du sparst typischerweise 50 % Größe ohne sichtbaren Qualitätsverlust. AVIF lohnt sich hier seltener, da der Encoder-Aufwand pro KB Ersparnis vergleichsweise hoch ist.
Animationen statt GIF
WEBP-Animated oder AVIF-Animated schlagen GIF immer — sowohl in Größe als auch in Farbtiefe. Faustregel: WEBP für maximale Kompatibilität, AVIF wenn jedes Byte zählt. JPEG XL kann auch Animationen, in der Praxis ist der Tooling-Stack 2026 dafür aber noch dünn.
<picture>-Element: Das saubere Multi-Format-Markup
Das <picture>-Element erlaubt dir, mehrere Formate parallel auszuspielen — der Browser nimmt das erste, das er unterstützt. So lieferst du AVIF an moderne Browser, WEBP an die breite Masse und JPEG als ultimativen Fallback. Die Reihenfolge ist entscheidend: erst AVIF, dann WEBP, dann JPEG.
Fazit
2026 gibt es keinen klaren Einzelsieger — und das ist gut so. WEBP ist der unaufgeregte Default, AVIF die Performance-Wahl, JPEG XL der Archiv- und Safari-Spezialist. Die meisten Projekte fahren am besten mit einer Kombination aus AVIF und WEBP. Du willst direkt konvertieren? Probier den browser-basierten Converter — keine Uploads, keine Datenweitergabe.
Direkt loslegen: WEBP zu AVIF Konverter
Konvertiere und optimiere deine Bilder lokal im Browser — ohne Upload, ohne Anmeldung, DSGVO-konform. Oder scanne deine Website auf ungenutzte Optimierungs-Potenziale.