Diffusion d'images AVIF

1. Introduction

En moyenne, les images représentent plus de 60% des octets nécessaires au chargement d'une page Web. Le format AVIF vous permet de réduire la taille de vos images et d'accélérer le chargement de votre site Web.

Qu'est-ce que le format AVIF ?

AVIF est un nouveau format d'image dérivé du bitream vidéo AV1. AVIF a été conçu pour l'efficacité de la compression.

Pourquoi AVIF ?

Les images AVIF sont beaucoup plus petites que les images JPEG, PNG, GIF ou WebP, de qualité identique ou supérieure.

Objectifs de l'atelier

• Comment créer des images AVIF à partir de vos images
• Comment afficher des images AVIF dans une page Web

Prérequis

• Chrome 85 ou version ultérieure
• Un éditeur de texte
• cmake
• git
• Ninja
• Image. J'en ai fourni une ici
• FFmpeg

2. Créer des images AVIF avec Squoosh

Squoosh est une application Web de compression d'images. Avec Squoosh, vous pouvez facilement compresser vos images au format AVIF.

1. Ouvrez https://squoosh.app.
2. Déposez une image locale sur Squoosh.

3. Sélectionnez AVIF dans la boîte déroulante Compresser.

Squoosh compresse ensuite votre image au format AVIF. Une fois l'opération terminée, un bouton de téléchargement et des statistiques sur l'image AVIF s'affichent dans le coin inférieur droit.

L'exemple d'image d'origine mesurait 3 340 Ko et l'image compressée 378 Ko. L'image échantillonnée a été compressée presque 10 fois plus petite que l'image d'origine.

4. Télécharger l'image AVIF

Cliquez sur le bouton de téléchargement pour enregistrer l'image AVIF sur votre disque local.

Vous pouvez afficher votre image AVIF en la faisant glisser vers Chrome.

Vous disposez désormais de votre propre image AVIF !

3. Création d'Avifenc pour l'encodeur de ligne de commande

avifenc est une application de ligne de commande qui permet de convertir des images PNG et JPEG en images AVIF. avifenc utilise libavif, une bibliothèque capable de décoder et d'encoder des images AVIF. Si vous souhaitez convertir de nombreuses images au format AVIF, nous vous recommandons d'utiliser l'encodeur de ligne de commande avifenc.

Chrome utilise libavif pour afficher les images AVIF.

1. Récupérez le code.

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

2. Passez au répertoire libavif.

cd libavif/

Vous pouvez configurer avifenc et libavif de différentes manières pour les compiler. Pour en savoir plus, consultez le site libavif. Nous allons créer avifenc pour qu'il soit associé de manière statique à la bibliothèque d'encodeurs et de décodeurs Av1, libaom.

3. Créez et développez une libaom.

Accédez au répertoire des extensions libavif.

cd ext

La commande suivante extrait le code source de libaom et crée une version statique de libaom.

./aom.cmd

Passez au répertoire libavif.

cd ../

4. Créez l'outil d'encodage de ligne de commande avifenc.

Nous vous recommandons de créer un répertoire de compilation pour avifenc.

mkdir build

Accédez au répertoire de compilation.

cd build

Créez les fichiers de compilation pour avifenc.

cmake -DCMAKE_BUILD_TYPE=Release -DAVIF_LOCAL_AOM=1 -DAVIF_CODEC_AOM=1 -DBUILD_SHARED_LIBS=0 -DAVIF_BUILD_APPS=1 ../

Créez des avifenc.

make

Vous avez créé des avifenc !

4. Créer des images AVIF avec avifenc

1. Créer une image AVIF avec les paramètres par défaut

Les paramètres les plus élémentaires pour exécuter avifenc sont la définition des fichiers d'entrée et de sortie.

./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

"–min 0 –max 63 -a end-usage=q -a cq-level=32 -a tune=ssim -a deltaq-mode=3 -a Sharpness=3 -y 420" sont les paramètres recommandés pour les images AVIF.

Avifenc propose de nombreuses options qui affectent à la fois la qualité et la vitesse. Pour afficher les options et en savoir plus à leur sujet, exécutez ./avifenc.

Vous disposez maintenant de votre propre deuxième image AVIF !

2. J'accélère l'encodeur.

Il peut être judicieux de modifier le paramètre --jobs en fonction du nombre de cœurs de votre machine. Ce paramètre définit le nombre de threads qu'avifenc utilisera pour créer des images AVIF. Essayez d'exécuter cette ligne de commande.

