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, 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.
- Kaum Tool-Unterstützung — viele Bildbearbeitungsprogramme können AVIF noch nicht ö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).
Wann AVIF 2025 verwenden?
AVIF ist sinnvoll wenn:
- Du 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.
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 Zukunft gehört AVIF — aber WebP bleibt 2025 der solide Standard für neue Webprojekte.