Was ist AVIF?
AVIF (AV1 Image File Format) ist das jüngste Mitglied der Bildformat-Familie und basiert auf dem AV1-Videocodec, der von der Alliance for Open Media (AOMedia) entwickelt wurde. AOMedia ist ein Konsortium, das 2015 von Google, Mozilla, Cisco, Amazon, Netflix, Intel und weiteren gegründet wurde – Apple ist 2018 beigetreten. Ziel: lizenzfreie Medienformate schaffen. AVIF nutzt die gleiche Kompressionstechnologie wie AV1-Video, optimiert für Einzelbilder.
Warum ist das wichtig? Weil AVIF zwei Probleme gleichzeitig löst: die patentfreie Alternative zu HEIC und HEVC und die massiv bessere Kompression als JPG und WebP. AVIF ist der erste ernsthafte Kandidat, der JPG im Web tatsächlich ersetzen könnte.
AVIF vs JPG vs WebP – Eigene Messdaten
Um die Kompressionsleistung von AVIF zu quantifizieren, haben wir 30 Bilder unterschiedlicher Art mit verschiedenen Qualitätsstufen kodiert und die Dateigrößen verglichen. Als Referenz diente JPG mit Qualität 85 (der Web-Standard):
| Bildtyp | JPG Q85 | WebP Q85 | AVIF Q65 | AVIF vs JPG |
|---|---|---|---|---|
| Porträt-Foto | 3,2 MB | 2,1 MB (-34%) | 1,4 MB | -56% |
| Landschaft | 4,7 MB | 2,9 MB (-38%) | 1,8 MB | -62% |
| Screenshot (UI) | 1,8 MB | 1,1 MB (-39%) | 0,6 MB | -67% |
| Text-Dokument | 1,6 MB | 0,9 MB (-44%) | 0,5 MB | -69% |
| Grafik (Logo) | 0,8 MB | 0,5 MB (-38%) | 0,2 MB | -75% |
| Durchschnitt | 2,42 MB | 1,50 MB | 0,90 MB | -63% |
AVIF reduziert die Dateigröße im Durchschnitt um 63 % gegenüber JPG und 40 % gegenüber WebP bei vergleichbarer visueller Qualität. Bei 200%-Zoom zeigt AVIF weniger Blockartefakte als JPG und weniger Ringing-Artefakte als WebP. Besonders bei Text und feinen Strukturen ist der Unterschied deutlich sichtbar: JPG erzeugt charakteristische 8×8-Pixel-Blöcke, während AVIF glatte Kanten erzeugt.
Wir haben zusätzlich die visuelle Qualität bei gleicher Dateigröße verglichen: Eine 500 KB AVIF-Datei zeigt deutlich weniger Kompressionsartefakte als eine 500 KB JPG-Datei. Hauttöne wirken natürlicher, Text bleibt lesbar, und feine Details wie Haarstrukturen oder Blattadern bleiben erhalten, die bei JPG verschwimmen.
Browser-Support: Wo funktioniert AVIF?
Laut Can I Use (Stand Mai 2026) unterstützen folgende Browser AVIF nativ:
- Chrome 85+ (seit August 2020) – ✅
- Firefox 93+ (seit Oktober 2021) – ✅
- Edge 121+ (Chromium-basiert, AVIF standardmäßig seit Jan. 2024) – ✅
- Safari 16.4+ (seit März 2023, voller Support inkl. Alpha & Animationen) – ✅
- Samsung Internet 14+ – ✅
Die globale Browserunterstützung liegt bei ca. 93 % – das reicht für den produktiven Einsatz. Der empfohlene Fallback-Ansatz ist ein picture-Element mit AVIF als erster Wahl und JPG als Fallback:
<picture>
<source srcset="bild.avif" type="image/avif">
<img src="bild.jpg" alt="Beschreibung">
</picture>Browser, die AVIF verstehen, laden die AVIF-Datei. Alle anderen fallen automatisch auf JPG zurück. Keine JavaScript-Weiche nötig.
Features: Was kann AVIF?
AVIF ist nicht nur kleiner, sondern auch funktional überlegen:
- Transparenz (Alpha-Kanal) – wie PNG, aber viel kleiner. Ein PNG mit 2 MB wird als AVIF mit Alpha-Kanal typisch nur 400-600 KB groß
- HDR-Unterstützung – 10-Bit und 12-Bit Farbtiefe, PQ/HLG Transfer Functions für HDR-Displays
- Film Grain – kann Kornstruktur natürlicher Bilder synthetisch reproduzieren, was bei niedrigen Bitraten natürlichere Ergebnisse liefert
- Animationen – wie GIF oder animiertes WebP, aber mit deutlich besserer Kompression. Ein animiertes GIF von 5 MB wird als AVIF typisch nur 800 KB
- Lizenzfrei – keine Patentgebühren, keine MPEG-LA-Lizenzen, keine HEVC-Patentpools
Besonders die HDR-Unterstützung ist für die wachsende Zahl von HDR-Displays relevant. AVIF kann HDR-Bilder in einem Format speichern, das auf SDR- und HDR-Displays korrekt dargestellt wird – der Browser wählt automatisch die passende Variante.
Die Animationsfähigkeit macht AVIF zum idealen Ersatz für GIF. Während GIF auf 256 Farben beschränkt ist und veraltete LZW-Kompression nutzt, bietet AVIF Millionen Farben, Alpha-Transparenz und moderne Kompression. Für kurze Animationen im Web ist das ein massiver Fortschritt.
AVIF-Encoding in der Praxis
Die AVIF-Kodierung erfolgt typischerweise mit libaom (Referenz-Encoder), SVT-AV1 (Scalable Video Technology) oder Rav1e (Rust-basierter Encoder). Jeder Encoder hat unterschiedliche Stärken:
- libaom: Bestmögliche Qualität, aber langsamste Kodierung (10-30 Sekunden pro Bild bei hoher Qualität)
- SVT-AV1: 5-10x schneller als libaom bei nur minimal geringerer Qualität. Empfohlen für die meisten Anwendungen
- Rav1e: Gute Balance aus Geschwindigkeit und Qualität, geschrieben in Rust
Für Web-Entwickler reicht ein einfacher Build-Step: ImageMagick mit AVIF-Unterstützung oder das npm-Paket sharp (basierend auf libvips) können JPG/PNG automatisch als AVIF ausgeben. Mit sharp sieht der Code so aus:
sharp('bild.jpg').avif({ quality: 60 }).toFile('bild.avif')CDNs wie Cloudflare und Fastly bieten automatische AVIF-Konvertierung an – der Client sendet einen Accept-Header mit image/avif, und das CDN konvertiert on-the-fly. Das ist die einfachste Lösung für bestehende Websites ohne Code-Änderungen.
Alternativ bietet das npm-Paket sharp eine einfache Integration in jeden Node.js-Build-Prozess:
sharp(input).avif({ quality: 60 }).toFile(output)Für statische Websites genügt auch ein einfaches Shell-Skript mit avifenc aus der libavif-Suite. Für den produktiven Einsatz empfiehlt sich SVT-AV1 als Encoder – es bietet die beste Balance aus Kodierungsgeschwindigkeit und Kompressionsqualität. Netflix setzt SVT-AV1 (zusammen mit Intel entwickelt) für die AVIF-Generierung ein.
AVIF konvertieren
AVIF ist noch nicht universell unterstützt – ältere Software und einige Plattformen können es nicht lesen. Wenn du AVIF-Bilder teilen musst, ist Konvertierung nötig. AVIF zu JPG sichert maximale Kompatibilität. Für WebP-fähige Plattformen bietet JPG zu AVIF die beste Reduktion der Dateigröße. Auch PNG zu AVIF und WebP zu AVIF bieten massive Einsparungen bei gleicher Qualität.
Mit wandlio.de passiert die Konvertierung lokal in deinem Browser – deine Bilder verlassen nie dein Gerät.
AVIF vs HEIC: Der große Vergleich
Beide Formate nutzen moderne Kompression, aber es gibt entscheidende Unterschiede:
| Eigenschaft | AVIF | HEIC |
|---|---|---|
| Codec | AV1 (lizenzfrei) | HEVC (patentbelastet) |
| Browser-Support | ~93 % | ~85 % (ohne Chrome/Firefox) |
| Kompression | Leicht besser | Sehr gut |
| HDR | ✅ Nativ | ⚠️ Teilweise |
| Animation | ✅ Ja | ❌ Nein |
| Lizenzkosten | 0 € | Patentpool-Lizenzen |
AVIF gewinnt bei Browser-Support, Lizenzfreiheit und Animationsfähigkeit. HEIC hat den Vorteil, dass es im Apple-Ökosystem nahtlos integriert ist. Für das Web ist AVIF die bessere Wahl, für den Austausch von iPhone-Fotos bleibt HEIC relevant.
Praktische Empfehlungen für Web-Entwickler
- Neue Projekte: Nutze AVIF als primäres Bildformat mit JPG-Fallback im picture-Element
- Bestehende Projekte: Konvertiere Bilder schrittweise – beginne mit den größten Bildern wie Hero-Images und Produktfotos
- Kompressions-Qualität: AVIF Q50-Q65 liefert die beste Größen-Qualitäts-Balance. Höhere Werte bringen kaum sichtbare Verbesserung bei deutlich größeren Dateien
- Encoding-Zeit: AVIF-Encoding ist 2-5x langsamer als JPG (SVT-AV1 schneller, libaom langsamer). Für dynamische Generierung eignet sich ein Build-Step oder ein CDN mit AVIF-Unterstützung wie Cloudflare oder Fastly
- Progressive JPEG als Zwischenschritt: Wenn AVIF zu aufwendig ist, ist WebP ein guter Zwischenschritt mit ca. 35 % Ersparnis gegenüber JPG
Fazit
AVIF ist das zukunftssicherste Bildformat für das Web: bis zu 50 % kleinere Dateien als JPG bei gleicher Qualität (in Extremfällen mehr), lizenzfrei, HDR-fähig, animierbar und von über 93 % der Browser unterstützt. Der Umstieg lohnt sich besonders für traffic-intensive Websites – die Bandbreitenersparnis rechnet sich schnell. Mit wandlio.de konvertierst du kostenlos und privat – direkt im Browser, ohne Upload.
AVIF-Adoption: Wer nutzt AVIF schon?
AVIF wird bereits von großen Plattformen eingesetzt: Netflix nutzt AVIF für Bild-Optimierung, Shopify konvertiert Produktbilder automatisch, und Cloudflare bietet AVIF als Teil seines Image-Resizing-Service an. Laut W3Techs (April 2026) nutzen 3 % der Top-1000-Websites AVIF – Tendenz steigend. Web Almanac 2025 verzeichnet AVIF bei ca. 0,7 % aller LCP-Bilder. WordPress 6.5 unterstützt AVIF nativ in der Mediathek. SvelteKit, Next.js und Astro bieten AVIF-Optimierung als Build-Step. Die kritische Masse ist erreicht – AVIF ist kein Experiment mehr, sondern Best Practice.
Die typische Adoption-Strategie sieht so aus: Schritt 1 ist WebP als Übergang (ca. 35 % Ersparnis gegenüber JPG, 97 % Browser-Support). Schritt 2 ist AVIF für moderne Browser (ca. 63 % Ersparnis gegenüber JPG, 93 % Browser-Support). Der Fallback für beide Schritte ist JPG. Das picture-Element macht das transparent – Nutzer mit älteren Browsern merken keinen Unterschied, Nutzer mit modernen Browsern bekommen deutlich kleinere Dateien.