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.
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.
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
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)
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)
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)
In diesem Motiv ist der leichte Graustufenverlauf im Hintergrund schwer zu komprimieren. Es kommt schnell zu Abstufungen im Verlauf.
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
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)
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)
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)
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)
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)
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
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
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
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
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
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.
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