Utiliser des formats vidéo pour le contenu animé

La section "Opportunités" de votre rapport Lighthouse liste tous les GIF animés, ainsi que les économies estimées en secondes obtenues en convertissant ces GIF en vidéo :

Capture d'écran de l'audit de contenu animé sur l'utilisation des formats vidéo de Lighthouse

Pourquoi remplacer les GIF animés par des vidéos ?

Les GIF volumineux ne sont pas efficaces pour diffuser du contenu animé. En convertissant de grands GIF en vidéos, vous pouvez économiser beaucoup sur la bande passante des utilisateurs. Envisagez d'utiliser des vidéos MPEG4/WebM pour les animations et PNG/WebP pour les images statiques au lieu d'images GIF afin d'économiser des octets réseau.

Créer des vidéos MPEG

Il existe plusieurs façons de convertir des GIF en vidéo. FFmpeg est l'outil utilisé dans ce guide. Pour utiliser FFmpeg pour convertir le GIF, my-animation.gif, en vidéo MP4, exécutez la commande suivante dans votre console :

ffmpeg -i my-animation.gif my-animation.mp4

Cela indique à FFmpeg de prendre my-animation.gif comme entrée (signifié par l'indicateur -i) et de la convertir en une vidéo appelée my-animation.mp4.

Créer des vidéos WebM

Les vidéos WebM sont beaucoup plus petites que les vidéos MP4, mais tous les navigateurs ne sont pas compatibles avec WebM. Il est donc logique de générer les deux.

Pour utiliser FFmpeg pour convertir my-animation.gif en vidéo WebM, exécutez la commande suivante dans votre console :

ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm

Remplacer l'image GIF par une vidéo

Les GIF animés présentent trois caractéristiques clés qu'une vidéo doit reproduire :

  • Elles sont lues automatiquement.
  • Ils sont en boucle en continu (généralement, mais il est possible d'empêcher la boucle).
  • Elles sont silencieuses.

Heureusement, vous pouvez recréer ces comportements à l'aide de l'élément <video>.

<video autoplay loop muted playsinline>
  <source src="my-animation.webm" type="video/webm" />
  <source src="my-animation.mp4" type="video/mp4" />
</video>

Utiliser un service qui convertit les GIF en vidéos HTML5

De nombreux CDN d'images acceptent la conversion de GIF en vidéo HTML5. Vous importez un GIF dans le CDN de l'image, et celui-ci renvoie une vidéo HTML5.

Conseils spécifiques à la pile

AMP

Pour le contenu animé, utilisez amp-anim afin que le processeur soit sollicité le moins possible lorsque le contenu se situe hors écran.

Drupal

Envisagez d'importer votre GIF sur un service pouvant permettre son intégration en tant que vidéo.

Ressources