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.

Portrait

CloseUp-Portrait, 1024 x 1024 px, Dateigröße: 1,3 MB als PNG


Graustufenbild

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:

Zieh den blauen Schieberegler nach rechts bzw. links, um das Original mit der komprimierten Version zu vergleichen

Portrait
Portrait

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

Portrait
Portrait

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

Portrait
Portrait

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

Portrait
Portrait

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

Portrait
Portrait

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

Portrait
Portrait

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

Portrait
Portrait

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

Portrait
Portrait

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

Portrait
Portrait

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

Portrait
Portrait

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

Portrait
Portrait

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

Schmetterling
Schmetterling

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.

Hoher Farbkontrast
Hoher Farbkontrast

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.

Hochzeitsfoto
Hochzeitsfoto

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.

Literaturhinweise

Meinen Blog-Artikel zum Thema Bilder für Webauftritte aufbereiten findest du unter: https://web-einfach-machen.de/Blog/webproduktion/bilder-optimal-fuer-website-aufbereiten/
Online-Plattformen für die Konvertierung von Bildern: https://squoosh.app/, https://convertio.co/de/jpg-avif/, https://cloudinary.com/tools/jpg-to-avif, https://picflow.com/convert/jpg-to-avif.
High quality encoding of AVIF images using aomenc-av1: a small guide: https://old.reddit.com/r/AV1/comments/o7s8hk/high_quality_encoding_of_avif_images_using/
How to Install Homebrew on Mac: https://www.youtube.com/watch?v=IWJKRmFLn-g