AVIF-Bilder bereitstellen

1. Einführung

Bilder machen durchschnittlich mehr als 60% der Bytes aus, die zum Laden einer Webseite erforderlich sind. Mit AVIF können Sie Ihre Bilder verkleinern und Ihre Website schneller laden.

Was ist AVIF?

AVIF ist ein Bildformat, das vom AV1-Videobitstream abgeleitet wurde. AVIF wurde für eine effiziente Komprimierung entwickelt.

Warum AVIF?

AVIF-Bilder sind viel kleiner als JPEG-, PNG-, GIF- oder WebP-Bilder mit derselben oder besserer Qualität.

Lerninhalte

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

Voraussetzungen

• Ein beliebiger gängiger Browser.
• Ein Texteditor
• cmake
• git
• ninja
• Ein Bild. Ich habe hier eines bereitgestellt.
• FFmpeg

2. AVIF-Bilder mit Squoosh erstellen

Squoosh ist eine Web-App zur Bildkomprimierung, mit der Sie Ihre Bilder in AVIF-Bilder konvertieren können.

1. Öffnen Sie Squoosh.
2. Legen Sie ein lokales Bild in Squoosh ab.

3. Wählen Sie im Drop-down-Feld „Compress“ (Komprimieren) die Option „AVIF“ aus.

Squoosh komprimiert das Bild dann zu einem AVIF-Bild. Sobald Squoosh fertig ist, wird rechts unten ein Download-Button mit einigen Statistiken zum AVIF-Bild angezeigt.

Das ursprüngliche Beispielbild war 3340 KB groß, das komprimierte Bild 378 KB. Das Beispielbild wurde fast 10-mal kleiner als das Originalbild komprimiert.

4. AVIF-Bild herunterladen

Klicken Sie auf den Download-Button. Das AVIF-Bild wird auf Ihrem lokalen Laufwerk gespeichert.

Sie können sich das AVIF-Bild ansehen, indem Sie es in Chrome ziehen.

Jetzt haben Sie 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, mit der AVIF-Bilder decodiert und codiert werden können. Wenn Sie viele Bilder in AVIF konvertieren möchten, ist der Befehlszeilen-Encoder „avifenc“ wahrscheinlich eine gute Wahl.

Chrome verwendet libavif, um AVIF-Bilder zu rendern.

1. Code abrufen

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

2. Wechseln Sie zum Verzeichnis „libavif“.

cd libavif/

Es gibt viele verschiedene Möglichkeiten, avifenc und libavif zu konfigurieren. Weitere Informationen finden Sie unter libavif. Wir erstellen avifenc so, dass es statisch mit den Encoder-Bibliotheken libaom und dav1d sowie der Verarbeitungsbibliothek libyuv verknüpft ist.

libyuv ist wichtig, um die Leistung von Farbkonvertierungen zu beschleunigen.

3. Erstellen Sie das Befehlszeilen-Codierungstool „avifenc“.

Es empfiehlt sich, ein Build-Verzeichnis für avifenc zu erstellen.

mkdir build

Wechseln Sie zum Build-Verzeichnis.

cd build

Erstellen Sie die Build-Dateien für avifenc.

cmake -DAVIF_CODEC_AOM=LOCAL -DAVIF_CODEC_DAV1D=LOCAL -DAVIF_LIBYUV=LOCAL -DBUILD_SHARED_LIBS=OFF -DAVIF_BUILD_APPS=ON ../

Erstellen Sie avifenc.

make

Sie haben avifenc erfolgreich erstellt.

4. AVIF-Bilder mit avifenc erstellen

1. Erstellen Sie ein AVIF-Bild mit den Standardeinstellungen.

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

./avifenc happy_dog.jpg example.avif

Jetzt haben Sie Ihr zweites AVIF-Bild.

2. Qualität der AVIF-Codierung ändern

Normalerweise ist der einzige Parameter, den Sie bei der AVIF-Codierung ändern möchten, der Parameter quality. quality ist ein Parameter, bei dem die Qualität eines komprimierten Bilds gegen die Größe der Datei abgewogen wird. Eine Datei mit hoher Qualität (-q 90) ist beispielsweise viel größer als eine Datei mit niedriger Qualität (-q 20), sieht aber auch viel besser aus.

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 einfach ./avifenc aus.

5. AVIF-Bilder auf einer Webseite rendern

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

1. Erstellen Sie eine Webseite, um Ihr AVIF-Bild bereitzustellen.

Erstellen Sie eine Datei mit dem Namen avif_example.html.

Öffnen Sie avif_example.html in Ihrem Texteditor und geben Sie diesen 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 (example.avif) in dasselbe Verzeichnis wie avif_example.html.

Wir verwenden das Element picture, um das AVIF-Bild zu rendern, wenn der Browser AVIF unterstützt. Andernfalls wird auf JPEG zurückgegriffen. Weitere Informationen zum Element picture.

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 besteht darin, avif_example.html von einem HTTP-Server bereitzustellen.

