AVIF-Bildformat-Leitfaden: 30% kleiner als WebP

AVIF: Der neue König der Bildkomprimierung

AVIF (AV1 Image File Format) basiert auf der AV1-Videocodierungstechnologie und ist das nächste Bildformat nach WebP.

Format	Codec	Größe bei gleicher Qualität	Browser-Unterstützung
JPEG	libjpeg	Referenz	Alle
WebP	VP8	-25~35%	97%+
AVIF	AV1	-50~60%	92%+
PNG	deflate	3-5x JPEG	Alle

Schlüsseldaten: Bei gleicher SSIM-Qualität ist AVIF 20-30% kleiner als WebP und 50-60% kleiner als JPEG.

---

Warum ist AVIF so klein?

Vorteile der AV1-Codierung

1. Intra-Frame-Vorhersage: Nutzt die räumliche Redundanz innerhalb des Bildes
2. Transformationscodierung: Unterstützt Transformationsblöcke von 4×4 bis 64×64
3. Quantisierungsmatrix: Feinere Frequenzbereichsquantisierung
4. Film-Grain-Synthese: Trennt Filmkorn, wird mit Parametern statt Pixeln beschrieben

Verlustbehaftet vs. Verlustfrei

Modus	Größenvergleich	Verwendungszweck
Verlustbehaftet (CQ 30)	40% von JPEG	Fotos, Screenshots
Verlustbehaftet (CQ 50)	25% von JPEG	Vorschaubilder, Previews
Verlustfrei	50-60% von PNG	Icons, UI-Assets
Verlustbehaftet + Alpha	30% von PNG	Fotos mit Transparenz

---

Browserkompatibilität (2026)

Browser	AVIF-Unterstützung	Version
Chrome	✅	85+
Firefox	✅	93+
Safari	✅	16+
Edge	✅	85+
Samsung Internet	✅	15+
IE	❌	Nicht unterstützt

Abdeckung 92%+, kann sicher in Produktion verwendet werden.

Fallback-Strategie

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Foto" loading="lazy">
</picture>

Der Browser wählt das erste unterstützte Format in der Reihenfolge.

---

ToolsKu zur AVIF-Konvertierung verwenden

Bedienungsschritte

1. Bildformat-Konvertierungstool öffnen
2. Bild hochladen (unterstützt JPG, PNG, WebP, GIF)
3. Ausgabeformat AVIF auswählen
4. Qualitätsparameter anpassen:
   • Hohe Qualität (CQ 20-30): Nahezu verlustfrei, Größe um 40-50% reduziert
   • Ausgewogen (CQ 35-50): Geeignet für die meisten Szenarien, Größe um 50-60% reduziert
   • Hohe Komprimierung (CQ 55-70): Vorschaubilder/Previews, Größe um 60-80% reduziert
5. Konvertierungsergebnis herunterladen

Referenz der Konvertierungsergebnisse

Originalbild	Originalgröße	AVIF (CQ 35)	Komprimierungsrate	SSIM
Landschaftsfoto (4K)	8.2MB	1.1MB	87%	0.95
Porträtfoto	3.5MB	0.5MB	86%	0.94
UI-Screenshot	1.2MB	0.15MB	88%	0.97
Icon (PNG+Alpha)	45KB	12KB	73%	1.00

---

Besondere Fähigkeiten von AVIF

Alpha-Kanal (Transparenz)

AVIF unterstützt verlustbehaftet + Alpha-Kanal, was JPEG nicht bietet:

PNG (transparent) 45KB → AVIF (transparent, CQ 35) 12KB → Größe um 73% reduziert

HDR / Breiter Farbraum

AVIF unterstützt die beiden HDR-Transferfunktionen PQ und HLG sowie den breiten Farbraum BT.2020:

Eigenschaft	JPEG	WebP	AVIF
Farbtiefe	8-bit	8-bit	8/10/12-bit
Farbraum	sRGB	sRGB	sRGB / BT.2020
HDR	❌	❌	✅ PQ/HLG
Alpha	❌	✅	✅

Animation

AVIF unterstützt Animationssequenzen (AVIS), ähnlich wie animiertes WebP:

Animiertes GIF 2.5MB → Animiertes WebP 0.8MB → Animiertes AVIF 0.5MB

---

Kommandozeilen-Konvertierung

libavif (avifenc) verwenden

# Installation
# macOS: brew install libavif
# Ubuntu: apt install libavif-bin

# Grundlegende Konvertierung
avifenc input.jpg output.avif

# Qualität angeben (0-63, kleiner = höhere Qualität)
avifenc -q 30 input.jpg output.avif

# Verlustfreie Komprimierung
avifenc --lossless input.png output.avif

# Geschwindigkeit angeben (0-10, langsamer = bessere Komprimierung)
avifenc -q 35 -s 6 input.jpg output.avif

ImageMagick verwenden

# Zu AVIF konvertieren
magick input.jpg -quality 65 output.avif

# Stapelkonvertierung
magick mogrify -format avif -quality 65 *.jpg

---

Automatische Nginx-Konvertierung

# JPEG dynamisch zu AVIF konvertieren
map $http_accept $avif_suffix {
  "~*image/avif" ".avif";
}

server {
  location ~* ^/.+\.(png|jpg|jpeg)$ {
    add_header Vary Accept;
    try_files $uri$avif_suffix $uri =404;
  }
}

Wenn der Client AVIF unterstützt, wird automatisch die .avif-Version zurückgegeben (muss vorgeneriert werden).

---

Bewährte Methoden

1. <picture>-Fallback verwenden: Dreistufiger Fallback AVIF → WebP → JPEG
2. Qualitätsparameter 35-50: Optimaler Balancepunkt für die meisten Szenarien
3. Vorgenerieren statt dynamisch konvertieren: Zur Build-Zeit generieren, Server-CPU-Last vermeiden
4. Fotos mit AVIF, Icons mit SVG: Vektorgrafiken sind nicht für AVIF geeignet
5. Alpha-Bilder mit AVIF: PNG ersetzen, Größe um 70%+ reduzieren
6. CDN für automatische Konvertierung konfigurieren: Cloudflare Image Resizing / CloudFront unterstützen automatische AVIF-Ausgabe nach Accept-Header