AVIF erklärt — wann 30 % kleiner als WebP den Fallback rechtfertigt
Tomoda HinataTool-Autor & MaintainerVeröffentlicht am 26. Apr. 2026ca. 6 Min. Lesezeit
AVIF verpackt einen AV1-Keyframe in einen HEIF-Container und ist bei gleicher Qualität ~20–30 % kleiner als WebP. Lücken bleiben — Outlook Desktop, Edge-Mail-Vorschau, ältere Android-Webview, macOS-Mail-Inline. Produktionssicher gehört AVIF hinter ein `<picture>`-Element mit WebP-Fallback, nicht alleinstehend.
Im Leitfaden verwendete Tools
Was ist AVIF technisch?
AVIF speichert einen AV1-Intra-Frame in einem HEIF-Container — derselbe Container wie iPhone HEIC. AV1 ist der lizenzfreie Nachfolger von VP9/HEVC. Sein Werkzeugkasten (variable Blockgrößen, anspruchsvolle Transformationen, fortgeschrittene Entropiecodierung) erlaubt 20–30 % zusätzliche Einsparung gegenüber WebP.
Browser-Support — wo scheitert AVIF?
Native Decodierung: Chrome 85 (2020), Firefox 93 (2021), Safari 16.4 (2023), Edge 121 (2024). ~92 % globaler Traffic. Lücken bei Outlook Desktop, Edge Mail, alten Android-Webviews, macOS 13 Mail.
Das `<picture>`-Fallback-Muster
AVIF zuerst, WebP zweite Quelle, JPG/PNG als `<img>`-Quelle. Browser wählen die erste decodierbare. Modern → AVIF, älter → WebP, ältester → JPG, ohne JS.
Wann lohnt AVIF?
Drei Sweet Spots: Hero auf Hochlast-Sites, E-Commerce-Galerien, Fotoportfolios. Drei Mal überdimensioniert: Low-Traffic-Blogs, E-Mail-Vorlagen, kurzlebige SNS-Uploads.
Encoding-Kosten: Build vs Runtime
Q60 ~10× langsamer als JPG Q82. 100 Produktbilder = 2–3 Min auf Workstation. Edge-Funktionen mit 10s Budget timen aus. Im Build encodieren, Decoding ist schnell (<50 ms).
Schritte
ca. 2 Min.Master wählen
Wenn möglich PNG/RAW/TIFF. JPG-only auch ok.
AVIF-Konverter öffnen
Datei droppen, Standardqualität 60.
Encoden
5–15 s pro Bild.
`<picture>`-Fallback
AVIF zuerst, WebP zweite, JPG als `<img>`-Source.
| Format | Größe | Encodingzeit (M2) | Browser-Support 2026 |
|---|---|---|---|
| JPG Q82 | 245 KB | 0,1 s | 100 % |
| WebP Q82 | 165 KB | 0,4 s | 98 % |
| AVIF Q60 | 115 KB | 4,2 s | 92 % |
Häufig gestellte Fragen
Unterstützt AVIF Transparenz?
Ja, voller Alpha-Kanal mit 10-Bit-Alpha.
Animiertes AVIF?
Ja (AVIS), Browser-Support enger als statisches AVIF; Animation heute besser per WebP.
HDR?
Ja, 10/12-Bit AVIF + HDR10-Metadaten.
Mehrere Auflösungen?
`<picture>` + srcset/sizes auf den `<source>`-Elementen.
Ersetzt AVIF JPG?
Nein, JPGs Universalkompatibilität bleibt.
Liegt es am Browser, dass Encoding langsam ist?
Nein, der AV1-Codec selbst ist teuer.
Jetzt ausprobieren
Ultra-light images with the modern AVIF format
AVIF ConverterDieser Artikel enthält KI-Übersetzungen. Bitte Fehler melden.