Ein Update zur Einführung von AVIF im Ökosystem.
AVIF ist ein neues Bildformat, das aufgrund seiner hohen Komprimierungsraten, effizienten Leistung und breiten Akzeptanz im Web schnell an Beliebtheit gewinnt. AVIF ist ein offenes, lizenzfreies Bildformat, das auf dem AV1-Videocodec basiert, der von der Alliance for Open Media standardisiert wurde. In diesem Blogpost erhalten Sie einen Überblick darüber, wie AVIF im Ökosystem eingesetzt wird und welche Leistungs- und Qualitätsvorteile Entwickler von AVIF für Standbilder und Animationen erwarten können.
Was gibt es Neues im AVIF-Ökosystem?
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, nachdem Chrome die AVIF-Unterstützung in der stabilen Version hinzugefügt hatte, auf etwa ein Prozent.
Eine Reihe von Bild-CDNs wie Akamai, Cloudflare, Cloudinary und Imgix stellen heute AVIF-Bilder bereit. In einem Blogpost, in dem die AVIF-Unterstützung angekündigt wurde, berichtete Imgix von einer Einsparung der Dateigröße von 60 % im Vergleich zu JPEG und 35 % im Vergleich zu WebP. Diese Einsparungen bei der Dateigröße führen zu erheblichen Einsparungen beim Speicherplatz, aber auch dazu, dass Seiten schneller geladen werden, was zu kürzeren Largest Contentful Paint (LCP)-Zeiten 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 zur Reduzierung des LCP. Lighthouse ist ein hervorragendes Chrome-Entwicklertool, mit dem Sie Ihre Website testen und sehen können, wie viel Sie mit AVIF sparen würden.
WordPress ist die beliebteste Website-Plattform der Welt. Entwicklern stehen zahlreiche Plug-ins zur Verfügung, mit denen sie ihre Bilder in AVIF konvertieren können, z. B.:
Für Entwickler, die lieber selbst Hand anlegen, sind Tools wie ImageMagick und FFmpeg ein guter Ausgangspunkt.
AVIF-Codierungsgeschwindigkeit
Eine schnelle Codierung und eine hohe visuelle Qualität sind entscheidend für die Bereitstellung von Bildkomprimierung in großem Umfang. Die Geschwindigkeit der AVIF-Softwarecodierung 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), ist aber auch schneller zu codieren.
Das folgende Diagramm (höher ist besser) zeigt, wie die AVIF-Codierungsgeschwindigkeit im Vergleich zu anderen Bildformaten abschneidet. Codecs der vorherigen Generation wie WebP profitieren von den weniger komplexen (aber auch weniger effizienten) Komprimierungsalgorithmen. Mit einem Multithread-Codierungsschema erzielt AVIF bei gängigen Anwendungsfällen eine ähnliche Leistung und bietet gleichzeitig erhebliche Komprimierungsvorteile.
Entwickler, die an detaillierteren Vergleichen der Codierungsgeschwindigkeit und der visuellen Qualität interessiert sind, finden auf der Website Image Coding Comparisons reproduzierbare Benchmark-Ergebnisse.
Softwareimplementierungen für moderne Bildcodecs wie AVIF und WebP sind zwar für x86- und ARM-Prozessorarchitekturen optimiert, die Komprimierung großer Mengen von Bildern 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 dem Alveo U250 von AMD ausgeführt wird. Im Vergleich zum softwarebasierten avifenc bietet Pulsar-AVIF eine 7- bis 23-mal höhere Geschwindigkeit bei ähnlicher Komprimierungseffizienz.
- Testset: Kodak (24 Bilder mit 768 × 512)
- 24 Bilder gleichzeitig codieren (24 Prozesse)
- Jeder Softwarecodierungsprozess 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, mit denen sich responsivere Webseiten erstellen lassen. Dieses Mal geht es um animierte AVIFs, die bei Weitem die effizienteste Methode sind, um tolle Animationen im Web bereitzustellen.
Animiertes AVIF
Animierte GIF sind trotz ihres Alters von 35 Jahren immer noch ein beliebtes Format für animierte Bilder. Die größten Nachteile von animierten GIFs sind die Unterstützung von nur 256 Farben und die schlechte Komprimierung, die zu sehr großen Dateien führt und gleichzeitig die Auflösung oder Framerate für praktische Anwendungsfälle einschränkt. Im Gegensatz dazu ist die animierte AVIF-Codierung mit dem AV1-Videocodierungsschema identisch, was im Vergleich zu animierten GIFs zu einer erheblichen Einsparung bei der Dateigröße führt.
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 Testset betrug die durchschnittliche Einsparung bei der Dateigröße etwa 86 % im Vergleich zu den ursprünglichen GIF-Dateien und etwa 73 % im Vergleich zu animierten JPEG XL-Dateien*.
Chrome, Firefox und Safari unterstützen die Wiedergabe von animierten AVIF-Dateien.
FFmpeg ist ein Tool, mit dem Sie animierte AVIF-Dateien erstellen können. Hier ist 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 bessere Qualität und größere Dateien. 0 verwendet eine 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, kann aber auch rav1e oder SVT-AV1 verwenden, sofern verfügbar. Weitere Informationen zur Auswahl des Encoders und zur Anpassung der Codierungsparameter für Kompromisse zwischen Geschwindigkeit und Qualität finden Sie im AV1-Codierungsleitfaden von FFmpeg.
Ein weiterer Anwendungsfall ist das Umpacken eines AV1-Videos in AVIF, ohne die Originaldatei neu zu codieren. Das ist deutlich günstiger als das Decodieren/Codieren der ursprünglichen AV1-Datei und macht das AV1-Video für die Verwendung mit dem <img>-Element verfügbar. Dazu können Sie -c:v copy an FFmpeg übergeben.
ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"
Zusammenfassung
Die Verwendung von AVIF im Web hat seit der Einführung stetig zugenommen und wird von Browsern, Bild-CDNs, WordPress-Plug-ins und Codierungstools weitgehend unterstützt. Alles in allem 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 die kleinste Dateigröße, je nachdem, was ihr für eure Website bevorzugt. AVIF ist die effizienteste Methode, um Animationen im Web bereitzustellen. Wenn Sie Fragen, Kommentare oder Feature Requests haben, wenden Sie sich bitte an die av1-discuss-Mailingliste, die AOM-GitHub-Community oder das AVIF-Wiki.