Ein Update zur Einführung von AVIF in der Branche.
AVIF ist ein neues Bildformat, das aufgrund der hohen Komprimierungsraten, der effizienten Leistung und der weiten Verbreitung im Web immer beliebter wird. AVIF ist ein offenes, gebührenfreies Bildformat, das auf dem von der Alliance for Open Media standardisierten AV1-Video-Codec basiert. In diesem Blogpost erhalten Sie einen Überblick darüber, wie AVIF in die Plattform eingeführt wird und welche Leistungs- und Qualitätsvorteile Entwickler von AVIF für Standbilder und Animationen erwarten können.
Was ist neu in der AVIF-Umgebung?
Seit der Einführung von AVIF in Chrome, Firefox und Safari nimmt die Nutzung von AVIF im Web stetig zu. Derzeit unterstützen fast alle Browser AVIF.
Allein in Chrome stieg die Nutzung von AVIF innerhalb von etwas mehr als einem Jahr auf etwa ein Prozent, nachdem Chrome die Unterstützung von AVIF im stabilen Modus hinzugefügt hatte.
AVIF-Bilder werden derzeit von einer Reihe von Bild-CDNs wie Akamai, Cloudflare, Cloudinary und Imgix bereitgestellt. In einem Blogpost, in dem die Unterstützung von AVIF angekündigt wurde, reduzierte Imgix die Dateigröße im Vergleich zu JPEG um 60% und im Vergleich zu WebP um 35 %. Diese Einsparungen bei der Dateigröße führen zu erheblichen Einsparungen beim Speicherplatz, verhindern aber auch, dass Seiten schneller geladen werden, was zu kürzeren LCP-Zeiten (Largest Contentful Paint) führt. Der 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 zum Komprimieren von Bildern ist eine der wichtigsten Techniken, um den LCP zu reduzieren. Lighthouse ist ein großartiges Chrome-Entwicklertool, mit dem Sie Ihre Website testen und herausfinden können, welche Einsparungen Sie mit AVIF erzielen könnten.
WordPress ist die beliebteste Websiteplattform der Welt und es gibt eine Reihe von Plug-ins, mit denen Entwickler Bilder in AVIF konvertieren können, z. B.:
Für praxisorientierte Entwickler sind Tools wie ImageMagick und FFmpeg ein guter Ausgangspunkt.
Geschwindigkeit der AVIF-Codierung
Eine schnelle Codierungsgeschwindigkeit und eine hohe Bildqualität sind entscheidend für die Bereitstellung einer großen Bildkomprimierung. Die Codierungsgeschwindigkeit der AVIF-Software hat sich in den letzten zwei Jahren erheblich verbessert. Im Vergleich zu anderen modernen Standbildformaten erzeugt AVIF kleinere Dateien mit ähnlicher visueller Qualität (siehe folgende Grafik, niedriger ist besser), aber sie lassen sich auch schneller codieren.
Die folgende Tabelle (höhere Werte ist besser) veranschaulicht die AVIF-Codierungsgeschwindigkeit im Vergleich zu anderen Bildformaten. Codecs früherer Generationen wie WebP profitieren von den weniger komplexen (aber auch weniger effizienten) Komprimierungsalgorithmen. Mit einem Multi-Thread-Codierungsschema erreicht AVIF eine ähnliche Leistung für häufige Anwendungsfälle und liefert gleichzeitig erhebliche Komprimierungssteigerungen.
Für Entwickler, die an detaillierteren Codierungsgeschwindigkeiten und Vergleichen der Bildqualität interessiert sind, finden Sie auf der Website Vergleiche für Bildcodierungen reproduzierbare Benchmark-Ergebnisse.
Softwareimplementierungen für moderne Bild-Codecs wie AVIF und WebP sind für x86- und ARM-Prozessorarchitekturen optimiert, die Komprimierung großer Mengen von Bildern in großem Maßstab kann jedoch rechenintensiv sein. Eine Alternative zur Reduzierung der Komprimierungskosten ist die Hardwarebeschleunigung. Bluedot hat einen hardwarebeschleunigten Pulsar-AVIF-Encoder entwickelt, der auf programmierbaren FPGAs wie Alveo U250 von AMD läuft. Im Vergleich zu softwarebasiertem AVIF erzielt Pulsar-AVIF eine 7- bis 23-mal höhere Geschwindigkeit bei vergleichbarer Kompressionseffizienz.
- Test-Dataset: Kodak (24 Bilder mit 768 x 512)
- 24 Bilder gleichzeitig codieren (24 Prozesse)
- Jeder Software-Codierungsprozess wird mit 4 Threads ausgeführt. (-j 4)
Entwickler können den Pulsar-AVIF-Encoder mit virtuellen Cloud-Maschinen wie Azure NP-Series bereitstellen.
AVIF-Funktionen für responsive Webseiten
AVIF bietet einige interessante Funktionen, die zur Bereitstellung reaktionsschnellerer Webseiten beitragen. Dieses Mal geht es um animierte AVIFs, die bei Weitem die effizienteste Methode zur Bereitstellung cooler Animationen im Web sind.
Animiertes AVIF
Animierte GIFs sind 35 Jahre alt und immer noch ein beliebtes Format für animierte Bilder. Die größten Nachteile animierter GIFs sind die Unterstützung von nur 256 Farben und eine schlechte Komprimierung, die zu sehr großen Dateien führt und gleichzeitig die Auflösung oder Framerate für praktische Anwendungsfälle begrenzt. Im Gegensatz dazu ist die animierte AVIF-Codierung eigentlich mit dem AV1-Videocodierungsschema identisch, wodurch die Dateigröße im Vergleich zu animierten GIFs erheblich reduziert wird.
Wir führten einen einfachen Benchmark-Test durch, bei dem wir eine Reihe animierter GIFs sowohl in AVIF als auch in JPEG XL codiert haben. Im Test-Dataset betrug der Medianwert der Dateigrößeneinsparungen etwa 86% im Vergleich zu den ursprünglichen GIF-Dateien und etwa 73% im Vergleich zu animierten JPEG XL-Dateien*.
In Chrome, Firefox und Safari wird die animierte AVIF-Wiedergabe unterstützt.
FFmpeg ist ein Tool zum Erstellen animierter AVIF-Dateien. Hier ein einfaches Beispiel für die Konvertierung eines GIF 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 eine verlustfreie Komprimierung. Beginnen Sie mit dem Wert 23 für kleine animierte AVIF-Dateien.
FFmpeg verwendet zur Codierung von AVIF-Bildern standardmäßig libaom. Falls verfügbar, können aber auch rav1e oder SVT-AV1 verwendet werden. Weitere Informationen zu den Encoder-Optionen und zum Abstimmen der Codierungsparameter im Hinblick auf Kompromisse bei Geschwindigkeit und Qualität findest du im AV1-Codierungsleitfaden von FFmpeg.
Ein weiterer Anwendungsfall ist die Umwandlung eines AV1-Videos in eine AVIF-Datei, ohne die Originaldatei neu zu codieren. Dies ist wesentlich kostengünstiger als das Decodieren/Codieren der ursprünglichen AV1-Datei und macht das AV1-Video zur 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"
Ergebnisse
Die Verwendung von AVIF im Web wächst seit der Einführung stetig und wird von Browsern, Image-CDNs, WordPress-Plug-ins und Codierungstools weithin unterstützt. Insgesamt ist AVIF eine hervorragende 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 kleinste Dateigröße, je nachdem, was Sie für Ihre Website bevorzugen. AVIF ist die effizienteste Methode zur Bereitstellung von Animationen im Web. Wenn Sie Fragen, Kommentare oder Funktionsanfragen haben, wenden Sie sich bitte an die Mailingliste „av1-discuss“, die AOM GitHub-Community und das AVIF-Wiki.