Utiliser des formats vidéo pour le contenu animé

La section "Opportunités" de votre rapport Lighthouse répertorie tous les GIF animés, ainsi que les économies en secondes réalisées en les convertissant en vidéos:

Capture d'écran de Lighthouse "Utiliser des formats vidéo pour l'audit de contenu animé"

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

Les grands GIF ne sont pas efficaces pour diffuser du contenu animé. En convertissant ces GIF volumineux en vidéos, vous pouvez économiser beaucoup de bande passante. Envisagez d'utiliser des vidéos MPEG4/WebM pour les animations et PNG/WebP pour les images statiques au lieu de 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éos. L'outil FFmpeg est utilisé dans ce guide. Pour convertir le GIF my-animation.gif en vidéo MP4 à l'aide de FFmpeg, exécutez la commande suivante dans votre console:

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

Cela indique à FFmpeg d'utiliser my-animation.gif comme entrée (signifié par l'indicateur -i) et de le 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 afin de 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 principales qu'une vidéo doit reproduire:

  • La lecture se lance automatiquement.
  • Elles sont lues en boucle (généralement, mais il est possible d'éviter les boucles).
  • Ils sont 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 vidéo GIF vers HTML5. Vous importez un GIF sur le CDN de l'image, lequel renvoie une vidéo HTML5.

Conseils spécifiques à la pile

AMP

Pour le contenu animé, utilisez amp-anim afin de minimiser l'utilisation du processeur lorsqu'il se trouve en dehors de l'écran.

Ressources