Komprimierungseinstellung beim AVIF-Format im Vergleich
Um die Ladegeschwindigket von Bildern in Webauftritten zu optimieren, ist es nötig, eine angemessene Bildqualität bei möglichst kleiner Dateigröße zu erreichen. Auf dieser Seite findest du unterschiedliche Beispiele für Codierungen von Bildern in das AVIF-Format. Mithilfe des Schiebereglers in den untenstehenden Beispielen kannst du die verschiedenen Komprimierungseinstellungen direkt miteinander vergleichen.
Die komprimierten Bilder habe ich (wenn nicht anders angegeben) mit dem Kommandozeilenwerkzeug avifenc (Version: 0.9.3 und aom v3.3.0) erstellt. Avifenc ist kein Programm mit einer grafischen Benutzeroberfläche, sondern wird im Terminal deines Betriebssystems ausgeführt.
Die Ausgangsdateien
Zunächst die Originaldateien. Da wäre ein Portrait mit feinen Details in den Hauttönen und ein Graustufenbild mit einem problematischen Verlauf.
CloseUp-Portrait, 1024 x 1024 px, Dateigröße: 1,3 MB als PNG
Graustufenbild, 1024 x 1280 px, Dateigröße: 577 kB als Jpeg
Das Bild stammt von Leroy Skalstad auf Pixabay und hatte ursprünglich eine Auflösung von 5000 x 6249 Pixel. Durch einen leichten Verlauf im Hintergrund treten bei der Kodierung schnell unschöne Artefakte und Abstufungen, sogenanntes „Banding“ auf.
Beispiele für Komprimierungen
Starke Kompression, geringe Qualität
Bei einer starken Komprimierung bekommst du zwar eine sehr kleine Datei, aber leider auch eine entsprechend schlechte Qualität. Feinheiten auf der Wange und andere Details gehen in diesem Beispiel verloren. Die Datei ist mit folgendem Befehl im Terminal entstanden:
avifenc --min 0 --max 63 -a end-usage=q -a cq-level=38 -a tune=ssim input.png output.avif
und kommt auf eine Dateigröße von nur 9,7 kB
Hier die Erklärungen der Parameter:
- avifenc: Aufrufen des eigentlichen Programms
- „- -min 0“ setzt den minimalen Quantisierungswert auf 0, was der höchsten Qualität entspricht und „- -max 63“ setzt den maximalen Quantisierungswert auf 63, was der niedrigsten Qualität entspricht. Diese Einstellung erlaubt dem Encoder, für jeden Block im Bild den optimalen Quantisierungsparameter zwischen 0 und 63 zu wählen.
- -a cq-level=38: legt den Qualitätslevel auf einer Skala von 0 bis 63 fest. 0 = beste und 63 = schlechteste Qualität.
- -a end-usage=q: Wenn Du „cq-level“ nutzt, musst du auch den Parameter „-a end-usage=q“ explizit mit angeben. Diese Einstellung priorisiert eine konstante visuelle Qualität über das gesamte Bild.
- -a tune=ssim: sorgt für eine möglichst große visuelle Ähnlichkeit zwischen dem Original und dem komprimierten Bild
- input.png output.avif: definieren der Ein- und Ausgabe-Datei. Ersetze „input.png“ mit dem Namen deiner Quelldatei und „output.avif“ mit dem gewünschten Namen für die komprimierte AVIF-Ausgabedatei.
Zieh den blauen Schieberegler nach rechts bzw. links, um das Original mit der komprimierten Version zu vergleichen
Links: Original (1,3 MB) | rechts: AVIF mit (avifenc --min 0 --max 63 -a end-usage=q -a cq-level=38 -a tune=ssim, Dateigröße: 9,7 kB)
Gute Kompression bei akzeptabler Qualität
Mit 21 kB immer noch eine wirklich kleine Datei mit akzeptablen Qualitätseinbußen für durchschnittliche Anforderungen.
In diesem Befehl kommen neue Parameter hinzu. -j all sorgt dafür, dass alle Kerne der CPU für das Encoding genutzt werden. -s 3 verringert die Geschwindigkeit des Encoding, was mit einer etwas besseren Qualität belohnt wird. Und --ignore-icc verwirft ICC-Profile, falls im Ausgangsbild welche enthalten waren. Farbmanagement mit ICC-Profilen macht in der Druckvorstufe durchaus Sinn, ist aber bei Webauftritten unnötig. Zieh den Regler, um beide Bilder zu vergleichen
Links: Original (1,3 MB) | rechts: AVIF mit (avifenc -j all -s 3 --min 0 --max 63 -a tune=ssim --ignore-icc, Dateigröße: 21 kB)
Geringere Kompression und sehr hohe Qualität
Mit -a cq-level=18 eine Qualität, die vom Original kaum zu unterscheiden ist. Zieh den Regler, um beide Bilder zu vergleichen
Links: Original (1,3 MB) | rechts: AVIF mit (avifenc -j all -s 3 --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim --ignore-icc, Dateigröße: 53 kB)
Ein Graustufenbild mit problematischem Verlauf
In diesem Motiv ist der leichte Graustufenverlauf im Hintergrund schwer zu komprimieren. Es kommt schnell zu Abstufungen im Verlauf.
Starke Kompression, geringe Qualität
Die Komprimierungsartefakte und Kachelbildungen im Hintergrund sind leider deutlich sichtbar. Zieh den Regler, um beide Bilder zu vergleichen
Links: Original (577 kB) | rechts: AVIF (mit avifenc -j all --min 45 --max 63 -a end-usage=cq -a tune=ssim --ignore-icc), Dateigröße: 9,2 kB
Mittlere Kompression und Qualität
Weniger Artefakte, aber immer noch eine unschöne Kachelbildung im Verlauf. Zieh den Regler, um beide Bilder zu vergleichen
Links: Original (1,3 MB) | rechts: AVIF mit (avifenc -j all --min 0 --max 63 -a tune=ssim --ignore-icc, Dateigröße: 21 kB)
Geringere Kompression und höhere Qualität
Höhere Dateigröße, aber leider nach wie vor mit sichtbarer Stufenbildung im Verlauf. Zieh den Regler, um beide Bilder zu vergleichen
Links: Original (1,3 MB) | rechts: AVIF mit (avifenc -j all -s 4 -a end-usage=q --min 0 --max 63 -a cq-level=18 -a tune=ssim --ignore-icc, Dateigröße: 53 kB)
Verminderung der Artefakte im Verlauf durch Parameter „film-grain-test=14“.
Leichte Verminderung der Stufenbildung im Verlauf durch den Parameter „film-grain-test“, aber sichtbare Kornstruktur im Hintergrund. Zieh den Regler, um beide Bilder zu vergleichen
Links: Original (1,3 MB) | rechts: AVIF mit (avifenc -a tune=psnr -a film-grain-test=14, Dateigröße: 110 kB)
Finale Lösung: starke Reduzierung der Artefakte im Verlauf
Starke Verminderung der Stufenbildungen durch die Parameter „-d 10 -a color:enable-dnl-denoising=0 -a color:denoise-noise-level=5“.
Die bereits im Original vorhandene leichte Stufenbildung im Hintergrund des Bildes ist jetzt kaum noch zu erkennen.
Der Parameter "-a color:denoise-noise-level=5" steuert in der Kodierung die Stärke der Rauschsynthese, hier wird ein leichtes synthetisches Rauschen zum Bild hinzugefügt. Diese Einstellung wird oft in Kombination mit "-a color:enable-dnl-denoising=0" verwendet, um ein kontrolliertes Maß an Rauschen im Bild zu erhalten. „-a color:enable-dnl-denoising=0“ deaktiviert das sogenannte „DNL-Denoising“ (Deblocking and Noise Level Denoising). Diese Funktion wird verwendet, um Rauschen und Blockartefakte im Bild während der Kodierung zu reduzieren. Diese Parameter reduzieren Banding-Effekte besonders in Bereichen mit sanften Farbverläufen.
Außerdem solltest du die Bit-Tiefe auf 10 stellen „-d 10“ (für 10-bit-Ausgabe), um die Kodierungsqualität zu optimieren.
Zieh den Regler, um beide Bilder zu vergleichen
Links: Original (1,3 MB) | rechts: AVIF mit (avifenc -j all -s 3 --min 0 --max 63 -a end-usage=q -a cq-level=32 -d 10 -a color:enable-dnl-denoising=0 -a color:denoise-noise-level=5 -a tune=psnr, Dateigröße: 73 kB)
Verlauf per Bildbearbeitung verrauscht
Falls alle Stricke reissen und sich trotz Feintunings die Stufenbildung in einem kritischen Motiv bei der AVIF-Kodierung nicht vermeiden lässt, kannst du immer noch in das Ausgangsbild selber eingreifen. In dieser Variante habe ich den Hintergrund in einer Bildbearbeitung mit einem kräftigen Rauschen versehen. Zieh den Regler, um beide Bilder zu vergleichen
Links: Original (1,3 MB) | rechts: AVIF mit (avifenc -a tune=psnr, Dateigröße: 150 kB)
Vergleich AVIF vs. WebP
Neben AVIF gibt es in Webproduktionen noch andere Dateiformate für Bilder wie Jpeg, PNG oder WebP. Lass uns jetzt noch AVIF mit diesen anderen Formaten vergleichen. Hier ein Qualitätsvergleich zweier Bilder mit ähnlicher Dateigröße. In der WebP-Datei rechts kannst du leichte Unschärfen zum Beispiel in den Haaren oder Augen, sowie Verluste in den Details auf der Wange erkennen. Zieh den Regler, um beide Bilder zu vergleichen
Links: AVIF (53 kB) | rechts: WebP exportiert aus Gimp mit Qualitätsstufe 79, Dateigröße: 54 kB
Vergleich AVIF vs. Jpeg
Und nun noch der Vergleich von AVIF mit Jpeg bei ähnlicher Dateigröße. Details in den Hauttönen bleiben größtenteils erhalten, aber in den dunklen Bereichen kann man typische Jpeg-Artefakte und Kachelbildungen erkennen. Zieh den Regler, um beide Bilder zu vergleichen
Links: AVIF (53 kB) | rechts: Jpeg exportiert aus Gimp mit Qualitätstufe 45, Dateigröße: 52 kB
Feine Strukturen
Die Komprimierung eines Bildes ist auch vom Motiv abhängig. Hier ein Beispiel mit feinen Strukturen. Einige Details wie z.B. die Härchen am Bein des Schmetterlings gehen bei einem cq-level von 42 verloren. Zieh den Regler, um beide Bilder zu vergleichen
Links: Original (1,4 MB) | rechts: AVIF (mit avifenc -j all -s 3 --min 0 --max 63 -a end-usage=q -a cq-level=42 -a tune=ssim), Dateigröße: 20 kB
Motive mit hohen Farbkontrasten
Ein farbenfrohes Motiv wie dieses hier ist eine echte Herausforgerung für den Encoder. Hier ist die Datei nicht so einfach zu komprimieren und erfordert eine bessere Qualitätsstufe, was sich entsprechend in einer höheren Dateigröße bemerkbar macht. Zieh den Regler, um beide Bilder zu vergleichen.
Links: Original (2 MB) | rechts: AVIF (avifenc -j all -s 3 --min 0 --max 63 -a end-usage=q -a cq-level=46 -a tune=ssim ), Dateigröße: 48 kB
Helle und dunkle Bereiche
Ein schwieriges Motiv mit Details in hellen und dunklen Bereichen, die nicht verloren gehen sollten. Zieh den Regler, um beide Bilder zu vergleichen.
Links: Original (1,1 MB) | rechts: AVIF (mit avifenc -j all -s 3 --min 0 --max 63 -a end-usage=q -a cq-level=30 -a tune=ssim), Dateigröße: 26 kB
Fazit
Das AVIF-Format ist bei Bildern in Webauftritten zur Zeit die beste Wahl. Die Browserunterstützung liegt im Moment (März 2025) bei 94%, aber mit dem picture-Element hast du eine gute Fallback-Lösung für ältere Browser.
Die AVIF Dateien kannst du im Terminal sowohl mit ImageMagic wie auch mit avifenc erstellen. Avifenc ist speziell für die Erstellung von AVIF-Bildern entwickelt und bietet daher oft bessere Optimierungsmöglichkeiten und Kontrolle über die AVIF-spezifischen Einstellungen. Alternativ kannst du AVIF-Dateien auch mit Gimp erzeugen. Daneben stehen dir auch Online-Plattformen für die Konvertierung zu Verfügung.
