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éos :
Pourquoi remplacer les GIF animés par des vidéos ?
Les grandes images GIF sont inefficaces pour diffuser du contenu animé. En convertissant les GIF volumineux en vidéos, vous pouvez économiser une grande partie de 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éos.
FFmpeg est l'outil utilisé dans ce guide.
Pour utiliser FFmpeg afin de 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, indiqué 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 le format WebM. Il est donc judicieux de générer les deux formats.
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 clés que les vidéos doivent reproduire :
- Elles sont lues automatiquement.
- Elles sont lues en boucle (généralement, mais il est possible d'empêcher la lecture en 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 permettent de convertir les GIF en vidéos HTML5. Vous importez un GIF dans le CDN d'images, et le CDN d'images 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 dans un service qui permettra de l'intégrer en tant que vidéo.