Vous êtes-vous déjà retrouvé face à un GIF animé sur un service comme Imgur ou Gfycat, que vous avez inspecté dans vos outils de développement, pour découvrir qu'il s'agissait en fait d'une vidéo ? Et cela est justifié. Les GIF animés peuvent être énormes.
Heureusement, il s'agit de l'un des domaines de performances de chargement où vous pouvez faire relativement peu de travail pour obtenir des gains considérables. En convertissant les GIF volumineux en vidéos, vous pouvez économiser une grande partie de la bande passante des utilisateurs.
Mesurer d'abord
Utilisez Lighthouse pour vérifier si votre site contient des GIF pouvant être convertis en vidéos. Dans les outils de développement, cliquez sur l'onglet "Audits" et cochez la case "Performances". Exécutez ensuite Lighthouse et consultez le rapport. Si vous avez des GIF qui peuvent être convertis, la suggestion "Utilisez des formats vidéo pour le contenu animé" s'affiche :
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 -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p 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.
L'encodeur libx264 ne fonctionne qu'avec les fichiers dont les dimensions sont paires, comme 320 x 240 pixels. Si le GIF d'entrée a des dimensions impaires, vous pouvez inclure un filtre de recadrage pour éviter que FFmpeg ne génère une erreur "hauteur/largeur non divisible par 2" :
ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
Créer des vidéos WebM
Le format MP4 existe depuis 1999, tandis que le format WebM est relativement nouveau (il a été lancé en 2010). 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
Comparer la différence
Les économies réalisées entre un GIF et une vidéo peuvent être assez importantes.
Dans cet exemple, le GIF initial fait 3,7 Mo, contre 551 Ko pour la version MP4 et seulement 341 Ko pour la version 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).
- Ils sont silencieux.
Heureusement, vous pouvez recréer ces comportements à l'aide de l'élément <video>.
<video autoplay loop muted playsinline></video>
Un élément <video> avec ces attributs se lit automatiquement, se répète à l'infini, ne produit aucun son et se lit en ligne (c'est-à-dire pas en plein écran). Il s'agit là de tous les comportements caractéristiques attendus d'un GIF animé ! 🎉
Enfin, l'élément <video> nécessite un ou plusieurs éléments enfants <source> pointant vers différents fichiers vidéo parmi lesquels le navigateur peut choisir, en fonction des formats qu'il prend en charge. Fournissez à la fois WebM et MP4. Ainsi, si un navigateur n'est pas compatible avec WebM, il peut revenir à MP4.
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm">
<source src="my-animation.mp4" type="video/mp4">
</video>
Effet sur le Largest Contentful Paint (LCP)
Il convient de noter que si les éléments <img> sont des candidats au LCP, les éléments <video> sans image poster ne sont pas des candidats au LCP. La solution dans le cas de l'émulation de GIF animés n'est pas d'ajouter l'attribut poster à vos éléments <video>, car cette image ne sera pas utilisée.
Qu'est-ce que cela signifie pour votre site Web ? Nous vous recommandons d'utiliser un <video> plutôt qu'un GIF animé. Toutefois, sachez que ce type de contenu multimédia ne pourra pas être utilisé pour le LCP. C'est le candidat le plus grand suivant qui sera utilisé à la place. Les GIF et les <video> étant généralement plus volumineux et donc plus lents à télécharger, le fait de passer à un autre candidat LCP améliorera probablement même le LCP du site.