Jetzt sollte Ihr AVIF-Bild 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 sollte ein Dialogfeld mit example.avif geöffnet werden. Alternativ können Sie die Chrome-Entwicklertools öffnen und sehen, dass example.avif heruntergeladen wurde.

6. Animierte AVIF-Bilder mit FFmpeg erstellen

Die Installation von FFmpeg auf Ihrem System wird in diesem Codelab nicht behandelt. Weitere Informationen zum Installieren von FFmpeg auf Ihrem System finden Sie in der FFmpeg-Dokumentation.

Ich habe eine Y4M-Datei für Sie erstellt, falls Sie keine Quellmediendatei haben: ice_qcif_15fps.y4m. Die Datei stammt von Xiph.org Video Test Media.

Y4M-Dateien sind nicht komprimiert und können daher sehr groß sein.

1. Animiertes AVIF-Bild erstellen

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

ffmpeg -i ice_qcif_15fps.y4m animated.avif

Jetzt haben Sie Ihr eigenes animiertes AVIF-Bild.

2. Animiertes AVIF-Bild auf einer Webseite rendern

Erstellen Sie eine Datei mit dem Namen avif_animated_example.html.

Hier ist eine GIF-Datei, die Sie verwenden können, falls Sie keine Quellmediendatei haben: ice_qcif_15fps.gif.

Öffnen Sie avif_animated_example.html in Ihrem Texteditor und geben Sie diesen 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 obigen Fall ice_qcif_15fps.gif) und Ihre AVIF-Datei (animated.avif) in dasselbe Verzeichnis wie avif_animated_example.html.

3. 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 besteht darin, avif_animated_example.html von einem HTTP-Server bereitzustellen.

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

Wenn Sie die bereitgestellten Beispielmedien verwenden, sollte es ungefähr so aussehen:

Sie können testen, ob es sich um ein animiertes AVIF-Bild handelt, indem Sie mit der rechten Maustaste auf das Bild klicken und Save image as... auswählen. Daraufhin wird ein Dialogfeld mit animated.avif geöffnet. Alternativ können Sie die Chrome-Entwicklertools öffnen und sehen, dass animated.avif heruntergeladen wurde.

7. Animierte AVIF-Bilder mit avifenc erstellen

1. Quellmedien in das Y4M-Format konvertieren

avifenc unterstützt Y4M als Eingabe zum Erstellen animierter AVIF-Bilder. Eine gute Möglichkeit, Y4M-Dateien zu erstellen, ist die Verwendung von FFmpeg.

Y4M-Dateien sind nicht komprimiert und können daher sehr groß sein.

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

2. Animiertes AVIF-Bild erstellen

Ich habe eine Y4M-Datei für Sie erstellt, falls Sie keine Quellmediendatei haben: ice_qcif_15fps.y4m. Die Datei stammt von Xiph.org Video Test Media.

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

./avifenc ice_qcif_15fps.y4m animated.avif

Jetzt haben Sie Ihr zweites animiertes AVIF-Bild.

3. Animiertes AVIF-Bild auf einer Webseite rendern

Erstellen Sie eine Datei mit dem Namen avif_animated_example.html.

Ich habe eine GIF-Datei für Sie erstellt, falls Sie keine Quellmediendatei haben: ice_qcif_15fps.gif.

Öffnen Sie avif_animated_example.html in Ihrem Texteditor und geben Sie diesen 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 obigen Fall 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 besteht darin, avif_animated_example.html von einem HTTP-Server bereitzustellen.

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

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

Das animierte AVIF-Bild hat jedoch eine viel bessere Qualität.

Sie können testen, ob es sich um ein animiertes AVIF-Bild handelt, indem Sie mit der rechten Maustaste auf das Bild klicken und Save image as... auswählen. Daraufhin wird ein Dialogfeld mit animated.avif geöffnet. Alternativ können Sie die Chrome-Entwicklertools öffnen und sehen, dass animated.avif heruntergeladen wurde.

5. Qualität der AVIF-Codierung ändern

Die Datei „ice_qcif_15fps.gif“ ist etwa 7-mal größer und hat eine viel schlechtere Qualität. Sie können die Qualität von AVIF so ändern, dass sie ungefähr der Qualität von ice_qcif_15fps.gif entspricht, indem Sie den Qualitätsparameter auf 20 ändern.

./avifenc -q 20 ice_qcif_15fps.y4m animated.avif

Jetzt haben die animierte AVIF-Datei und ice_qcif_15fps.gif ungefähr die gleiche Qualität, aber die GIF-Datei ist etwa 22-mal größer.

8. Glückwunsch!

Sie haben das Codelab zum Bereitstellen von AVIF-Bildern abgeschlossen.

Hoffentlich ist Ihnen jetzt klar, wie AVIF dazu beitragen kann, Ihre Bilder kleiner zu machen und effizienter über das Web zu übertragen. Weitere Informationen zu den Funktionen von AVIF finden Sie in diesem Beitrag von Jake Archibald.