Wir schreiben uns häufig über die aufgeblähten Inhalte auf Websites aus Bildern. Tools wie Lighthouse zeigen, wenn sich das Laden von Bildern negativ auf die Nutzerfreundlichkeit auswirkt, z. B. wenn die Ladezeit erhöht oder Bandbreiten für wichtigere Ressourcen weggenommen werden. Eine Möglichkeit, dieses Problem zu beheben, besteht darin, die Dateigröße von Bildern mit einer modernen Komprimierung zu reduzieren. Eine neue Option für Webentwickler ist das AVIF-Bildformat. In diesem Blogpost geht es um die neuesten Aktualisierungen der Open-Source-Tools für AVIF. Außerdem werden die Codierungsbibliotheken libaom und libavif vorgestellt und ein Tutorial zur effizienten Codierung von AVIF-Bildern mit diesen Bibliotheken beschrieben.
AVIF ist ein Bildformat, das auf dem AV1-Video-Codec basiert und von der Alliance for Open Media standardisiert wurde. AVIF bietet eine deutliche Verbesserung der Komprimierung gegenüber anderen Bildformaten wie JPEG und WebP. Die genauen Einsparungen hängen zwar vom Inhalt, den Codierungseinstellungen und dem Qualitätsziel ab, aber wir und andere konnten im Vergleich zu JPEG mehr als 50% erzielen.
Darüber hinaus bietet AVIF Codec und Container-Unterstützung für neue Bildfunktionen wie High Dynamic Range und Wide Color Gamut, Filmkörnungssynthese und progressive Decodierung.
Neuerungen
Seit der Einführung von AVIF in Chrome M85 hat sich die AVIF-Unterstützung im Open-Source-Ökosystem in mehreren Bereichen verbessert.
Ligaom
Libaom ist ein Open-Source-AV1-Encoder und -Decodierer, der von den Unternehmen der Alliance for Open Media verwaltet und in vielen Produktionsdiensten bei Google und anderen Mitgliedsunternehmen verwendet wird. Zwischen der Libaom-Version 2.0.0 – ungefähr zur gleichen Zeit, zu der Chrome die AVIF-Unterstützung hinzugefügt hat – und der jüngsten Version 3.1.0 wurden der Codebasis erhebliche Codierungsoptimierungen für Standbilder hinzugefügt. Dazu gehören:
- Optimierungen für Multi-Threading und Tile-Codierung.
- 5-fache Reduzierung der Arbeitsspeichernutzung.
- 6,5-fache Reduzierung der CPU-Nutzung, wie im Diagramm unten dargestellt.
Durch diese Änderungen sinken die Kosten für die AVIF-Codierung deutlich, insbesondere die am häufigsten geladenen Bilder oder Bilder mit der höchsten Priorität auf Ihrer Website. Da die hardwarebeschleunigte Codierung von AV1 auf Servern und Clouddiensten immer mehr verfügbar ist, werden die Kosten für die Erstellung von AVIF-Images 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. Sie kann auch mit libaom verwendet werden, um AVIF-Bilder aus nicht komprimierten Bildern zu erstellen oder aus vorhandenen Webbildern (JPEG, PNG usw.) zu transcodieren.
Libavif unterstützt seit Kurzem eine größere Auswahl an Encoder-Einstellungen, einschließlich der Integration von erweiterten Libaom-Encoder-Einstellungen. Optimierungen in der Verarbeitungspipeline, z. B. eine schnelle YUV-zu-RGB-Konvertierung mit Libyuv und der vorinstallierten Alpha-Unterstützung, beschleunigen den Decodierungsprozess weiter. Die Unterstützung für den in Libaom 3.1.0 hinzugefügten All-Intra-Codierungsmodus bringt alle oben genannten Libaom-Verbesserungen mit sich.
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 bietet viele derselben Funktionen wie die Befehlszeilentools. So können Sie AVIF ganz einfach mit anderen alten und neuen Formaten vergleichen. Es gibt auch eine CLI-Version von Squoosh für Knotenanwendungen.
WebAssembly hat jedoch noch nicht Zugriff auf alle Leistungsprimitive von CPUs. Wenn Sie libavif also so schnell wie möglich ausführen möchten, empfehlen wir den Befehlszeilenencoder avifenc.
Um zu verstehen, wie AVIF-Bilder codiert werden, präsentieren wir eine Anleitung, in der dasselbe Quell-Image wie im obigen Beispiel verwendet wird. Für den Einstieg benötigen Sie Folgendes:
Außerdem müssen Sie die Entwicklungspakete für zlib, libpng und libjpeg installieren. Die Befehle für die Debian- und Ubuntu-Linux-Distributionen lauten:
sudo apt-get install zlib1g-dev
sudo apt-get install libpng-dev
sudo apt-get install libjpeg-dev
Befehlszeilen-Encoder avifenc erstellen
1. Code abrufen
Sehen Sie sich ein Release-Tag von libavif an.
git clone -b v0.9.1 https://github.com/AOMediaCodec/libavif.git
2. Verzeichnis in libavif ändern
cd libavif
Es gibt viele verschiedene Möglichkeiten, avifenc und libavif für die Erstellung zu konfigurieren. Weitere Informationen finden Sie unter libavif. Wir erstellen avifenc so, dass es statisch mit dem AV1-Encoder und der Decoder-Bibliothek libaom verknüpft ist.
3. Hol dir und baue ein Libaom
Wechseln Sie in das externe libavif-Verzeichnis für Abhängigkeiten.
cd ext
Der nächste Befehl ruft den Libaom-Quellcode ab und erstellt Libaom statisch.
./aom.cmd
Ändern Sie das Verzeichnis zu libavif.
cd ..
4. Erstellen des Befehlszeilen-Codierungstools avifenc
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 entwickeln
make
Sie haben erfolgreich avifenc erstellt!
Informationen zu den avifenc-Befehlszeilenparametern
avifenc verwendet die Befehlszeilenstruktur:
./avifenc [options] input.file output.avif
Die in dieser Anleitung verwendeten grundlegenden avifenc-Parameter sind:
| avifenc | |
|---|---|
| --Min. 0 | Min. Quantizer für Farbe auf 0 setzen |
| --max. 63 | Max. Quantizer für Farbe auf 63 festlegen |
| --minalpha 0 | Min. Quantizer für Alpha auf 0 festlegen |
| --maxalpha 63 | Max. Quantizer für Alpha auf 63 festlegen |
| -a end-usage=q | Ratenregelungsmodus auf Konstante Qualität (Q) einstellen |
| -a cq-level=Q | Quantisierungsgrad für Farbe und Alpha auf Q festlegen |
| -a color:cq-level=Q | Quantisieren Sie die Farbe auf Q. |
| -a alpha:cq-level=Q | Quantisierungsgrad für Alpha auf Q festlegen |
| -a Melodie=ssim | Auf SSIM einstellen (Standardeinstellung ist PSNR) |
| --Jobs J | J-Worker-Threads verwenden (Standard: 1) |
| --Geschwindigkeit S | Stelle die Encoder-Geschwindigkeit auf einen Wert zwischen 0 und 10 ein (am langsamsten. Standardwert: 6). |
Mit der Option auf Ebene „cq“ wird die Stufe „quantize“ (0–63) festgelegt, um die Qualität für Farbe oder Alpha zu steuern.
AVIF-Bild mit Standardeinstellungen erstellen
Die grundlegendsten Parameter für die Ausführung von avifenc sind das Festlegen der Ein- und Ausgabedateien.
./avifenc happy_dog.jpg happy_dog.avif
Wir empfehlen die folgende Befehlszeile, um ein Bild auf Quantisierungsebene 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 können.
Wenn Sie die Optionen anzeigen und mehr darüber erfahren möchten, führen Sie einfach ./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, dies 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
Damit wird avifenc angewiesen, beim Erstellen des AVIF-Bildes 8 Threads zu verwenden, wodurch die AVIF-Codierung um etwa das 5-Fache beschleunigt wird.
Auswirkungen auf Largest Contentful Paint (LCP)
Bilder werden häufig für den LCP-Messwert (Largest Contentful Paint) verwendet. Eine gängige Empfehlung zur Verbesserung der Ladegeschwindigkeit von LCP-Bildern ist die Optimierung von Bildern. Indem Sie die Übertragungsgröße einer Ressource reduzieren, verbessern Sie die Ladezeit der Ressource. Dies ist eine der vier wichtigsten Phasen, die beim Umgang mit LCP-Kandidaten, bei denen es sich um Bilder handelt, angegangen werden müssen.
Die Verwendung eines Bild-CDN wird bei der Optimierung von Bildern dringend empfohlen, da dies viel weniger Aufwand erfordert, als Bildoptimierungspipelines im Build-Prozess Ihrer Website einzurichten oder die Bilder manuell mithilfe von Encoder-Binärdateien zu optimieren. Image-CDNs können für einige Projekte jedoch zu teuer sein. Sollte dies bei dir der Fall sein, beachte bei der Optimierung mit dem AVfenc-Encoder Folgendes:
- Mache dich mit den Optionen des Encoders vertraut. Durch Experimentieren mit einigen der verfügbaren Codierungsfunktionen von AVIF können Sie zusätzliche Einsparungen erzielen, während Sie gleichzeitig eine ausreichende Bildqualität erhalten.
- AVIF bietet sowohl eine verlustbehaftete als auch eine verlustfreie Codierung. Abhängig vom Inhalt eines Bildes kann ein Codierungstyp besser abschneiden als ein anderer. Beispielsweise eignen sich Fotos, die normalerweise als JPEGs bereitgestellt werden, wahrscheinlich am besten mit einer verlustbehafteten Codierung, während eine verlustfreie Codierung für Bilder mit einfachen Details oder Strichzeichnungen, die normalerweise im PNG-Format bereitgestellt werden, am besten geeignet ist.
- Wenn Sie einen Bundler mit Community-Unterstützung für „imagemin“ verwenden, sollten Sie das Paket imagemin-avif verwenden, damit Ihr Bundler AVIF-Bildvarianten ausgeben kann.
Durch Experimentieren mit AVIF können Sie möglicherweise eine Verbesserung der LCP-Zeiten Ihrer Website feststellen, wenn der LCP-Kandidat ein Bild ist. Weitere Informationen zur LCP-Optimierung finden Sie im Leitfaden zur LCP-Optimierung.
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 Einbindungen von Tools 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.