AVIF-Bilder bereitstellen

1. Einführung

Bilder machen im Durchschnitt 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 hier
• 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-Feld „Compress“ (Komprimieren) die Option „AVIF“ aus.

Squoosh komprimiert Ihr Bild dann in ein 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 die Schaltfläche „Download“. Das AVIF-Bild wird auf Ihrem lokalen Laufwerk gespeichert.

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.

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“, „dav1d“ und „libyuv“ verknüpft ist.

„libyuv“ ist wichtig, um die Leistung bei Farbkonvertierungen zu verbessern.

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

Sie haben jetzt 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 (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 auf JPEG zurückgegriffen. Weitere Informationen zum picture Element finden Sie hier.

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 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. Erstellen Sie ein animiertes AVIF-Bild.

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

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 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. Ö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 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:

Allerdings mit viel besserer Qualität als beim animierten AVIF.

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. 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 und effizienter über das Web zu übertragen. Weitere Informationen zu den Funktionen von AVIF finden Sie in diesem Beitrag von Jake Archibald.