GIF, MP4 ou WebM : le même extrait dans chaque format

Le GIF date de 1987. Il a été conçu pour des graphismes simples sur des modems lents, a gagné l’animation deux ans plus tard, et c’est encore ainsi que la plupart des gens partagent une courte boucle. Pour voir ce que cela coûte, nous avons transformé deux extraits de 10 secondes en GIF, en MP4 et en WebM à la même taille et comparé les fichiers.

Le test

Nous avons créé deux extraits, chacun de 10 secondes de vidéo Full HD à 30 images par seconde, dessinés par du code pour que chaque image d’origine puisse être redessinée ensuite pour la comparaison :

• Un extrait filmé : un lent panoramique sur la photo d’un lac de montagne, avec un léger grain ajouté, comme une vidéo de téléphone.
• Un enregistrement d’écran : une fenêtre d’application où l’on tape du texte, un graphique qui grandit et un pointeur de souris qui bouge.

Chacun a été converti en 480 × 270, une taille typique pour un GIF, avec les mêmes encodeurs que nos outils : le convertisseur vidéo en GIF à ses réglages par défaut de 12 images par seconde et 128 couleurs (et une fois à 24 images par seconde), et le convertisseur vidéo pour le MP4 en H.264 et le WebM en VP9, tous deux à 231 kilobits par seconde. Nous avons ensuite comparé huit images de chaque fichier aux images d’origine avec le SSIM, un score de ressemblance entre deux images où 1 signifie identique.

Résultats

Sur l’extrait filmé, l’écart est énorme. Le GIF pesait 16 fois plus que le MP4, montrait moins de la moitié des images et obtenait pourtant un score plus bas. Doubler sa fréquence à 24 a doublé le fichier, 10,5 Mo, plus de 30 fois le MP4, sans améliorer l’image.

L’enregistrement d’écran est plus clément pour le GIF, car les aplats de couleur et le texte net conviennent à sa limite de 256 couleurs. Il a obtenu 0,988, proche des vidéos, mais le fichier pesait encore presque 5 fois le MP4.

À quoi ressemble la différence

GIF, 5,3 MoMP4, 336 Ko

Un GIF ne peut utiliser que 256 couleurs par image, et notre convertisseur en utilise 128 sauf si vous en demandez plus. Une photo en compte des centaines de milliers : l’encodeur choisit donc une palette pour chaque image et remplace chaque pixel par la couleur la plus proche. Les zones lisses comme l’eau se cassent en bandes, le grain fin de la vidéo devient des points durs, et comme chaque image a sa propre palette, les zones immobiles scintillent légèrement.

Pourquoi le GIF est tellement plus lourd

La raison principale est qu’un GIF stocke chaque image comme une image à part entière. Il compresse chacune sans perte, mais n’a aucun moyen de dire « cette image est la précédente, décalée un peu à gauche ». Certains outils GIF n’enregistrent que la partie de chaque image qui a changé, ce qui aide sur les enregistrements d’écran au fond immobile, mais tout mouvement de caméra change chaque pixel.

Les codecs vidéo reposent sur cette idée. H.264 et VP9 prédisent chaque image à partir des précédentes, ne stockent que ce que la prédiction a raté, et jettent les détails que l’œil ne remarquera pas. C’est pourquoi 30 images par seconde de vidéo pèsent moins que 12 images par seconde de GIF.

MP4 ou WebM ?

Au même débit, le VP9 dans un fichier WebM était 13 % plus léger que le H.264 dans un MP4 sur l’extrait filmé, avec un score légèrement supérieur. Sur l’enregistrement d’écran, c’était l’inverse : l’encodeur H.264 a utilisé moins que son budget sur les parties immobiles et a produit un fichier plus léger, tous deux avec une qualité quasi parfaite. La différence la plus importante est la compatibilité :

• Le MP4 en H.264 se lit partout : chaque navigateur, téléphone, téléviseur, application de messagerie et logiciel de montage. C’est le choix sûr par défaut.
• Le WebM en VP9 se lit dans tous les navigateurs actuels et est courant sur le web, mais certaines applications et les anciens appareils Apple le gèrent mal.

Pour une page que vous maîtrisez, le WebM est un bon choix. Pour tout ce que vous envoyez à d’autres personnes, utilisez le MP4.

Quand un GIF reste pertinent

• L’e-mail. La plupart des applications de messagerie affichent les GIF et ne lisent pas la vidéo. Un GIF court et léger reste le moyen de mettre du mouvement dans une newsletter.
• Les endroits qui n’acceptent que des images, comme certains forums, outils de discussion et systèmes de documentation.
• Les petites boucles avec peu de couleurs : un indicateur de chargement, une courte capture d’un bouton, un sticker.

Beaucoup de sites qui montrent des « GIF », y compris les grands services de recherche de GIF et les réseaux sociaux, les diffusent en réalité sous forme de vidéo en coulisse, exactement pour les raisons ci-dessus. Sur votre propre page, vous pouvez faire de même : un élément vidéo avec autoplay, muted, loop et playsinline se comporte comme un GIF, se lit sur les téléphones et coûte une fraction des données.

<video src="loop.mp4" autoplay muted loop playsinline></video>

Si vous faites quand même un GIF

• Faites court. Le poids grandit à chaque image. Deux à quatre secondes suffisent en général pour une boucle.
• Faites petit. 480 pixels de large suffisent pour la plupart des usages ; doubler la largeur multiplie à peu près le poids par quatre.
• Utilisez 10 à 15 images par seconde. Davantage d’images coûte plus qu’il n’apporte.
• Évitez les images filmées quand c’est possible. Les enregistrements d’écran et les animations se compressent bien mieux.

Le convertisseur vidéo en GIF vous laisse choisir la partie de la vidéo, la largeur, la fréquence d’images et le nombre de couleurs, et affiche le nombre d’images prévu avant de commencer. Pour transformer un extrait façon GIF en vidéo bien plus légère, utilisez le convertisseur vidéo. Les deux fonctionnent dans votre navigateur.