Wir schreiben häufig über die Unmenge an Bildern auf Websites. Tools wie Lighthouse zeigen auch, wenn das Laden von Bildern negative Auswirkungen auf die Nutzerfreundlichkeit hat, z. B. wenn sich die Ladezeit verlängert oder wichtigere Ressourcen weniger Bandbreite verbrauchen. Eine Möglichkeit, dies zu beheben, besteht darin, die Dateigröße von Bildern durch eine moderne Komprimierung zu reduzieren. Eine neue Option für Webentwickler ist das AVIF-Bildformat. In diesem Blogpost werden die neuesten Aktualisierungen der Open-Source-Tools für AVIF vorgestellt, die Codierungsbibliotheken libaom und libavif vorgestellt und ein Tutorial zur Verwendung dieser Bibliotheken für die effiziente Codierung von AVIF-Bildern enthalten.
AVIF ist ein Bildformat, das auf dem AV1-Video-Codec basiert und von der Alliance for Open Media standardisiert wurde. AVIF bietet im Vergleich zu anderen Bildformaten wie JPEG und WebP deutlich bessere Komprimierungsvorteile. Die genauen Einsparungen hängen zwar von den Inhalten, den Codierungseinstellungen und dem Qualitätsziel ab, aber wir und andere Unternehmen konnten im Vergleich zu JPEG mehr als 50% sparen.
Darüber hinaus bietet AVIF Codec- und Containerunterstützung für neue Bildfeatures wie High Dynamic Range und Wide Color Gamut, Filmkörnungssynthese und progressive Decodierung.
Neuerungen
Seit der Einführung der AVIF-Unterstützung in Chrome M85 wurde die AVIF-Unterstützung im Open-Source-Ökosystem in einer Reihe von Fronten verbessert.
Libaom
Libaom ist ein Open-Source-AV1-Encoder und -Decoder, der von den Unternehmen der Alliance for Open Media verwaltet und in vielen Produktionsdiensten von Google und anderen Mitgliedsunternehmen verwendet wird. Zwischen der libaom-Version 2.0.0 – etwa zur gleichen Zeit, als Chrome AVIF-Unterstützung hinzugefügt hat – und der aktuellen Version 3.1.0 wurden der Codebasis erhebliche Optimierungen für die Codierung von Standbildern hinzugefügt. Dazu gehören:
- Optimierungen für Multithreading und Tile-Codierung.
- 5-fache Reduzierung der Arbeitsspeichernutzung.
- Reduzierung der CPU-Auslastung um das 6,5-Fache, wie im folgenden Diagramm dargestellt.
Diese Änderungen reduzieren die Kosten für die Codierung von AVIF erheblich, insbesondere die am häufigsten geladenen Bilder oder Bilder mit der höchsten Priorität auf Ihrer Website. Mit der zunehmenden Verfügbarkeit der hardwarebeschleunigten Codierung von AV1 auf Servern und Clouddiensten werden die Kosten für die Erstellung von AVIF-Bildern weiter sinken.
Libavif
Libavif, die Referenzimplementierung von AVIF, ist ein Open-Source-AVIF-Muxer und -Parser, der in Chrome zur Decodierung von AVIF-Bildern verwendet wird. Es kann auch mit libaom verwendet werden, um AVIF-Bilder aus vorhandenen unkomprimierten Bildern zu erstellen oder um sie aus vorhandenen Webbildern (JPEG, PNG usw.) zu transcodieren.
Libavif unterstützt seit Kurzem eine größere Auswahl an Encoder-Einstellungen, einschließlich der Einbindung erweiterter libaom-Encoder-Einstellungen. Optimierungen in der Verarbeitungspipeline wie die schnelle Konvertierung von YUV in RGB mit Libyuv und vorab vervielfältigter Alpha unterstützen den Decodierungsprozess weiter. Und schließlich bringt die Unterstützung des in libaom 3.1.0 neu hinzugefügten Modus „All-Intra-Codierung“ alle oben genannten Verbesserungen von libaom mit.
AVIF-Bilder mit avifenc codieren
Eine schnelle Möglichkeit, mit AVIF zu experimentieren, ist Squoosh.app. Squoosh führt eine WebAssembly-Version von libavif aus und stellt viele der Funktionen der Befehlszeilentools bereit. Es ist eine einfache Möglichkeit, AVIF mit anderen alten und neuen Formaten zu vergleichen. Es gibt auch eine CLI-Version von Squoosh für Node-Anwendungen.
WebAssembly verfügt jedoch noch nicht über Zugriff auf alle Leistungsgrundlagen von CPUs. Wenn Sie libavif also möglichst schnell ausführen möchten, empfehlen wir den Befehlszeilen-Encoder, avifenc.
Zum besseren Verständnis von AVIF-Bildern wird eine Anleitung präsentiert, in der dasselbe Quell-Image wie im obigen Beispiel verwendet wird. Für den Einstieg benötigen Sie Folgendes:
Sie müssen auch die Entwicklungspakete für zlib, libpng und libjpeg installieren. Die Befehle für die Linux-Distributionen Debian und Ubuntu lauten:
sudo apt-get install zlib1g-dev
sudo apt-get install libpng-dev
sudo apt-get install libjpeg-dev
avifenc-Befehlszeilen-Encoder erstellen
1. Code abrufen
Sehen Sie sich das Release-Tag von libavif an.
git clone -b v0.9.1 https://github.com/AOMediaCodec/libavif.git
2. Ändern Sie das Verzeichnis in „libavif“
cd libavif
Es gibt viele verschiedene Möglichkeiten, avifenc und libavif für die Erstellung von Builds zu konfigurieren. Weitere Informationen finden Sie unter libavif. avifenc wird statisch mit der AV1-Encoder- und Decoder-Bibliothek libaom verknüpft sein.
3. Libaom herunterladen und erstellen
Wechseln Sie in das externe libavif-Abhängigkeitenverzeichnis.
cd ext
Mit dem nächsten Befehl rufen Sie den libaom-Quellcode ab und erstellen libaom statisch.
./aom.cmd
Ändern Sie das Verzeichnis in libavif.
cd ..
4. Befehlszeilen-Codierungstool avifenc erstellen
Es empfiehlt sich, ein Build-Verzeichnis für avifenc zu erstellen.
mkdir build
Wechseln Sie in das Build-Verzeichnis.
cd build
Erstellen Sie die Build-Dateien für avifenc.
cmake -DCMAKE_BUILD_TYPE=Release -DBUILD_SHARED_LIBS=0 -DAVIF_CODEC_AOM=1 -DAVIF_LOCAL_AOM=1 -DAVIF_BUILD_APPS=1 ..
avifenc erstellen
make
Sie haben avifenc erfolgreich erstellt.
Informationen zu den Befehlszeilenparametern von avifenc
avifenc verwendet die folgende Befehlszeilenstruktur:
./avifenc [options] input.file output.avif
In dieser Anleitung werden die folgenden grundlegenden Parameter für avifenc verwendet:
| avifenc | |
|---|---|
| --Min. 0 | Min. Quantizer für Farbe auf 0 festlegen |
| --max. 63 | Max. Quantizer für Farbe auf 63 festlegen |
| --minalpha 0 | Minimalen Quantizer für Alpha auf 0 festlegen |
| --maxalpha 63 | Max. Quantizer für Alpha auf 63 festlegen |
| -a end-usage=q | Rate-Control-Modus auf Konstante Qualität (Q) einstellen |
| -a cq-level=Q | Quantisierungsstufe für Farbe und Alpha auf Q festlegen |
| -a color:cq-level=Q | Quantisierungsstufe für Farbe auf Q festlegen |
| -a alpha:cq-level=Q | Quantisierungsstufe für Alpha auf Q festlegen |
| -a tune=ssim | Für SSIM abstimmen (Standardeinstellung: PSNR) |
| --Jobs J | J-Worker-Threads verwenden (Standard: 1) |
| --Geschwindigkeit S | Stelle die Encoder-Geschwindigkeit auf einen Wert von 0–10 ein (am langsamsten. Standardeinstellung: 6) |
Mit der Option „cq-level“ wird die Quantisierungsstufe (0–63) festgelegt, um die Qualität der Farbe oder Alpha zu steuern.
AVIF-Bild mit Standardeinstellungen erstellen
Die grundlegendsten Parameter für die Ausführung von avifenc sind das Festlegen der Eingabe- und Ausgabedateien.
./avifenc happy_dog.jpg happy_dog.avif
Wir empfehlen die folgende Befehlszeile, um ein Bild z. B. mit Quantisierungsstufe 18 zu codieren:
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim happy_dog.jpg happy_dog.avif
Avifenc bietet viele Optionen, die sich sowohl auf die Qualität als auch auf die Geschwindigkeit auswirken.
Wenn Sie die Optionen sehen und mehr darüber erfahren möchten, führen Sie ./avifenc aus.
Sie haben jetzt Ihr eigenes AVIF-Bild!
Encoder beschleunigen
Je nachdem, wie viele Kerne Sie auf Ihrem Computer haben, kann es sinnvoll sein, den Parameter --jobs zu ändern.
Mit diesem Parameter wird festgelegt, wie viele Threads avifenc zum Erstellen von AVIF-Bildern verwendet.
Versuchen Sie, diesen Code in der Befehlszeile auszuführen.
./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim --jobs 8 happy_dog.jpg happy_dog.avif
Dadurch wird avifenc angewiesen, beim Erstellen des AVIF-Bildes acht Threads zu verwenden, wodurch die AVIF-Codierung um etwa das 5-Fache beschleunigt wird.
Auswirkungen auf Largest Contentful Paint (LCP)
Bilder kommen häufig für den Messwert „Largest Contentful Paint“ (LCP) infrage. Eine häufige Empfehlung zur Verbesserung der Ladegeschwindigkeit von LCP-Bildern ist die Optimierung eines Bildes. Indem Sie die Übertragungsgröße einer Ressource reduzieren, verbessern Sie die Ladezeit der Ressource. Dies ist eine der vier Hauptphasen, die Sie beim Umgang mit LCP-Kandidaten berücksichtigen sollten, bei denen es sich um Bilder handelt.
Die Verwendung eines Bild-CDN wird bei der Optimierung von Bildern dringend empfohlen, da dies viel weniger Aufwand erfordert als das Einrichten von Bildoptimierungs-Pipelines im Build-Prozess Ihrer Website oder manuell mit Encoder-Binärdateien zur manuellen Optimierung von Bildern. Image-CDNs können jedoch für einige Projekte kostenintensiv sein. Sollte das bei dir der Fall sein, solltest du bei der Optimierung mit dem avifenc-Encoder Folgendes berücksichtigen:
- Informiere dich mit den Optionen, die der Encoder bietet. Sie können zusätzliche Einsparungen erzielen, ohne die Bildqualität zu beeinträchtigen, indem Sie einige der verfügbaren Codierungsfunktionen von AVIF ausprobieren.
- AVIF bietet sowohl eine verlustbehaftete als auch eine verlustfreie Codierung. Abhängig vom Inhalt eines Bildes erzielt eine Codierung unter Umständen eine bessere Leistung als eine andere. Fotos, die normalerweise als JPEG-Datei bereitgestellt werden, funktionieren mit einer verlustbehafteten Codierung wahrscheinlich am besten, wohingegen sich die verlustfreie Codierung wahrscheinlich am besten für Bilder mit einfachen Details oder Strichzeichnungen eignet, die normalerweise als PNG bereitgestellt werden.
- Wenn Sie einen Bundler mit Community-Unterstützung für Imagemin verwenden, sollten Sie das Paket imagemin-avif verwenden, damit der Bundler AVIF-Bildvarianten ausgeben kann.
Durch Experimentieren mit AVIF können Sie möglicherweise eine Verbesserung der LCP-Zeiten Ihrer Website erzielen, wenn der LCP-Kandidaten ein Bild ist. Weitere Informationen zum Optimieren des LCP finden Sie in der Anleitung zum Optimieren des LCP.
Fazit
Mit libaom, libavif und anderen Open-Source-Tools erzielen Sie mit AVIF die beste Bildqualität und Leistung für Ihre Website. Das Format ist noch relativ neu und Optimierungen und Toolintegrationen werden aktiv weiterentwickelt. Wenn Sie Fragen, Kommentare oder Funktionsanfragen haben, wenden Sie sich an die Mailingliste „av1-discuss“, die AOM GitHub-Community und das AVIF-Wiki.