AVIF-Bilder bereitstellen

1. Einführung

Bilder machen mehr als 60% der Bytes aus, die durchschnittlich zum Laden einer Webseite benötigt werden. Mit AVIF können Sie Ihre Bilder verkleinern und die Ladezeit Ihrer Website verkürzen.

Was ist AVIF?

AVIF ist ein neues Bildformat, das auf dem AV1-Videobitream basiert. AVIF ist auf Kompressionseffizienz ausgelegt.

Warum AVIF?

AVIF-Bilder sind wesentlich kleiner als JPEG-, PNG-, GIF- oder WebP-Bilder bei gleicher oder besserer Qualität.

Lerninhalte

• AVIF-Bilder aus Ihren Bildern erstellen
• AVIF-Bilder auf einer Webseite rendern

Voraussetzungen

• Chrome ab Version 85
• Ein Texteditor
• cmake
• git
• Ninja
• Ein Bild. Hier habe ich eines angegeben
• FFmpeg

2. AVIF-Bilder mit Squoosh erstellen

Squoosh ist eine Webanwendung zur Bildkomprimierung. Mit Squoosh können Sie Ihre Bilder ganz einfach zu AVIF-Bildern komprimieren.

1. Öffnen Sie https://squoosh.app.
2. Ziehen Sie ein lokales Bild auf Squoosh.

3. Wählen Sie AVIF aus dem Dropdown-Menü Komprimieren aus.

Squoosh komprimiert Ihr Bild dann zu einem AVIF-Bild. Sobald Squoosh fertig ist, wird eine Schaltfläche zum Herunterladen mit einigen Statistiken auf dem AVIF-Bild in der unteren rechten Ecke angezeigt.

Das ursprüngliche Beispielbild hat 3.340 KB und das komprimierte Bild 378 KB. Das Beispielbild wurde fast zehnmal kleiner als das Originalbild komprimiert.

4. AVIF-Bild herunterladen

Klicken Sie auf die Schaltfläche zum Herunterladen. Das AVIF-Bild wird auf Ihrem lokalen Laufwerk gespeichert.

Du kannst dein AVIF-Bild ansehen, indem du es in Chrome ziehst.

Sie haben jetzt Ihr eigenes AVIF-Bild!

3. Befehlszeilen-Encoder avifenc erstellen

avifenc ist eine Befehlszeilenanwendung, mit der PNG- und JPEG-Bilder in AVIF-Bilder konvertiert werden können. avifenc verwendet libavif, eine Bibliothek, die AVIF-Bilder decodieren und codieren kann. Wenn Sie viele Bilder in AVIF konvertieren möchten, ist die Verwendung des Befehlszeilen-Encoders, avifenc, wahrscheinlich eine gute Wahl.

Chrome verwendet libavif zum Rendern von AVIF-Bildern.

1. Code abrufen

git clone https://github.com/AOMediaCodec/libavif.git

2. Ändern Sie das Verzeichnis zu libavif.

cd libavif/

Es gibt viele verschiedene Möglichkeiten, avifenc und libavif für die Erstellung zu konfigurieren. Weitere Informationen finden Sie unter libavif. Wir werden avifenc so entwickeln, 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 Verzeichnis der libavif-Erweiterungen.

cd ext

Mit dem nächsten Befehl wird der Libaom-Quellcode abgerufen und Libaom statisch erstellt.

./aom.cmd

Ändern Sie das Verzeichnis zu libavif.

cd ../

4. Erstellen Sie das Befehlszeilen-Codierungstool 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 -DAVIF_LOCAL_AOM=1 -DAVIF_CODEC_AOM=1 -DBUILD_SHARED_LIBS=0 -DAVIF_BUILD_APPS=1 ../

avifenc entwickeln

make

Sie haben erfolgreich avifenc erstellt!

4. AVIF-Bilder mit avifenc erstellen

1. Erstellen Sie ein AVIF-Image mit Standardeinstellungen.

Die grundlegendsten Parameter für die Ausführung von avifenc sind das Festlegen der Ein- und Ausgabedateien.

./avifenc happy_dog.jpg example.avif --min 0 --max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a sharpness=3 -y 420

"-min 0 –max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a Sharpness=3 -y 420" sind empfohlene Einstellungen für AVIF-Bilder.

Avifenc bietet viele Optionen, die sich sowohl auf die Qualität als auch auf die Geschwindigkeit auswirken. Wenn Sie die Optionen anzeigen und mehr darüber erfahren möchten, führen Sie einfach ./avifenc aus.

Sie haben jetzt Ihr eigenes zweites AVIF-Bild!

2. Der Encoder wird beschleunigt.

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, diese Befehlszeile auszuführen.

./avifenc happy_dog.jpg example.avif --jobs 8

Damit wird avifenc angewiesen, beim Erstellen des AVIF-Images 8 Threads zu verwenden. Auf meinem Computer wird dadurch die AVIF-Codierung um das 5-Fache beschleunigt.

