AVIF-Bilder bereitstellen

1. Einführung

Bilder machen mehr als 60% der Bytes aus, die zum Laden einer Webseite durchschnittlich 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 derselben oder besseren Qualität.

Lerninhalte

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

Voraussetzungen

• Beliebiger gängiger Browser
• Texteditor
• cmake
• git
• ninja
• Ein Bild. Hier finden Sie eine
• FFmpeg

2. AVIF-Bilder mit Squoosh erstellen

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

1. Öffnen Sie https://squoosh.app.
2. Ziehen Sie ein lokales Bild per Drag-and-drop in Squoosh.

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

Squoosh komprimiert das Bild dann zu einem AVIF-Bild. Sobald die Umwandlung abgeschlossen ist, wird rechts unten eine Schaltfläche zum Herunterladen mit einigen Statistiken zum AVIF-Bild angezeigt.

Das ursprüngliche Beispielbild hatte eine Größe von 3.340 KB und das komprimierte Bild eine Größe von 378 KB. Das Beispielbild wurde fast zehnmal kleiner komprimiert als das Originalbild.

4. AVIF-Bild herunterladen

Klicken Sie auf die Schaltfläche „Herunterladen“, um das AVIF-Bild auf Ihrem lokalen Laufwerk zu speichern.

Sie können sich das 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 AVIF konvertieren möchten, ist der Befehlszeilen-Encoder „avifenc“ wahrscheinlich eine gute Wahl.

In Chrome wird libavif zum Rendern von AVIF-Bildern verwendet.

1. Rufen Sie den Code ab.

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 für den Build zu konfigurieren. Weitere Informationen finden Sie unter libavif. Wir erstellen avifenc so, dass es statisch mit dem libaom-Encoder, dem dav1d-Decoder und den Verarbeitungsbibliotheken libyuv verknüpft ist.

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

3. Erstelle 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 Builddateien für avifenc.

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

avifenc erstellen

make

Du hast avifenc erfolgreich erstellt.

4. AVIF-Bilder mit avifenc erstellen

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

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

Normalerweise ist der Parameter quality der einzige Parameter, den Sie bei der AVIF-Codierung ändern möchten. quality ist ein Parameter, mit dem die Qualität eines komprimierten Bildes gegen die Größe der Datei getauscht 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 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

5. AVIF-Bilder auf einer Webseite rendern

Jetzt können Sie der Welt zeigen, was Sie geschafft haben.

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 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 die Quelldatei (in meinem Fall happy_dog.jpg) und die AVIF-Datei (eaxmple.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 JPEG verwendet. Weitere Informationen zum Element „picture“

2. Öffnen Sie die Webseite in Chrome.

Sie können die HTML-Datei auch öffnen, indem Sie avif_example.html in Chrome ziehen. Eine weitere Möglichkeit zum Öffnen der HTML-Datei besteht darin, avif_example.html von einem HTTP-Server bereitzustellen.

Ihr AVIF-Bild sollte jetzt in Chrome gerendert werden. Sie können das 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. Sie können auch die Chrome-Entwicklertools öffnen und prüfen, ob example.avif heruntergeladen wurde.

6. Animierte AVIF-Bilder mit FFmpeg erstellen

Die Installation von FFmpeg auf Ihrem System fällt nicht in den Rahmen dieses Codelabs. Weitere Informationen zum Installieren von FFmpeg auf deinem System findest du 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

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 Sie erstellt, falls Sie keine Quellmediendatei haben: ice_qcif_15fps.gif.

Öffnen Sie avif_animated_example.html in Ihrem Texteditor und geben Sie 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>

Kopiere deine Quelldatei (in diesem Fall ice_qcif_15fps.gif) und deine AVIF-Datei (animated.avif) in dasselbe Verzeichnis wie avif_animated_example.html.

3. Öffnen Sie die Webseite in Chrome.

Sie können die HTML-Datei auch öffnen, indem Sie avif_animated_example.html in Chrome ziehen. Eine weitere Möglichkeit zum Öffnen der HTML-Datei besteht darin, avif_animated_example.html von einem HTTP-Server bereitzustellen.

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

Wenn Sie die bereitgestellten Beispielmedien verwenden, sollte das Ergebnis in etwa so aussehen:

Sie können prüfen, 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. Sie können auch die Chrome-Entwicklertools öffnen und prüfen, ob animated.avif heruntergeladen wurde.

7. Animierte AVIF-Bilder mit avifenc erstellen

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

avifenc unterstützt y4m als Eingabe, um animierte AVIF-Bilder zu erstellen. FFmpeg ist eine gute Option, um Y4M-Dateien zu erstellen.

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

Sie haben jetzt Ihr eigenes 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 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>

Kopiere deine Quelldatei (in diesem Fall ice_qcif_15fps.gif) und deine AVIF-Datei (animated.avif) in dasselbe Verzeichnis wie avif_animated_example.html.

4. Öffnen Sie die Webseite in Chrome.

Sie können die HTML-Datei auch öffnen, indem Sie avif_animated_example.html in Chrome ziehen. Eine weitere Möglichkeit zum Öffnen der HTML-Datei besteht darin, avif_animated_example.html von einem HTTP-Server bereitzustellen.

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

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

Außer bei animierten AVIF-Dateien ist die Qualität viel besser.

Sie können prüfen, 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. Sie können auch die Chrome-Entwicklertools öffnen und 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 ungefähr der Qualität von ice_qcif_15fps.gif entspricht. Ändern Sie dazu den Qualitätsparameter in 20.

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

Jetzt haben die animierte AVIF-Datei und ice_qcif_15fps.gif etwa dieselbe 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.

Ich hoffe, dass Ihnen klar ist, 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 einem Artikel von Jake Archibald.