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 le format AVIF, vous pouvez réduire la taille de vos images et accélérer le chargement de votre site Web.

Qu'est-ce que le format AVIF ?

Le format 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 le format AVIF ?

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

Objectifs de l'atelier

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

Ce dont vous avez besoin

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

2. Créer des images au format 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. Dans la liste déroulante "Compress", sélectionnez "AVIF".

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 au format AVIF.

L'image 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 au format AVIF.

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

Vous disposez maintenant de votre propre image au format 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 qui peut décoder et encoder des images au format 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.

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

3. Créez l'outil d'encodage de 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 créé avifenc.

4. Créer des images au format AVIF avec avifenc

1. Créez une image au format 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 au format 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 faible qualité (-q 20), mais il sera de bien meilleure qualité.

5. Afficher des images au format AVIF sur une page Web

Il est temps de montrer au monde entier le fruit de votre travail.

1. Créez une page Web pour diffuser votre image au format 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 (dans mon cas, happy_dog.jpg) 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 au format AVIF si le navigateur est compatible avec ce format, avec un remplacement par le format 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. Vous pouvez également diffuser avif_example.html à partir d'un serveur HTTP.

Votre image au format 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 animées au format AVIF avec FFmpeg

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

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

ffmpeg -i ice_qcif_15fps.y4m animated.avif

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

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

Créez un fichier nommé avif_animated_example.html.

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 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 animée au format AVIF 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 animée au format AVIF, 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 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 animées au format AVIF avec avifenc

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

avifenc accepte le format y4m en entrée pour créer des images animées au format AVIF. FFmpeg est une excellente option pour créer des fichiers y4m.

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

2. Créez une image animée au format AVIF.

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

./avifenc ice_qcif_15fps.y4m animated.avif

Vous disposez maintenant de votre deuxième image animée au format AVIF.

3. Affichez l'image animée au format AVIF sur une page Web.

Créez un fichier nommé avif_animated_example.html.

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 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 animée au format AVIF 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 animée au format AVIF, 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 animated.avif. Vous pouvez également ouvrir les outils pour les développeurs Chrome et vérifier que animated.avif est 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 bien moins bonne qualité. Vous pouvez modifier la qualité du format AVIF pour qu'elle corresponde à peu près à celle du fichier 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 animé au format AVIF et le fichier 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 programmation sur la diffusion d'images au format AVIF.

Nous espérons 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 du format AVIF, consultez cet excellent article de Jake Archibald.