Zwei Bildformate der nächsten Generation dominieren heute die Diskussion über Web-Performance: AVIF (AV1 Image File Format) und WebP (Googles Format von 2010, jetzt in v2). Beide schlagen JPEG deutlich, haben aber sehr unterschiedliche Kompromisse bei Komprimierung, Qualität, Encoding-Geschwindigkeit und Browser-Support.
<picture>. Bieten Sie zuerst AVIF für unterstützende Browser an; Fallback auf WebP; dann JPEG. So erhalten Sie optimale Komprimierung für jeden Besucher, ohne die Kompatibilität zu opfern.| Format | Größe vs JPEG | Encoding-Geschwindigkeit | Browser-Support | Verlustfrei | Animation |
|---|---|---|---|---|---|
| AVIF | 40–50 % kleiner | Langsam (5–20×) | ~85 % | ✓ | ✓ |
| WebP | 25–34 % kleiner | Schnell (1–3×) | 97 %+ | ✓ | ✓ |
| JPEG | Basislinie | Sehr schnell | Universell | ✗ | ✗ |
| PNG | 3–5× größer | Schnell | Universell | ✓ | ✗ |
AVIF stammt vom AV1-Videocodec ab (derselben Technik hinter dem effizientesten Streaming von Netflix und YouTube). Seine Komprimierung ist wirklich bemerkenswert — bei gleicher visueller Qualität sind AVIF-Dateien typisch 40–50 % kleiner als JPEG und 20–30 % kleiner als WebP.
AVIF glänzt besonders bei:
Die Hauptschwäche ist die Encoding-Geschwindigkeit. Ein AVIF aus einem JPEG zu erzeugen kann 5–20× länger dauern als ein WebP. Für einen großen E-Commerce-Katalog mit 50.000 Produktbildern wird das zu einem erheblichen Build-Zeit-Thema.
WebP ist seit 2010 Googles empfohlenes Format und erreichte um 2022 echte universelle Unterstützung, als Safari volle Unterstützung hinzufügte. Seine Vorteile:
WebPs Hauptschwäche ist, dass es bei reiner Komprimierungseffizienz leicht hinter AVIF zurückbleibt, besonders bei sehr hochwertigen oder HDR-Bildern.
| Browser | WebP | AVIF |
|---|---|---|
| Chrome 85+ | ✅ Voll | ✅ Voll (seit Chrome 85) |
| Firefox 65+ | ✅ Voll | ✅ Voll (seit Firefox 93) |
| Safari 14+ | ✅ Voll | ✅ Voll (seit Safari 16, Sep. 2022) |
| Edge 18+ | ✅ Voll | ✅ Voll (Chromium-basiert) |
| iOS Safari 14+ | ✅ Voll | ✅ Voll (iOS 16+) |
| iOS Safari 15 und älter | ✅ Voll | ❌ Nicht unterstützt |
| Internet Explorer | ❌ Nein | ❌ Nein |
<picture>-Element mit WebP/JPEG-Fallback nutzen. Fügen Sie immer einen Fallback hinzu.Best Practice ist, AVIF wo unterstützt auszuliefern und WebP oder JPEG als Fallback. Das <picture>-Element erledigt das automatisch:
Browser probieren jede <source> der Reihe nach und nutzen die erste unterstützte. Chrome-Nutzer erhalten AVIF. Safari-15-Nutzer erhalten WebP. IE11-Nutzer (falls noch vorhanden) erhalten JPEG.
Für die meisten Websites: Liefern Sie WebP als Hauptformat mit JPEG-Fallback. Das deckt 97 %+ der Browser bei exzellenter Komprimierung und schnellem Encoding ab.
Für performancekritische, bildlastige Seiten (E-Commerce, Foto-Portfolios, Nachrichtenseiten): Fügen Sie AVIF via <picture> als erste Quelle hinzu. Die 20–30 % zusätzliche Ersparnis kann LCP spürbar verbessern und Bandbreitenkosten im großen Maßstab senken.
Vermeiden Sie GIF völlig. Nutzen Sie stattdessen animiertes WebP oder <video autoplay loop muted playsinline>.
AVIF erreicht bei gleicher visueller Qualität eine 20–40 % bessere Komprimierung als WebP. Allerdings encodet WebP 5–10× schneller und hat nahezu universellen Browser-Support (97 %+) gegenüber ~85 % bei AVIF. Für die meisten Seiten ist WebP der sicherere Standard; fügen Sie AVIF als optionale Verbesserung via <picture> hinzu.
Ja, seit Safari 16 (September 2022 mit iOS 16 und macOS Ventura). Stand 2026 unterstützen alle großen modernen Browser AVIF, ältere iOS-Geräte mit Safari 15 oder älter jedoch nicht. Fügen Sie immer einen WebP- oder JPEG-Fallback hinzu.
Nutzen Sie beide via <picture>-Element: AVIF zuerst, WebP danach, JPEG als finalen Fallback. So erhält jeder Besucher das optimale Format ohne Kompatibilitätsverlust.
Optimieren Sie JPEG- und PNG-Dateien im Browser. Kein Upload, kein Konto, sofortige Ergebnisse.
Jetzt Bilder komprimieren →Zuletzt aktualisiert: April 2026. Browser-Support-Daten von caniuse.com. Komprimierungsraten sind repräsentative Mittelwerte über ein gemischtes Testset.