Avez-vous déjà vu un GIF animé sur un service comme Imgur ou Gfycat, l'avoir inspecté dans vos outils de développement pour découvrir qu'il s'agissait vraiment d'une vidéo ? Il y a une bonne raison à cela. Les GIF animés peuvent être très énormes.
Heureusement, il s'agit de l'un de ces domaines des performances de chargement où vous ne pouvez pas faire beaucoup de travail pour obtenir d'énormes gains. En convertissant des GIF volumineux en vidéos, vous pouvez économiser beaucoup de bande passante pour les utilisateurs.
Mesurer d'abord
Utilisez Lighthouse pour rechercher sur votre site des GIF pouvant être convertis en vidéos. Dans DevTools, cliquez sur l'onglet "Audits" (Audits) et cochez la case "Performance" (Performances). Exécutez ensuite Lighthouse et consultez le rapport. Si vous avez des GIF pouvant être convertis, vous devriez voir la suggestion "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éos. Dans ce guide, nous utilisons l'outil FFmpeg.
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 -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 (signalée par l'indicateur -i) et de la convertir en vidéo appelée my-animation.mp4.
L'encodeur libx264 ne fonctionne qu'avec les fichiers de dimensions égales (320 x 240 pixels, par exemple). Si l'image 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 "height/width not divisible by 2" (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
Bien que le format MP4 existe depuis 1999, WebM est un format de fichier relativement nouveau, 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 convertir my-animation.gif en vidéo WebM à l'aide de FFmpeg, 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 importantes.
Dans cet exemple, le GIF initial est de 3,7 Mo, alors que la version MP4, qui est de 551 Ko, et la version WebM, qui ne fait que 341 Ko.
Remplacer l'image GIF par une vidéo
Les GIF animés présentent 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 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 est lu automatiquement, est lu en boucle, ne lit aucun son et est lu de manière intégrée (c'est-à-dire en plein écran), tous les comportements de marque attendus 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, selon le format accepté par le navigateur. Fournissez à la fois WebM et MP4 pour que, si un navigateur n'est pas compatible avec WebM, il puisse passer au format 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 LCP (Largest Contentful Paint)
Il convient de noter que si les éléments <img> sont candidats au LCP, les éléments <video> sans image poster ne le sont pas . 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 restera inutilisée.
Quel impact pour votre site Web ? Il est recommandé de s'en tenir à utiliser un <video> au lieu d'un GIF animé, mais étant donné que ces supports ne sont pas adaptés au LCP et que le candidat le plus élevé sera utilisé à la place. Comme les GIF et les <video> sont généralement plus volumineux et donc plus lents à télécharger, passer à un autre LCP candidat permettra probablement d'améliorer le LCP du site.