Was ist AVIF?
AVIF (AV1 Image File Format) ist ein modernes Bildformat, das auf dem offenen AV1-Videocodec basiert — entwickelt von der Alliance for Open Media (AOMedia), einem Konsortium aus Google, Mozilla, Microsoft, Amazon, Netflix und anderen. Es ist der Nachfolger von WebP und der Konkurrent zu HEIC.
AVIF nutzt denselben HEIF-Container wie Apples HEIC (mehr dazu im Beitrag HEIC/HEIF erklärt), aber statt des lizenzpflichtigen HEVC-Codecs den royalty-free AV1-Codec. Das Ergebnis: nochmals 20–30 % kleinere Dateien als WebP bei gleicher visueller Qualität.
AVIF vs WebP vs JPG — der Vergleich
| Eigenschaft | AVIF | WebP | JPG |
|---|---|---|---|
| Relative Dateigröße (Foto) | ⭐⭐⭐⭐ Kleinst | ⭐⭐⭐ Klein | ⭐⭐ Mittel |
| Verlustbehaftet | ✅ | ✅ | ✅ |
| Verlustfrei | ✅ | ✅ | ❌ |
| Transparenz | ✅ Alpha | ✅ Alpha | ❌ |
| Animation | ✅ | ✅ | ❌ |
| HDR / 10-bit | ✅ | ❌ | ❌ |
| Chrome | ✅ ab 85 | ✅ | ✅ |
| Firefox | ✅ ab 93 | ✅ | ✅ |
| Safari | ✅ ab 16 | ✅ ab 14 | ✅ |
| Edge | ✅ ab 121 | ✅ | ✅ |
| Encoding-Geschwindigkeit | 🐢 Langsam | 🐇 Schnell | 🐇 Sehr schnell |
Die Stärken von AVIF
- Beste Kompression — bei typischen Webbild-Qualitätsstufen 20–50 % kleiner als WebP
- HDR und Wide Color Gamut — unterstützt 10-bit und höhere Farbräume
- Keine Lizenzgebühren — AV1 ist royalty-free, kein Patent-Risiko
- Guter Browser-Support — alle modernen Browser ab ~2021/2022
- Transparenz und Animation — alles, was WebP kann, nur effizienter
Die Schwächen von AVIF
- Langsame Kodierung — AVIF zu encodieren dauert deutlich länger als WebP oder JPG. Das macht es für serverseitige Bildoptimierung rechenintensiver.
- Keine Safari-Unterstützung für ältere Versionen — erst seit Safari 16 (2022). Nutzer mit iOS 15 und älter sehen kein AVIF.
- Uneinheitliche Tool-Unterstützung — nicht jedes Bildbearbeitungsprogramm kann AVIF öffnen oder exportieren
- Keine Browser-API für Encoding — die HTML5-Canvas-API kann kein AVIF ausgeben, nur WebP und JPG/PNG
💡 Wichtig: Weil der Browser-Canvas AVIF nicht encodieren kann, unterstützt JNRT Pixel aktuell kein AVIF-Output. Für AVIF-Encoding werden serverseitige Tools benötigt (Sharp, Squoosh CLI, avifenc). Für die verlustbehaftete Web-Optimierung im Browser bleibt WebP die richtige Wahl.
Wann AVIF verwenden?
AVIF ist sinnvoll, wenn:
- Du ein Framework wie Next.js verwendest —
next/imageliefert AVIF automatisch an unterstützende Browser - Du ein CDN mit automatischer Bildoptimierung nutzt (Cloudinary, Imgix, Vercel Image Optimization)
- Du maximale Performance brauchst und Encoding-Zeit kein Problem ist
- Du HDR-Bilder oder Wide-Color-Gamut-Inhalte lieferst
Wann WebP die bessere Wahl bleibt:
- Wenn schnelles clientseitiges Encoding wichtig ist (wie bei JNRT Pixel)
- Wenn du ältere Safari-Versionen unterstützen musst (iOS 15 und älter)
- Wenn du Assets direkt im Browser erstellen und herunterladen willst
- Wenn Encoding-Performance auf dem Server limitiert ist
AVIF mit dem picture-Element
Mit dem <picture>-Element kannst du AVIF mit WebP- und JPG-Fallback kombinieren — Browser wählen das beste Format, das sie unterstützen:
- AVIF: modernste Browser (Chrome 85+, Firefox 93+, Safari 16+)
- WebP: ältere moderne Browser
- JPG: universeller Fallback für alle anderen
So profitieren alle Nutzer automatisch vom besten verfügbaren Format. Wie sich das in die gesamte Ladezeit-Strategie einfügt, zeigt der Beitrag Core Web Vitals verbessern.
Häufige Fragen
Ist AVIF besser als WebP?
Bei der reinen Kompression ja — AVIF erzeugt bei gleicher Qualität oft 20–30 % kleinere Dateien und beherrscht zusätzlich HDR und 10-bit-Farbtiefe. Der Preis: deutlich langsameres Encoding und keine Encoding-Unterstützung in der Browser-Canvas-API. Für viele praktische Workflows bleibt WebP deshalb bequemer.
Welche Browser unterstützen AVIF?
Chrome (ab 85), Firefox (ab 93), Safari (ab 16, also iOS 16+) und Edge (ab 121) zeigen AVIF an. Nutzer auf sehr alten Systemen sehen es nicht — deshalb sollte AVIF immer mit WebP- oder JPG-Fallback über das picture-Element ausgeliefert werden.
Warum bietet JNRT Pixel kein AVIF-Encoding an?
Weil unsere Tools browser-lokal arbeiten und die Canvas-API des Browsers zwar JPG, PNG und WebP kodieren kann, aber kein AVIF. AVIF-Encoding braucht serverseitige Werkzeuge (Sharp, avifenc) oder große WebAssembly-Decoder. Warum wir bewusst nichts heimlich auf einen Server hochladen, steht im Werkstatt-Bericht zur Browser-lokalen Architektur.
Soll ich meine Bilder heute schon auf AVIF umstellen?
Wenn ein CDN oder Framework (z. B. Next.js) AVIF automatisch mit Fallback ausliefert: ja, ohne Risiko. Für manuelle Workflows ist WebP weiterhin die praktischere Wahl — schnelleres Encoding, breitere Tool-Unterstützung, kaum sichtbarer Größenunterschied im Alltag.
Fazit: Ist AVIF bereit für die Produktion?
Ja — mit Einschränkungen. Für Webprojekte, die Next.js oder ein CDN mit automatischer Formatoptimierung nutzen, ist AVIF heute schon optimal. Für manuelle Workflows oder clientseitige Bildverarbeitung ist WebP weiterhin die praktischere Wahl. Die Richtung ist klar — aber WebP bleibt der solide Standard für Projekte, die ohne Server-Pipeline auskommen.
Quellen
Can I use — AVIF-Browserunterstützung · Alliance for Open Media — AV1 · MDN — das picture-Element.