./avifenc happy_dog.jpg example.avif --jobs 8

Cela indique à avifenc d'utiliser 8 threads lors de la création de l'image AVIF. Sur ma machine, cela accélère l'encodage AVIF par 5x.

5. Affichez des images AVIF sur une page Web.

Maintenant, montrons au monde tout le travail acharné.

1. Créez une page Web pour diffuser votre image AVIF.

Créez un fichier nommé avif_example.html.

Ouvrez avif_example.html dans votre éditeur de texte et saisissez le code suivant:

<html>
  <head>
    <title>AVIF Example</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="example.avif" />
      <img src="happy_dog.jpg" />
    </picture>
  </body>
</html>

Copiez votre fichier source (happy_dog.jpg, dans mon cas) et votre fichier AVIF (eaxmple.avif) dans le même répertoire que avif_example.html.

Nous utilisons l'élément pour afficher l'image AVIF si le navigateur est compatible avec ce format. Dans le cas contraire, nous utiliserons l'élément JPEG en remplacement. Pour en savoir plus sur , cliquez ici.

2. Ouvrir la page Web dans Chrome.

Pour ouvrir le fichier HTML, vous pouvez faire glisser avif_example.html dans Chrome. Une autre option pour ouvrir le fichier HTML consiste à diffuser avif_example.html à partir d'un serveur HTTP.

Votre image AVIF devrait maintenant s'afficher dans Chrome. Pour ce faire, effectuez un clic droit sur l'image et sélectionnez Save image as.... Une boîte de dialogue devrait alors s'ouvrir avec example.avif. Vous pouvez également ouvrir les outils pour les développeurs Chrome et voir que example.avif est téléchargé.

6. Créer des images animées AVIF

1. Convertissez votre contenu multimédia source au format Y4M.

avifenc accepte y4m comme entrée pour créer des images AVIF animées. FFmpeg est un excellent moyen de créer des fichiers Y4M.

Les fichiers Y4m ne sont pas compressés. Ils peuvent donc être très volumineux.

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

2. Créer une image AVIF animée

J'ai créé un fichier y4m que vous pouvez utiliser si vous n'avez pas de fichier multimédia source: ice_qcif_15fps.y4m. Le fichier provient de Xiph.org Video Test Media.

Exécutez cette commande pour créer une image AVIF animée à partir d'un fichier y4m.

avifenc ice_qcif_15fps.y4m animated.avif

Vous disposez désormais de votre propre image AVIF animée !

3. Afficher l'image AVIF animée dans une page Web.

Créez un fichier nommé avif_animated_example.html.

J'ai créé un fichier GIF que vous pouvez utiliser si vous n'avez pas de fichier multimédia source: ice_qcif_15fps.gif.

Notez que le fichier GIF est environ 35 fois plus grand et de bien moins bonne qualité.

Ouvrez avif_animated_example.html dans votre éditeur de texte et saisissez le code suivant:

<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>

Copiez votre fichier source (dans le cas ci-dessus ice_qcif_15fps.gif) et votre fichier AVIF (animated.avif) dans le même répertoire que avif_animated_example.html.

4. Ouvrir la page Web dans Chrome.

Pour ouvrir le fichier HTML, vous pouvez faire glisser avif_animated_example.html dans Chrome. Une autre option pour ouvrir le fichier HTML consiste à diffuser avif_animated_example.html à partir d'un serveur HTTP.

Votre image animée AVIF devrait maintenant s'afficher dans Chrome.

Si vous utilisez l'exemple de média fourni, le résultat doit se présenter comme suit:

Sauf avec le fichier AVIF animé, la qualité est bien meilleure.

Pour vérifier qu'il s'agit bien d'une image AVIF animée, effectuez un clic droit sur l'image et sélectionnez Save image as.... Une boîte de dialogue contenant animated.avif devrait alors s'ouvrir. Vous pouvez également ouvrir les outils pour les développeurs Chrome et voir que animated.avif est téléchargé.

7. Félicitations !

Vous avez terminé l'atelier de programmation d'images AVIF.

J'espère que vous avez compris comment le format AVIF peut vous aider à réduire la taille de vos images et à les transmettre plus efficacement sur le Web. Pour en savoir plus sur les fonctionnalités d'AVIF, consultez cet article de Jake Archibald.