Remplacer les GIF animés par des vidéos
Convertissez vos GIF animés en MP4 et WebM pour diviser leur poids par dix : moins de bande passante, des pages plus rapides et un meilleur LCP.
Vous avez sans doute déjà inspecté un GIF animé sur un service comme Imgur ou Gfycat pour découvrir qu’il s’agissait en réalité d’une vidéo. La raison est simple : les GIF animés peuvent être énormes, atteignant facilement plusieurs mégaoctets pour quelques secondes d’animation. Ce poids gaspille la bande passante des utilisateurs et ralentit le chargement des pages, au même titre que des visuels mal calibrés quand on néglige d’optimiser le poids des images.
C’est pourtant l’un des chantiers de performance les plus rentables : avec peu d’efforts, convertir un gros GIF en vidéo économise une quantité importante de données. Pour le SEO, l’effet est direct : des médias plus légers se téléchargent plus vite et améliorent la vitesse de la page, un signal pris en compte par Google.
Le GIF animé est un format que je qualifierais d’aberration de performance : plusieurs mégaoctets pour quelques secondes d’animation, là où une vidéo fait le même travail pour une fraction du poids. Si les grands services d’images les ont tous convertis, ce n’est pas un hasard. Mesurez d’abord, convertissez avec FFmpeg, et vous récupérez de la bande passante sans rien perdre à l’écran.
Mesurer avant de convertir
Avant toute conversion, identifiez les GIF concernés avec Lighthouse. Dans les outils de développement, lancez un audit de performance : si des GIF peuvent être convertis, l’audit affiche la recommandation Utiliser des formats vidéo pour le contenu animé. Vous savez ainsi exactement quels fichiers traiter en priorité.
Cette étape évite de convertir des médias sans intérêt et concentre l’effort là où le gain de poids sera le plus significatif. C’est aussi un bon moyen de mesurer l’économie réelle obtenue après la bascule vers la vidéo.
Convertir le GIF avec FFmpeg
Plusieurs outils permettent de convertir un GIF en vidéo, mais FFmpeg reste la référence en ligne de commande. Une commande génère le MP4, une autre le WebM. Il est pertinent de produire les deux : le WebM est nettement plus léger que le MP4, mais tous les navigateurs ne le prennent pas en charge. Le MP4 sert alors de solution de repli universelle.
# Conversion en MP4
ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
# Dimensions impaires : ajouter un filtre de recadrage
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
# Conversion en WebM
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webmDes économies spectaculaires
L’écart de poids entre un GIF et son équivalent vidéo est souvent impressionnant. Le tableau ci-dessous reprend l’exemple documenté par Google : un même contenu animé décliné en trois formats. Pour aller plus loin sur l’allègement du chargement, voyez comment différer les vidéos.
| Format | Poids du fichier | Compatibilité |
|---|---|---|
GIF animé |
3,7 Mo |
Universelle mais très lourde |
MP4 (H.264) |
551 ko |
Tous les navigateurs modernes |
WebM (VP9) |
341 ko |
Large, hors navigateurs anciens |
Reproduire le comportement d'un GIF en vidéo
Un GIF animé possède trois caractéristiques à reproduire : il se lance automatiquement, il tourne en boucle continue et il est silencieux. L’élément video recrée fidèlement ces comportements grâce aux attributs autoplay, loop, muted et playsinline. Ce dernier garantit la lecture en ligne plutôt qu’en plein écran.
L’élément video a besoin d’un ou plusieurs éléments source pointant vers vos fichiers. Fournissez le WebM et le MP4 pour couvrir tous les navigateurs. Attention à l’ordre : le navigateur retient la première source compatible. Si vous voulez privilégier le WebM, placez-le en premier.
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm">
<source src="my-animation.mp4" type="video/mp4">
</video>Pour émuler un GIF animé, n’ajoutez pas l’attribut poster à votre élément video : cette image ne serait pas utilisée. Conséquence importante pour le SEO : un élément video sans image poster n’est pas un candidat au Largest Contentful Paint. Le navigateur retiendra alors un autre élément comme candidat, ce qui améliore souvent le LCP puisque la vidéo, plus lourde, n’est plus en jeu.
À faire
- repérer les GIF avec Lighthouse
- générer à la fois MP4 et WebM
- reprendre autoplay, loop, muted et playsinline
- placer le format le plus léger en premier
À éviter
- conserver un GIF de plusieurs mégaoctets
- ne produire qu’un seul format
- ajouter une image poster à une vidéo de remplacement
- négliger l’ordre des éléments source
Points clés à retenir
- Identifiez les GIF convertibles avec Lighthouse
- Convertissez en MP4 et WebM avec FFmpeg
- Reproduisez le comportement avec autoplay, loop, muted, playsinline
- Servez le format le plus léger en premier
- N'ajoutez pas de poster pour une simple émulation de GIF
Remplacer un GIF par une vidéo est un gain de poids rapide et durable.
Quiz : testez vos connaissances
Quiz : testez vos connaissances
-
Comment identifier de façon fiable les GIF à convertir avant toute conversion ?
- En lançant un audit de performance, qui signale la recommandation « Utiliser des formats vidéo pour le contenu animé »
- En convertissant d'office tous les fichiers du site, car chaque GIF gagne forcément à devenir une vidéo
- En se fiant uniquement à l'extension du fichier, sans mesurer son poids réel
Un audit de performance affiche la recommandation « Utiliser des formats vidéo pour le contenu animé » lorsqu’un GIF peut être converti, ce qui identifie précisément les fichiers concernés avant d’agir.
-
Pourquoi est-il pertinent de produire à la fois un MP4 et un WebM lors de la conversion ?
- Le MP4 est plus léger et le WebM ne sert qu'aux navigateurs anciens
- Les deux formats sont strictement identiques mais portent un nom différent
- Le WebM est plus léger mais n'est pas pris en charge partout, et le MP4 sert de repli compatible
Le WebM est nettement plus léger mais n’est pas pris en charge partout. Le MP4, compatible avec tous les navigateurs modernes, sert de solution de repli.
-
Quels attributs reproduisent le comportement d'un GIF avec un élément video ?
- autoplay, controls et poster
- preload, loop et controls
- autoplay, loop, muted et playsinline
Un GIF se lance automatiquement, tourne en boucle et reste silencieux : les attributs
autoplay,loop,mutedetplaysinlinerecréent fidèlement ce comportement.
À propos de l'auteur
Besoin d'un accompagnement SEO ?
Des GIF animés trop lourds plombent la vitesse de vos pages ?