Diffusion d'images AVIF

1. Introduction

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

Qu'est-ce qu'AVIF ?

AVIF est un format d'image dérivé du flux binaire vidéo AV1. Il a été conçu pour une compression efficace.

Pourquoi utiliser AVIF ?

Les images AVIF sont beaucoup plus petites que les images JPEG, PNG, GIF ou WebP, tout en offrant une qualité identique, voire supérieure.

Objectifs de l'atelier

• Créer des images AVIF à partir de vos images
• Afficher des images AVIF sur une page Web

Ce dont vous avez besoin

• N'importe quel navigateur majeur.
• Un éditeur de texte
• cmake
• git
• ninja
• Image. J'en ai fourni une sur ce lien.
• FFmpeg

2. Créer des images AVIF avec Squoosh

Squoosh est une application Web de compression d'images qui peut convertir vos images au format AVIF.

1. Ouvrez Squoosh.
2. Déposez une image locale sur Squoosh.

3. Sélectionnez AVIF dans la liste déroulante "Compress".

Squoosh compressera ensuite votre image au format AVIF. Une fois l'opération terminée, un bouton de téléchargement s'affiche dans l'angle inférieur droit, avec des statistiques sur l'image AVIF.

L'image d'exemple d'origine pesait 3 340 Ko, contre 378 Ko pour l'image compressée. L'image d'exemple a été compressée et sa taille a été réduite de près de 10 fois par rapport à l'image d'origine.

4. Téléchargez 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 dans Chrome.

Vous disposez maintenant de votre propre image AVIF.

3. Créer l'encodeur de ligne de commande avifenc

avifenc est une application de ligne de commande qui peut convertir des images PNG et JPEG au format AVIF. Elle utilise libavif, une bibliothèque capable de décoder et d'encoder des images AVIF. Si vous avez de nombreuses images à convertir au format AVIF, l'utilisation de l'encodeur de ligne de commande avifenc est probablement un bon choix.

Chrome utilise libavif pour afficher les images AVIF.

1. Obtenez le code.

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

2. Accédez au répertoire libavif.

cd libavif/

Il existe de nombreuses façons de configurer avifenc et libavif pour la création. Pour en savoir plus, consultez libavif. Nous allons créer avifenc de sorte qu'il soit lié de manière statique aux bibliothèques de traitement de l'encodeur libaom, du décodeur dav1d et de libyuv.

libyuv est important pour accélérer les performances des conversions de couleurs.

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

Il est recommandé 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 -DAVIF_CODEC_AOM=LOCAL -DAVIF_CODEC_DAV1D=LOCAL -DAVIF_LIBYUV=LOCAL -DBUILD_SHARED_LIBS=OFF -DAVIF_BUILD_APPS=ON ../

Créez avifenc.

make

Vous avez créé avifenc.

4. Créer des images AVIF avec avifenc

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

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

./avifenc happy_dog.jpg example.avif

Vous disposez maintenant de votre deuxième image AVIF.

2. Modifiez la qualité de l'encodage AVIF.

En règle générale, le seul paramètre que vous souhaiterez peut-être modifier lors de l'encodage AVIF est le paramètre quality. quality est un paramètre qui échange la qualité d'une image compressée contre la taille du fichier. Par exemple, un fichier de haute qualité (-q 90) sera beaucoup plus volumineux qu'un fichier de faible qualité (-q 20), mais il sera beaucoup plus beau.

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

5. Afficher des images AVIF sur une page Web

Montrons maintenant au monde entier tout votre travail.

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 ce code :

<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 (dans mon cas, happy_dog.jpg) et votre fichier AVIF (example.avif) dans le même répertoire que avif_example.html.

Nous utilisons l'élément picture pour afficher l'image AVIF si le navigateur est compatible avec ce format, avec un retour à JPEG si ce n'est pas le cas. En savoir plus sur l'élément picture.

2. Ouvrez la page Web dans Chrome.

Pour ouvrir le fichier HTML, vous pouvez par exemple faire glisser avif_example.html dans Chrome. Vous pouvez également diffuser avif_example.html à partir d'un serveur HTTP.

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

6. Créer des images AVIF animées avec FFmpeg

L'installation de FFmpeg sur votre système ne fait pas partie de cet atelier de programmation. Pour en savoir plus sur l'installation de FFmpeg sur votre système, consultez la documentation FFmpeg.

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.

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

1. Créez une image AVIF animée.

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

ffmpeg -i ice_qcif_15fps.y4m animated.avif

Vous disposez maintenant de votre propre image AVIF animée.

2. Affichez l'image AVIF animée sur une page Web.

Créez un fichier nommé avif_animated_example.html.

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

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

<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 l'exemple ci-dessus, ice_qcif_15fps.gif) et votre fichier AVIF (animated.avif) dans le même répertoire que avif_animated_example.html.

3. Ouvrez la page Web dans Chrome.

Pour ouvrir le fichier HTML, vous pouvez par exemple faire glisser avif_animated_example.html dans Chrome. Vous pouvez également diffuser avif_animated_example.html à partir d'un serveur HTTP.

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

Si vous utilisez l'exemple de média fourni, il devrait ressembler à ceci :

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

7. Créer des images AVIF animées avec avifenc

1. Convertissez votre média source au format y4m.

avifenc accepte le format y4m en entrée pour créer des images AVIF animées. Une excellente option pour créer des fichiers y4m consiste à utiliser FFmpeg.

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

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

2. Créez 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 maintenant de votre deuxième image AVIF animée.

3. Affichez l'image AVIF animée sur 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.

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

<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 l'exemple ci-dessus, ice_qcif_15fps.gif) et votre fichier AVIF (animated.avif) dans le même répertoire que avif_animated_example.html.

4. Ouvrez la page Web dans Chrome.

Pour ouvrir le fichier HTML, vous pouvez par exemple faire glisser avif_animated_example.html dans Chrome. Vous pouvez également diffuser avif_animated_example.html à partir d'un serveur HTTP.

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

Si vous utilisez l'exemple de média fourni, il devrait ressembler à ceci :

Sauf que l'image AVIF animée est de bien meilleure qualité.

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

5. Modifiez la qualité de l'encodage AVIF.

Le fichier ice_qcif_15fps.gif est environ sept fois plus volumineux et de bien moins bonne qualité. Vous pouvez modifier la qualité d'AVIF pour qu'elle corresponde à peu près à celle de ice_qcif_15fps.gif en définissant le paramètre de qualité sur 20.

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

Le fichier AVIF animé et ice_qcif_15fps.gif ont maintenant à peu près la même qualité, mais le fichier GIF est environ 22 fois plus volumineux.

8. Félicitations !

Vous avez terminé l'atelier de codage sur la diffusion d'images AVIF.

Nous espérons que vous avez compris comment 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 excellent article de Jake Archibald.