5. AVIF-Bilder auf einer Webseite rendern

Jetzt können Sie der Welt Ihre harte Arbeit zeigen.

1. Erstellen Sie eine Webseite, auf der Ihr AVIF-Bild bereitgestellt wird.

Erstellen Sie eine Datei mit dem Namen avif_example.html.

Öffnen Sie avif_example.html in Ihrem Texteditor und geben Sie den folgenden Code ein:

<html>
  <head>
    <title>AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="example.avif" />
      <img src="happy_dog.jpg" />
    </picture>
  </body>
</html>

Kopieren Sie Ihre Quelldatei (in meinem Fall happy_dog.jpg) und Ihre AVIF-Datei (eaxmple.avif) in dasselbe Verzeichnis wie avif_example.html.

Wenn der Browser AVIF unterstützt, verwenden wir das -Element zum Rendern des AVIF-Bilds. Andernfalls wird JPEG verwendet. Weitere Informationen zu findest du hier.

2. Webseite in Chrome öffnen.

Eine Möglichkeit, die HTML-Datei zu öffnen, besteht darin, avif_example.html in Chrome zu ziehen. Eine weitere Möglichkeit zum Öffnen der HTML-Datei besteht darin, avif_example.html über einen HTTP-Server bereitzustellen.

Ihr AVIF-Bild sollte jetzt in Chrome gerendert werden. Sie können dies testen, indem Sie mit der rechten Maustaste auf das Bild klicken und Save image as... auswählen. Daraufhin wird ein Dialogfeld mit example.avif geöffnet. Sie können auch die Chrome-Entwicklertools öffnen und sehen, dass example.avif heruntergeladen wurde.

6. Animierte AVIF-Bilder erstellen

1. Konvertieren Sie Ihre Quellmedien in das y4m-Format.

avifenc unterstützt y4m als Eingabe zum Erstellen animierter AVIF-Bilder. Eine gute Möglichkeit zum Erstellen von y4M-Dateien ist FFmpeg.

Y4M-Dateien sind nicht komprimiert, sodass sie sehr groß sein können.

ffmpeg -i input.gif -pix_fmt yuv420p -f yuv4mpegpipe output.y4m

2. Erstellen Sie ein animiertes AVIF-Bild.

Ich habe eine y4M-Datei für den Fall erstellt, dass Sie keine Quelldatei haben: ice_qcif_15fps.y4m. Die Datei stammt von Xiph.org Video Test Media.

Führen Sie diesen Befehl aus, um ein animiertes AVIF-Image aus einer y4m-Datei zu erstellen.

avifenc ice_qcif_15fps.y4m animated.avif

Sie haben jetzt Ihr eigenes animiertes AVIF-Bild!

3. Hiermit können Sie das animierte AVIF-Bild auf einer Webseite rendern.

Erstellen Sie eine Datei mit dem Namen avif_animated_example.html.

Für den Fall, dass Sie keine Quellmediendatei haben, habe ich eine GIF-Datei für Sie erstellt: ice_qcif_15fps.gif.

Die GIF-Datei ist ca. 35-mal größer und von schlechterer Qualität.

Öffnen Sie avif_animated_example.html in Ihrem Texteditor und geben Sie den folgenden Code ein:

<html>
  <head>
    <title>Animated AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="animated.avif" />
      <img src="ice_qcif_15fps.gif" />
    </picture>
  </body>
</html>

Kopieren Sie Ihre Quelldatei (im Fall oben ice_qcif_15fps.gif) und Ihre AVIF-Datei (animated.avif) in dasselbe Verzeichnis wie avif_animated_example.html.

4. Webseite in Chrome öffnen.

Eine Möglichkeit, die HTML-Datei zu öffnen, besteht darin, avif_animated_example.html in Chrome zu ziehen. Eine weitere Möglichkeit zum Öffnen der HTML-Datei besteht darin, avif_animated_example.html über einen HTTP-Server bereitzustellen.

Ihr animiertes AVIF-Bild sollte jetzt in Chrome gerendert werden.

Wenn Sie die bereitgestellten Beispielmedien verwenden, sollte diese so aussehen:

Außer mit dem animierten AVIF ist die Qualität viel besser.

Sie können testen, ob es sich um ein animiertes AVIF-Bild handelt. Klicken Sie dazu mit der rechten Maustaste auf das Bild und wählen Sie Save image as... aus. Daraufhin sollte ein Dialogfeld mit animated.avif geöffnet werden. Sie können auch die Chrome-Entwicklertools öffnen und sehen, dass animated.avif heruntergeladen wurde.

7. Glückwunsch!

Sie haben das Code-Lab zum Bereitstellen von AVIF-Bildern abgeschlossen.

Hoffentlich ist jetzt klar, wie Sie mit AVIF Ihre Bilder verkleinern und die Übertragung über das Web effizienter gestalten können. Weitere Informationen zu den Funktionen von AVIF finden Sie in einem tollen Beitrag von Jake Archibald.