Avez-vous déjà vu un GIF animé sur un service comme Imgur ou Gfycat, inspecté dans vos outils de développement pour découvrir que le GIF était vraiment une vidéo ? Il y a un une bonne raison. Les GIF animés peuvent être très volumineux.
Heureusement, c'est l'un des aspects des performances de chargement que vous pouvez relativement peu de travail pour obtenir d’énormes gains ! En convertissant de gros GIF vous pouvez faire de grosses économies bande passante.
Mesurer d'abord
Utilisez Lighthouse pour rechercher sur votre site des GIF pouvant être convertis en vidéos. Dans Cliquez sur l'onglet "Audits", puis cochez la case "Performances". Exécutez ensuite la commande suivante : Lighthouse et consultez le rapport. Si vous avez des GIF pouvant être convertis, vous devriez voir une suggestion « Utiliser 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,
L'outil utilisé dans ce guide est FFmpeg.
Pour utiliser FFmpeg afin de convertir le GIF, my-animation.gif en vidéo MP4, exécutez la
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, ce qui signifie
-i et le convertir en une vidéo appelée my-animation.mp4.
L'encodeur libx264 ne fonctionne qu'avec les fichiers de dimensions égales, comme 320 px. de 240 pixels. Si le GIF d'entrée a des dimensions impaires, vous pouvez inclure un filtre de recadrage éviter que FFmpeg génère une valeur "height/width not divisible by 2" (hauteur/largeur non divisible par 2) erreur:
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
Même si le format MP4 existe depuis 1999, le format WebM est un format de fichier relativement nouveau. sorti en 2010. Les vidéos WebM sont beaucoup plus petites que les vidéos MP4, 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 de coûts entre un GIF et une vidéo peuvent être considérables.
Dans cet exemple, le GIF initial fait 3,7 Mo, par rapport à 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 ont trois caractéristiques principales qu’une vidéo doit reproduire:
- Elles se lancent automatiquement.
- Elles sont lues en boucle (généralement, mais il est possible de les éviter).
- Ils restent 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> comportant ces attributs est lu automatiquement, en boucle indéfiniment,
ne lit pas de son et lit de manière intégrée (c'est-à-dire pas en plein écran), toutes les caractéristiques
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, en fonction
les formats compatibles avec le navigateur. Fournissez à la fois des fichiers WebM et MP4, de sorte que si un navigateur
n'est pas compatible avec WebM, mais il peut utiliser le 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 Largest Contentful Paint (LCP)
Il convient de noter que si les éléments <img> sont des candidats pour le LCP, les éléments <video> sans image poster ne sont pas des candidats au LCP. Pour émuler des GIF animés, la solution n'est pas d'ajouter l'attribut poster à vos éléments <video>, car cette image ne sera plus utilisée.
Quel impact pour votre site Web ? Nous vous recommandons de vous en tenir à l'utilisation d'un <video> au lieu d'un GIF animé. Toutefois, étant donné que ces médias ne seront pas adaptés au LCP, le prochain candidat le plus important sera utilisé à la place. Étant donné que les GIF et les <video> sont généralement plus volumineux et plus lents à télécharger, passer à un autre candidat LCP devrait même améliorer le LCP du site.