Utiliser des formats vidéo pour le contenu animé

La section "Opportunités" de votre rapport Lighthouse tous les GIF animés, ainsi que les économies estimées en secondes réalisé 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 gros sur les utilisateurs la bande passante réseau. 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. L'outil utilisé dans ce guide est FFmpeg. 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 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 ont trois caractéristiques principales qu’une vidéo doit reproduire:

  • Elles sont lues automatiquement.
  • Elles sont lues en boucle (généralement, mais il est possible de les éviter).
  • Ils restent silencieux.

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 vidéos GIF en HTML5. Vous importez un GIF dans le CDN d'images, et le CDN d'images renvoie une vidéo HTML5.

Conseils spécifiques aux piles

AMP

Pour le contenu animé, utilisez amp-anim pour réduire au maximum le processeur lorsque le contenu est hors écran.

Ressources