GIF, MP4 ou WebM : quel format pour les boucles

GIF ou MP4 se décide selon l’endroit où la boucle se jouera. Sur les sites web et les réseaux sociaux, le MP4 (et son cousin ouvert le WebM) est presque toujours le bon choix : les fichiers sont en général bien plus petits, la couleur est fluide et la lecture est efficace. Le GIF reste le bon choix à un seul endroit, l’email, parce que la plupart des boîtes de réception affichent les GIF animés et très peu lisent la vidéo. Tout le reste de ce guide détaille cette règle.

Ce qu’est vraiment chaque format

Le GIF est un format d’image de la fin des années 1980 qui peut contenir plusieurs images. Il stocke chaque image avec une palette d’au plus 256 couleurs et compresse chaque image séparément. Le MP4 et le WebM sont des formats vidéo. Ils utilisent des codecs vidéo modernes, comme H.264 dans le MP4 et VP9 ou AV1 dans le WebM, qui stockent ce qui change entre les images plutôt que chaque image en entier. Pour une boucle où la majeure partie de l’image change lentement, la différence est énorme.

Pourquoi les dégradés rendent mal en GIF

Un dégradé lisse sur une image de 1080 pixels peut utiliser des milliers de couleurs distinctes. Une image GIF peut en contenir 256 au plus. L’encodeur a deux choix : arrondir les couleurs à la plus proche de la palette, ce qui produit des bandes visibles, ou éparpiller des pixels de couleurs voisines pour simuler les intermédiaires, ce qu’on appelle le tramage, qui paraît tacheté et alourdit les fichiers. Aucun des deux ne ressemble au dégradé que vous avez conçu.

Le grain aide un peu, car les images bruitées cachent mieux les limites de palette que les images nettes. Mais le vrai remède est de ne pas utiliser le GIF là où la vidéo est possible. Le banding des dégradés explique le même problème sur les images fixes.

MP4 ou WebM pour les sites web

Pour un site web, remplacez les GIF par un élément vidéo qui se comporte comme tel : lecture automatique, muet, en boucle et intégré. Le guide de web.dev sur le remplacement des GIF animés par de la vidéo explique la démarche. Proposez d’abord le WebM, souvent plus léger, et le MP4 en repli, qui se lit presque partout.

<!-- Instead of <img src="loop.gif" alt=""> -->
<video autoplay muted loop playsinline width="600" height="600"
       poster="loop-poster.jpg">
  <source src="loop.webm" type="video/webm">
  <source src="loop.mp4" type="video/mp4">
</video>

Deux autres formats méritent d’être connus. WebP animé et AVIF animé sont des formats d’image, utilisés dans une balise img ordinaire comme un GIF, mais avec toute la couleur et une bien meilleure compression. Les navigateurs modernes prennent en charge les deux. Ils sont pratiques là où un CMS ou une plateforme n’accepte que des images, mais pas pour l’email. Pour les fonds pleine largeur, lisez les fonds vidéo sur les sites web.

Les boucles pour les réseaux sociaux

Les plateformes sociales sont construites autour de la vidéo, et le MP4 est le format que toutes acceptent. Là où une plateforme accepte l’import d’un GIF, elle le traite souvent autrement qu’une vidéo normale : un GIF est donc rarement un avantage. Exportez votre boucle en MP4 à la taille de la plateforme, en H.264, et laissez la plateforme faire le reste. Posts animés ou fixes traite des tailles et des réglages.

Les boucles dans les emails : toujours le GIF

La plupart des clients de messagerie ne lisent pas la vidéo : un GIF animé est donc le moyen pratique de mettre du mouvement dans un email. Gardez-le léger et traitez la première image comme le repli : certains clients, dont certaines versions de l’Outlook classique pour Windows, n’affichent que la première image. Mettez le message dans cette image pour ne rien perdre. Nos guides sur le design d’en-tête d’email et les dégradés dans les emails couvrent le reste.

1. 1

   Restez court

   Deux à six secondes suffisent largement dans un email ; chaque image ajoute du poids.

2. 2

   Réduisez la taille et la cadence

   Exportez à la largeur d’affichage, souvent 600 pixels, et à une cadence plus basse, comme 10 à 15 images par seconde, pour un mouvement lent.

3. 3

   Mettez le message dans la première image

   Les lecteurs qui ne voient que la première image doivent quand même comprendre l’essentiel.

4. 4

   Vérifiez le poids du fichier

   Les gros GIF se chargent lentement sur mobile. S’il est lourd, réduisez la durée, la taille ou les couleurs avant toute autre chose.

Convertir entre GIF et MP4

ffmpeg, un outil gratuit en ligne de commande, gère les deux sens. Transformer une vidéo en bon GIF demande une palette sur mesure construite à partir de la vidéo elle-même ; transformer un GIF en MP4 est plus simple.

# MP4 to GIF: 15 fps, 600 px wide, with a palette made from the clip
ffmpeg -i loop.mp4 -vf "fps=15,scale=600:-1:flags=lanczos,split[a][b];[a]palettegen[p];[b][p]paletteuse" -loop 0 loop.gif

# GIF to MP4: H.264, even dimensions, ready for the web
ffmpeg -i loop.gif -movflags +faststart -pix_fmt yuv420p \
  -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" loop.mp4

# MP4 to WebM (VP9)
ffmpeg -i loop.mp4 -c:v libvpx-vp9 -crf 34 -b:v 0 -an loop.webm

Quel format utiliser, en un coup d’œil

Si vous faites des boucles dans Gradiently, le Studio exporte les deux : une vidéo (MP4 là où votre navigateur peut l’enregistrer, sinon WebM) jusqu’en 1080p, et un GIF avec un choix de qualité gardé sous 15 Mo. Assurez-vous que la boucle se raccorde proprement quel que soit votre choix ; voyez les boucles parfaites.