AVIF-Bilder bereitstellen

1. Einführung

Bilder machen im Durchschnitt mehr als 60% der Bytes aus, die 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 Bildformat, das vom AV1-Videobitstream abgeleitet ist. AVIF wurde für eine effiziente Komprimierung entwickelt.

Warum AVIF?

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

Lerninhalte

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

Voraussetzungen

• Jeder gängige Browser.
• Texteditor
• cmake
• git
• ninja
• Ein Bild. Hier habe ich eine angegeben.
• FFmpeg

2. AVIF-Bilder mit Squoosh erstellen

Squoosh ist eine Web-App zur Bildkomprimierung. Mit Squoosh können Sie Ihre Bilder ganz einfach in AVIF-Bilder komprimieren.

1. Öffnen Sie https://squoosh.app.
2. Legen Sie ein lokales Bild in Squoosh ab.

3. Wählen Sie im Drop-down-Menü „Komprimieren“ die Option „AVIF“ aus.

Squoosh komprimiert das Bild dann in ein AVIF-Bild. Wenn Squoosh fertig ist, wird unten rechts eine Download-Schaltfläche mit einigen Statistiken zum AVIF-Bild angezeigt.

Das Originalbild hatte eine Größe von 3.340 KB, das komprimierte Bild 378 KB. Das Beispielbild wurde auf fast ein Zehntel der Größe des Originalbilds komprimiert.

4. AVIF-Bild herunterladen

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

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

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

Chrome verwendet libavif zum Rendern von AVIF-Bildern.

1. Rufen Sie den Code ab.

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

2. Wechseln Sie in das 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 dem libaom-Encoder, dem dav1d-Decoder und den libyuv-Verarbeitungsbibliotheken 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 in das 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. AVIF-Bild mit Standardeinstellungen erstellen

Die grundlegendsten Parameter für die Ausführung von „avifenc“ sind die Eingabe- und Ausgabedateien.

./avifenc happy_dog.jpg example.avif

Sie haben jetzt Ihr eigenes zweites AVIF-Bild.

2. Qualität der AVIF-Codierung ändern

In der Regel 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 Dateigröße abgewogen wird. Eine Datei in hoher Qualität (-q 90) ist beispielsweise viel größer als eine Datei in 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 zeigen, was Sie geschafft haben.

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 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 (eaxmple.avif) in dasselbe Verzeichnis wie avif_example.html.

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

2. Öffnen Sie die Webseite in Chrome.

Eine Möglichkeit, die HTML-Datei zu öffnen, besteht darin, avif_example.html in Chrome zu ziehen. Eine weitere Möglichkeit, die HTML-Datei zu öffnen, 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 sollte ein Dialogfeld mit example.avif geöffnet werden. Eine weitere Möglichkeit besteht darin, die Chrome-Entwicklertools zu öffnen und zu prüfen, ob example.avif heruntergeladen wurde.

6. Animierte AVIF-Bilder mit FFmpeg erstellen

Wie Sie FFmpeg auf Ihrem System installieren, wird in diesem Codelab nicht behandelt. Weitere Informationen dazu, wie Sie FFmpeg auf Ihrem System installieren, finden Sie in der FFmpeg-Dokumentation.

Ich habe eine Y4M-Datei für dich erstellt, falls du keine Quellmediendatei hast: 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

Sie haben jetzt Ihr eigenes animiertes AVIF-Bild.

2. 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 dich erstellt, falls du keine Quellmediendatei hast: 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. Öffnen Sie die Webseite in Chrome.

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

Das animierte AVIF-Bild sollte jetzt in Chrome gerendert werden.

Wenn Sie die bereitgestellten Beispielmedien verwenden, sollte es in etwa 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 sollte ein Dialogfeld mit animated.avif geöffnet werden. Eine weitere Möglichkeit ist, die Chrome-Entwicklertools zu öffnen und zu prüfen, ob animated.avif heruntergeladen wurde.

7. Animierte AVIF-Bilder mit avifenc 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 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 dich erstellt, falls du keine Quellmediendatei hast: 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

Sie haben jetzt 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 dich erstellt, falls du keine Quellmediendatei hast: 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. Öffnen Sie die Webseite in Chrome.

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

Das animierte AVIF-Bild sollte jetzt in Chrome gerendert werden.

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

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

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 sollte ein Dialogfeld mit animated.avif geöffnet werden. Eine weitere Möglichkeit besteht darin, die Chrome-Entwicklertools zu öffnen und zu prüfen, ob animated.avif heruntergeladen wurde.

5. Qualität der AVIF-Codierung ändern

Die Datei ice_qcif_15fps.gif ist etwa siebenmal größer und hat eine viel schlechtere Qualität. Sie können die Qualität von AVIF so ändern, dass sie in etwa 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

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

8. Glückwunsch!

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

Wir hoffen, dass Sie jetzt wissen, wie AVIF dazu beitragen kann, Ihre Bilder kleiner und effizienter über das Web zu übertragen. Weitere Informationen zu den Funktionen von AVIF finden Sie in einem Beitrag von Jake Archibald.