Ein Update zur Einführung von AVIF in der Branche
AVIF ist ein neues Bildformat, das aufgrund seiner hohen Komprimierungsraten, seiner effizienten Leistung und seiner breiten Akzeptanz im Web immer beliebter wird. AVIF ist ein offenes, lizenzfreies Bildformat, das auf dem von der Alliance for Open Media standardisierten AV1-Videocodec basiert. In diesem Blogpost erhalten Sie einen Überblick darüber, wie AVIF im Web verwendet wird und welche Leistungs- und Qualitätsvorteile Entwickler von AVIF für Standbilder und Animationen erwarten können.
Was gibt es Neues beim AVIF-System?
Seit der Einführung von AVIF in Chrome, Firefox und Safari ist die Nutzung von AVIF im Web stetig gestiegen. Fast alle Browser unterstützen AVIF heute.
Allein in Chrome stieg die AVIF-Nutzung in etwas mehr als einem Jahr auf etwa ein Prozent an, nachdem Chrome die AVIF-Unterstützung in der stabilen Version hinzugefügt hatte.
Eine Reihe von Bild-CDNs wie Akamai, Cloudflare, Cloudinary und Imgix stellen bereits AVIF-Bilder bereit. In einem Blogpost, in dem die AVIF-Unterstützung angekündigt wurde, gab Imgix eine Dateigrößenreduzierung von 60 % im Vergleich zu JPEG und 35 % im Vergleich zu WebP an. Diese Einsparungen bei der Dateigröße führen nicht nur zu erheblichen Einsparungen beim Speicherplatz, sondern auch dazu, dass Seiten schneller geladen werden und die Largest Contentful Paint (LCP)-Zeiten kürzer sind. LCP ist einer der Core Web Vitals und gibt an, wie schnell der größte Inhaltsblock auf der Seite geladen wurde. Die Verwendung moderner Codecs zur Komprimierung von Bildern ist eine der wichtigsten Techniken zur Reduzierung des LCP. Lighthouse ist ein hervorragendes Entwicklertool für Chrome, mit dem Sie Ihre Website testen und sehen können, wie viel Einsparungen Sie mit AVIF erzielen können.
WordPress ist die beliebteste Website-Plattform weltweit und es gibt eine Reihe von Plug-ins, mit denen Entwickler ihre Bilder in das AVIF konvertieren können, z. B.:
Für Entwickler, die gerne praktisch arbeiten, sind Tools wie ImageMagick und FFmpeg ein guter Ausgangspunkt.
AVIF-Codierungsgeschwindigkeit
Eine schnelle Codierungsgeschwindigkeit und eine hohe visuelle Qualität sind entscheidend für die Bildkomprimierung im großen Maßstab. Die Geschwindigkeit der AVIF-Softwarecodierung hat sich in den letzten zwei Jahren deutlich verbessert. Im Vergleich zu anderen modernen Standbildformaten erzeugt AVIF kleinere Dateien mit ähnlicher visueller Qualität (siehe folgende Grafik, je niedriger, desto besser). Außerdem ist die Codierung schneller.
Das folgende Diagramm (je höher, desto besser) zeigt, wie sich die Geschwindigkeit der AVIF-Codierung im Vergleich zu anderen Bildformaten darstellt. Codecs der vorherigen Generation wie WebP profitieren von den weniger komplexen (aber auch weniger effizienten) Komprimierungsalgorithmen. Mit einem mehrstufigen Codierungsschema erreicht AVIF bei gängigen Anwendungsfällen eine ähnliche Leistung und bietet gleichzeitig erhebliche Komprimierungsvorteile.
Für Entwickler, die an ausführlicheren Vergleichen der Codierungsgeschwindigkeit und der Bildqualität interessiert sind, finden Sie auf der Website Image Coding Comparisons (Vergleiche von Bildcodierungen) reproduzierbare Benchmark-Ergebnisse.
Softwareimplementierungen für moderne Bildcodecs wie AVIF und WebP sind zwar für x86- und ARM-Prozessorarchitekturen optimiert, aber das Komprimieren großer Mengen von Bildern kann sehr rechenintensiv sein. Eine Möglichkeit zur Reduzierung der Komprimierungskosten ist die Hardwarebeschleunigung. Bluedot hat einen hardwarebeschleunigten Pulsar-AVIF-Encoder entwickelt, der auf programmierbaren FPGAs wie dem Alveo U250 von AMD ausgeführt wird. Im Vergleich zur softwarebasierten avifenc-Version bietet Pulsar-AVIF eine 7- bis 23-fache Geschwindigkeitssteigerung bei ähnlicher Komprimierungseffizienz.
- Testsatz: Kodak (24 Bilder mit 768 × 512)
- 24 Bilder gleichzeitig codieren (24 Prozesse)
- Jeder Software-Codierungsvorgang wird mit 4 Threads ausgeführt. (-j 4)
Entwickler können den Pulsar-AVIF-Encoder mit virtuellen Maschinen in der Cloud wie der Azure NP-Serie bereitstellen.
AVIF-Funktionen für responsive Webseiten
AVIF bietet einige interessante Funktionen, die zu responsiveren Webseiten beitragen. Dieses Mal geht es um animierte AVIFs, die mit Abstand die effizienteste Methode sind, coole Animationen im Web bereitzustellen.
Animiertes AVIF
Animierte GIFs sind immer noch ein beliebtes Format für animierte Bilder, obwohl sie älter als 35 Jahre sind. Die größten Nachteile von animierten GIFs sind die Unterstützung von nur 256 Farben und die schlechte Komprimierung, die zu sehr großen Dateigrößen führt und gleichzeitig die Auflösung oder Framerate für praktische Anwendungsfälle einschränkt. Im Gegensatz dazu ist die animierte AVIF-Codierung in Wirklichkeit mit dem AV1-Videocodierungsschema identisch, wodurch die Dateigröße im Vergleich zu animierten GIF-Dateien erheblich reduziert wird.
Wir haben einen einfachen Benchmark durchgeführt, bei dem wir eine Reihe animierter GIFs sowohl in AVIF als auch in JPEG XL codiert haben. Im Testsatz betrug die Einsparung bei der durchschnittlichen Dateigröße im Vergleich zu den Original-GIF-Dateien etwa 86% und im Vergleich zu animierten JPEG XL-Dateien etwa 73 %.*
Chrome, Firefox und Safari unterstützen alle die Wiedergabe animierter AVIF-Dateien.
FFmpeg ist ein Tool zum Erstellen animierter AVIF-Dateien. Hier ist ein einfaches Beispiel für die Konvertierung eines GIFs in AVIF mit FFmpeg:
ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"
$CRF ist die gewünschte Ausgabequalität auf einer Skala von 0 bis 63. Niedrigere Werte bedeuten eine bessere Qualität und eine größere Dateigröße. 0 verwendet die verlustfreie Komprimierung. Beginnen Sie mit einem Wert von 23 für kleine animierte AVIF-Dateien.
FFmpeg verwendet standardmäßig libaom zum Codieren von AVIF-Bildern. Wenn verfügbar, kann aber auch rav1e oder SVT-AV1 verwendet werden. Weitere Informationen zu den Auswahlmöglichkeiten für Encoder und zur Optimierung der Codierungsparameter für einen Kompromiss zwischen Geschwindigkeit und Qualität findest du im AV1-Codierungsleitfaden von FFmpeg.
Ein weiterer Anwendungsfall ist die Umwandlung eines AV1-Videos in AVIF, ohne die Originaldatei neu zu codieren. Dies ist deutlich günstiger als die Decodierung/Codierung der ursprünglichen AV1-Datei und macht das AV1-Video für die Verwendung mit dem <img>-Element verfügbar. Dazu kannst du -c:v copy an FFmpeg übergeben.
ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"
Schlussfolgerungen
Die Nutzung von AVIF im Web hat seit der Einführung stetig zugenommen und wird von Browsern, Bild-CDNs, WordPress-Plug-ins und Codierungstools weithin unterstützt. Alles in allem ist AVIF eine gute Wahl für die Bereitstellung von Bildern im Web. AVIF lässt sich schnell codieren und decodieren und bietet gleichzeitig die beste Qualität oder die kleinste Dateigröße, je nachdem, was für Ihre Website am besten geeignet ist. AVIF ist die effizienteste Methode, Animationen im Web bereitzustellen. Wenn Sie Fragen, Kommentare oder Funktionsanfragen haben, wenden Sie sich an die Mailingliste zu av1-discuss, die AOM GitHub-Community und das AVIF-Wiki.