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. 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 format d'image dérivé du flux binaire vidéo AV1. AVIF a été conçu pour une compression efficace.

Pourquoi 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

Prérequis

• N'importe quel navigateur majeur.
• Un éditeur de texte
• cmake
• git
• ninja
• Image. J'en ai fourni un ici.
• FFmpeg

2. Créer des images AVIF avec Squoosh

Squoosh est une application Web de compression d'images. Elle vous permet de compresser facilement vos images au format AVIF.

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

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

Squoosh compressera ensuite votre image au format AVIF. Une fois le traitement terminé, Squoosh affiche un bouton de téléchargement avec des statistiques sur l'image AVIF en bas à droite.

L'image échantillon d'origine pesait 3 340 Ko, tandis que l'image compressée pèse 378 Ko. L'image exemple a été compressée et sa taille a été divisée par près de 10 par rapport à 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.

Pour afficher votre image AVIF, faites-la glisser dans Chrome.

Vous avez maintenant votre propre image AVIF !

3. Compiler l'encodeur de ligne de commande avifenc

avifenc est une application en ligne de commande qui peut convertir des images PNG et JPEG en images AVIF. avifenc utilise libavif, une bibliothèque qui peut décoder et encoder des images AVIF. Si vous souhaitez convertir de nombreuses images au format AVIF, l'encodeur en 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. Remplacez le répertoire par libavif.

cd libavif/

Il existe de nombreuses façons de configurer avifenc et libavif pour la compilation. Pour en savoir plus, consultez libavif. Nous allons compiler avifenc pour qu'il soit lié statiquement aux bibliothèques d'encodage libaom, de décodage dav1d et de traitement libyuv.

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

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

Il est judicieux 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 réussi à créer 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 exécuter avifenc consistent à définir les fichiers d'entrée et de sortie.

./avifenc happy_dog.jpg example.avif

Vous avez maintenant votre deuxième image AVIF !

2. Modifier 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 basse 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 à leur sujet, exécutez simplement ./avifenc.

5. Afficher des images AVIF sur une page Web

Maintenant, montrez au monde tout le travail que vous avez accompli.

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 picture pour afficher l'image AVIF si le navigateur est compatible avec ce format, et nous revenons à JPEG si ce n'est pas le cas. Pour en savoir plus sur l'élément picture, cliquez ici.

2. Ouvrez la page Web dans Chrome.

Pour ouvrir le fichier HTML, vous pouvez par exemple 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 tester cela, effectuez un clic droit sur l'image et sélectionnez Save image as.... Une boîte de dialogue contenant example.avif devrait s'ouvrir. Vous pouvez également ouvrir les outils pour les développeurs Chrome et vérifier que example.avif a été 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 savoir comment obtenir 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. Afficher 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 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 (ice_qcif_15fps.gif dans l'exemple ci-dessus) 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. Une autre option pour ouvrir le fichier HTML consiste à 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 contenu multimédia fourni, le résultat devrait ressembler à ceci :

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 animated.avif devrait s'ouvrir. Vous pouvez également ouvrir les outils pour les développeurs Chrome et vérifier que animated.avif a été téléchargé.

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

1. Convertissez votre contenu source au format y4m.

avifenc est compatible avec y4m comme entrée pour créer des images AVIF animées. FFmpeg est une excellente option pour créer des fichiers Y4M.

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 avez maintenant votre deuxième image AVIF animée !

3. Afficher 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 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 (ice_qcif_15fps.gif dans l'exemple ci-dessus) 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. Une autre option pour ouvrir le fichier HTML consiste à 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 contenu multimédia fourni, le résultat devrait ressembler à ceci :

Sauf avec l'AVIF animé, qui offre une qualité 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 animated.avif devrait s'ouvrir. Vous pouvez également ouvrir les outils pour les développeurs Chrome et vérifier que animated.avif a été téléchargé.

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

Le fichier ice_qcif_15fps.gif est environ sept fois plus volumineux et de qualité bien inférieure. Vous pouvez modifier la qualité de l'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 désormais à 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 programmation sur la diffusion d'images AVIF.

Nous espérons que vous comprenez maintenant 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 l'excellent article de Jake Archibald.