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

[Canonical HTML page](https://gradiently.design/fr/guide/gif-maker-tips)

Le GIF est ancien, limité et pourtant partout : e-mails, messageries, documents et README. Travaillez avec ses limites plutôt que contre elles, et il peut être étonnamment beau.

## The short version

- Un GIF animé peut contenir au plus 256 couleurs par image, ce qui explique que les dégradés doux forment souvent des bandes ou des mouchetures.
- Les plus gros leviers sur le poids d’un GIF sont les dimensions en pixels, le nombre d’images et la part de l’image qui change d’une image à l’autre.
- Pour la plupart des GIF graphiques, 10 à 15 images par seconde à la taille d’affichage offrent un bon équilibre entre fluidité et poids.
- Générer une palette sur mesure à partir de l’animation elle-même donne des couleurs bien meilleures qu’une palette web générique.
- Utilisez le GIF là où la vidéo ne peut pas être lue, comme dans les e-mails, et le MP4 ou le WebM partout ailleurs.

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

| Limite | Ce que cela implique pour votre création |
| --- | --- |
| 256 couleurs par image | Dégradés, photos et ombres douces doivent tenir dans une petite palette |
| Transparence tout ou rien | Pas de bords doux : les formes lissées prennent un halo sur des fonds inattendus |
| Délais entre images en centièmes de seconde | Un 30 fps exact est impossible ; 10, 20, 25 ou 50 fps se divisent proprement |
| Pas de son | Le message doit fonctionner en silence, ce qui est de toute façon une bonne pratique |
| Compression simple | Les fichiers grossissent vite avec la taille, la durée et le mouvement |

Chaque décision sur un GIF revient à ces cinq faits.

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](https://gradiently.design/fr/guide/frame-rate-explained).

## 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. **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. **Raccourcissez la boucle** Deux ou trois secondes qui bouclent proprement valent mieux que dix secondes qui accrochent. Chaque image ajoute du poids.
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. **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. **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.

- Tel que conçu: `linear-gradient(90deg, #3b0764 0%, #a21caf 50%, #f9a8d4 100%)`
- Arrondi à trop peu de couleurs: `linear-gradient(90deg, #3b0764 0% 16.6%, #5b0f7a 16.6% 33.3%, #7e1594 33.3% 50%, #a21caf 50% 66.6%, #cc62c2 66.6% 83.3%, #f9a8d4 83.3% 100%)`

Une vue exagérée de l’effet de bandes. Les vrais GIF ont plus de paliers, mais sur des dégradés larges et subtils, les paliers restent visibles.

- **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](https://gradiently.design/fr/guide/gradient-banding).

## 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.

```bash
# 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
```

fps=12 et une largeur de 600 px conviennent à un en-tête d’e-mail. stats_mode=diff et diff_mode=rectangle privilégient les parties de l’image qui bougent.

| Usage | Largeur | Fréquence | Durée |
| --- | --- | --- | --- |
| En-tête d’e-mail | 600 à 1200 px | 10 à 15 fps | 2 à 5 secondes |
| Réaction ou sticker de messagerie | 240 à 480 px | 10 à 15 fps | 1 à 3 secondes |
| Démo dans une doc ou un README | 800 à 1200 px | 10 à 20 fps | Aussi court que la démo le permet |
| Diapositive ou présentation | 960 à 1920 px | 15 à 20 fps | 3 à 6 secondes |

Des points de départ. Les en-têtes d’e-mail sont conçus en 1200×600 et affichés sur 600 px de large, donc choisissez la largeur selon que la netteté ou le poids compte le plus.

## 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.

En-tête d’e-mail de bienvenue qui dit merci de nous rejoindre sur un dégradé qui bouge lentement

Conçu pour un en-tête d’e-mail en GIF : de grands mots, un seul fond, une couleur qui bouge lentement pour que peu de pixels changent.

Visuel animé carré avec le seul mot livré sur un dégradé affirmé

Un carré d’un seul mot pour la messagerie et les documents. Peu d’éléments, un contraste franc, une boucle courte.

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](https://gradiently.design/fr/guide/animated-email-header) pour les règles de repli.

### À éviter

- Un GIF sur un site web où la vidéo serait lue
- Exporter en double taille et laisser le HTML réduire, sans vérifier
- 30 fps pour une lente dérive de couleur
- Un texte qui n’apparaît que sur la dernière image
- Des bords transparents doux sur un fond inconnu

### À faire

- Le GIF pour l’e-mail et les outils qui exigent des images ; le MP4 ou le WebM ailleurs
- Choisir la taille délibérément et vérifier le poids du fichier
- 10 à 15 fps, une boucle courte et propre
- Une première image qui fonctionne comme image fixe
- Un fond uni assorti à l’endroit où il sera placé

Si vous hésitez entre formats plutôt que de peaufiner un GIF, commencez par [GIF ou MP4](https://gradiently.design/fr/guide/gif-vs-mp4) et [MP4 ou WebM](https://gradiently.design/fr/guide/mp4-vs-webm).

## FAQ

### Comment réduire la taille d’un GIF animé ?

Réduisez ses dimensions en pixels, raccourcissez la boucle, baissez la fréquence à environ 10 à 15 fps et gardez l’essentiel de l’image immobile. Une palette construite à partir de l’animation et un passage dans un optimiseur comme gifsicle aident encore.

### Pourquoi les dégradés paraissent-ils rayés dans un GIF ?

Une image GIF contient au plus 256 couleurs, donc un dégradé doux est arrondi en paliers. Une palette sur mesure, un tramage ordonné et un peu de grain atténuent tous l’effet.

### Quelle fréquence d’images pour un GIF animé ?

10 à 15 fps conviennent à la plupart des GIF graphiques. Comme les délais entre images d’un GIF se règlent en centièmes de seconde, des fréquences comme 10, 20 ou 25 fps se divisent plus proprement que 30.

### Faut-il utiliser un GIF ou un MP4 ?

Utilisez le MP4 ou le WebM partout où la vidéo est lue, car les fichiers sont plus légers et les couleurs meilleures. Utilisez le GIF pour l’e-mail et les outils qui n’acceptent que des images.

### Un GIF peut-il avoir un fond transparent ?

Oui, mais chaque pixel est soit entièrement transparent, soit entièrement opaque, donc les bords doux prennent une frange visible. Accordez la couleur des bords au fond sur lequel le GIF sera placé.