Avez-vous déjà vu un GIF animé sur un service comme Imgur ou Gfycat, l'avoir inspecté dans vos outils de développement, et découvert qu'il s'agissait en fait d'une vidéo ? Et cela est justifié. Les GIF animés peuvent être très volumineux.
Heureusement, il s'agit de l'un des domaines de performances de chargement où vous pouvez réaliser d'énormes gains avec relativement peu d'efforts. En convertissant de grands GIF en vidéos, vous pouvez économiser beaucoup de bande passante pour les utilisateurs.
Mesurez d'abord
Utilisez Lighthouse pour rechercher sur votre site les GIF pouvant être convertis en vidéos. Dans DevTools, cliquez sur l'onglet "Audits" (Audits) et cochez la case "Performances" (Performances). Exécutez ensuite Lighthouse et consultez le rapport. Si vous avez des GIF pouvant être convertis, une suggestion s'affiche pour vous inviter à "Utiliser des formats vidéo pour le contenu animé":
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 -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 des fichiers dont les dimensions sont paires, comme 320 x 240 px. Si le GIF d'entrée a des dimensions impaires, vous pouvez inclure un filtre de recadrage pour éviter que FFmpeg 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
Alors que le format MP4 existe depuis 1999, le format WebM est un format de fichier relativement récent, 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 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
Comparer les différences
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 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 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></video>
Un élément <video> avec ces attributs se lance automatiquement, en boucle sans fin, ne diffuse aucun contenu audio et s'affiche en ligne (c'est-à-dire pas en plein écran). Il s'agit de tous les comportements caractéristiques des GIF animés. 🎉
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 de la compatibilité du navigateur avec les formats. Fournissez à la fois WebM et MP4 afin que, si un navigateur n'est pas compatible avec WebM, il puisse utiliser MP4 à la place.
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm">
<source src="my-animation.mp4" type="video/mp4">
</video>
Impact sur le Largest Contentful Paint (LCP)
Notez que, bien que les éléments <img> soient des candidats pour le LCP, les éléments <video> sans image poster ne sont pas candidats au LCP. Pour émuler des GIF animés, n'ajoutez pas 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é, mais sachez que ces éléments multimédias ne seront pas candidats au LCP et que le candidat le plus grand sera utilisé à la place. Étant donné que les GIF et les <video> sont généralement plus volumineux et donc plus lents à télécharger, passer à un autre candidat LCP améliorera probablement la LCP du site.