GIF animés : légers, fluides et fidèles à votre marque

Un bon GIF animé est léger parce qu’il est pensé autour des limites du format : une taille en pixels modeste, 10 à 15 images par seconde, une palette de couleurs construite à partir de l’animation elle-même et la plus petite part possible de l’image en mouvement. Le GIF stocke au plus 256 couleurs par image et compresse bien moins efficacement que la vidéo, donc la même boucle qui fait un MP4 léger peut devenir un GIF lourd. Utilisez-le là où c’est la seule option, surtout dans les e-mails et certains outils de messagerie et de documents, et soignez-le.

Ce qu’un GIF peut et ne peut pas faire

Les navigateurs traitent aussi les délais extrêmement courts comme plus lents que demandé, donc pousser un GIF vers des fréquences élevées donne souvent un fichier plus lourd qui ne se lit même pas plus vite. Pour comprendre pourquoi la fréquence compte, voyez la fréquence d’images expliquée.

Comment garder un GIF animé léger

Le poids se décide surtout avant l’export. Voici les leviers, par ordre d’importance habituelle.

1. 1

   Créez-le à sa taille d’affichage

   Un en-tête d’e-mail affiché sur 600 px de large n’a pas besoin de faire 1200 px en GIF si le poids compte plus que la netteté sur les écrans haute densité. Diviser la largeur par deux divise les pixels par quatre environ.

2. 2

   Raccourcissez la boucle

   Deux ou trois secondes qui bouclent proprement valent mieux que dix secondes qui accrochent. Chaque image ajoute du poids.

3. 3

   Baissez la fréquence d’images

   10 à 15 fps suffisent pour une couleur qui dérive et du texte. Un mouvement lent demande moins d’images qu’un mouvement rapide.

4. 4

   Animez une plus petite partie de l’image

   Les encodeurs GIF peuvent ne stocker que les pixels qui changent. Un texte fixe sur une zone qui bouge lentement pèse bien moins qu’une image entière en mouvement.

5. 5

   Limitez les couleurs

   Si la création n’utilise que 64 couleurs, une palette de 64 couleurs est plus légère et rend pareil.

Palettes, tramage et effet de bandes

Quand une image contient plus de 256 couleurs, l’encodeur doit choisir. Il peut arrondir chaque pixel à la couleur de palette la plus proche, ce qui transforme les dégradés en bandes visibles, ou il peut tramer, en dispersant des pixels de couleurs voisines pour simuler les nuances intermédiaires. Le tramage paraît plus doux de loin et granuleux de près, et il alourdit les fichiers car le motif change d’une image à l’autre.

• Construisez la palette à partir de l’animation. Une palette générée depuis vos propres images consacre ses 256 places aux couleurs que vous utilisez vraiment, pas à un jeu générique.
• Utilisez un tramage ordonné pour l’animation. Un motif fixe comme Bayer reste en place d’une image à l’autre, donc il scintille moins et se compresse mieux que la diffusion d’erreur.
• Préférez des dégradés plus francs et plus courts. Un dégradé entre deux couleurs proches sur une grande surface est le pire cas. Plus de contraste sur une surface plus petite forme moins de bandes.
• Ajoutez du grain volontairement. Un peu de texture dans la création masque les paliers, même si elle ajoute du poids. Testez les deux.

Le même problème sur les images fixes, et comment le corriger à la source, est traité dans l’effet de bandes des dégradés.

Des réglages d’export qui fonctionnent

Si vous avez une vidéo et qu’il vous faut un GIF, la méthode de palette en deux temps de FFmpeg donne des couleurs bien meilleures qu’une passe unique. La première commande construit une palette à partir de votre clip ; la seconde l’utilise. Gifsicle peut ensuite gagner encore du poids.

# 1. Build a palette from the clip itself
ffmpeg -i loop.mp4 -vf "fps=12,scale=600:-1:flags=lanczos,palettegen=stats_mode=diff" palette.png

# 2. Use it, with ordered dithering that suits animation
ffmpeg -i loop.mp4 -i palette.png -lavfi "fps=12,scale=600:-1:flags=lanczos[x];[x][1:v]paletteuse=dither=bayer:bayer_scale=3:diff_mode=rectangle" loop.gif

# 3. Optional: optimise further (lossy trades a little quality for size)
gifsicle -O3 --lossy=40 loop.gif -o loop-small.gif

Garder un GIF fidèle à la marque

Comme la palette est très réduite, le GIF révèle particulièrement bien si vos couleurs de marque ont été choisies avec soin. Les couleurs de teintes proches se confondent, et un fond qui repose sur des variations subtiles peut s’effondrer en paliers plats. Les marques qui rendent le mieux en GIF s’appuient sur une couleur de fond nette, un ou deux accents affirmés et une typographie assez grande pour survivre à une petite palette.

Gradiently exporte en GIF avec Pro, en plus du MP4 et du WebM, donc vous créez une fois, puis confiez le GIF à votre outil d’e-mailing et la vidéo aux réseaux sociaux. Comme le fond animé est un Mark qui vous appartient, le GIF dans la boîte de réception de quelqu’un ressemble à votre marque plutôt qu’à une boucle de banque d’images. Pour l’e-mail en particulier, lisez les en-têtes d’e-mail animés pour les règles de repli.

Si vous hésitez entre formats plutôt que de peaufiner un GIF, commencez par GIF ou MP4 et MP4 ou WebM.