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
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.
- Öffnen Sie https://squoosh.app.
- Ziehen Sie ein lokales Bild auf Squoosh.
- 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.
- AVIF-Bild herunterladen
Klicken Sie auf die Schaltfläche zum Herunterladen. Das AVIF-Bild wird auf Ihrem lokalen Laufwerk gespeichert.
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.
- Code abrufen
git clone https://github.com/AOMediaCodec/libavif.git
- Ä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.
- 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 ../
- 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
- 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
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!
- 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.
- 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.
- 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
- 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.
ffmpeg -i input.gif -pix_fmt yuv420p -f yuv4mpegpipe output.y4m
- Erstellen Sie ein animiertes AVIF-Bild.
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!
- Hiermit können Sie das animierte AVIF-Bild auf einer Webseite rendern.
Erstellen Sie eine Datei mit dem Namen avif_animated_example.html
.
Ö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
.
- 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:
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.