Comment les GIF animés fonctionnent - des cadres de toile à la compression LZW

Pourquoi les FPG existent encore

Le format d'échange graphique a été créé par CompuServe en 1987 [CompuServe, 1987]. Il supporte l'animation, la transparence et la compression sans perte. Il est limité à 256 couleurs par cadre. Il n'a pas d'audio. Il produit de gros fichiers. Par chaque mesure technique, elle aurait dû être remplacée il y a des décennies.

Et pourtant: Discord, Slack, iMessage, Twitter, Reddit, et email tous les GIF supportent nativement. GIPHY dessert plus de 10 milliards de FPG par jour [GIPHY, 2020]. Le format persiste parce qu'il fonctionne partout, ne nécessite aucun codec, et joue automatiquement. Aucun autre format n'a cette combinaison de support universel et de lecture zéro-friction.

Comprendre comment fonctionnent les GIF est utile au-delà de la trivia — il explique pourquoi votre GIF exporté est 4MB, pourquoi les gradients semblent bagués, et ce que vous pouvez faire à ce sujet.

Étape 1: Capture du cadre

Un GIF animé est une séquence d'images (images) affichée dans l'ordre avec un délai entre chacune. Pour en créer une à partir d'une animation en toile, vous devez saisir l'état de la toile à intervalles réguliers.

Dans un navigateur, cela signifie lire les données pixel d'un élément HTML <canvas> à chaque frame time — généralement via canvas.toDataURL() ou ctx.getImageData(). L'animation est avancée au temps cible, la toile est rendue et les pixels sont capturés. La contrainte clé : vous devez attendre le cycle de peinture du navigateur (requestAnimationFrame) avant de lire les pixels, sinon vous capturez un tampon.

Un GIF typique à 15 FPS pendant 3 secondes nécessite 45 captures de cadre. À la résolution 1080×1080, chaque cadre est d'environ 4,7 millions de pixels.

Étape 2: Quantification des couleurs

GIF prend en charge un maximum de 256 couleurs par cadre, stocké dans une table de couleurs (palette). Un cadre en toile typique a des milliers de couleurs distinctes. Réduire à 256 sans dégradation visible est la partie la plus difficile de l'encodage GIF.

L'approche standard est l'algorithme de coupe médiane [Heckbert, 1982] : trier tous les pixels par leur canal le plus rouge, diviser la liste à la médiane, répéter pour vert et bleu, diviser récursivement l'espace de couleur en 256 régions. La moyenne de chaque région devient une entrée de palette. C'est ce que gif.js — la bibliothèque PinePaper utilise — implémente dans Web Workers pour le parallélisme [Rubaxa, gif.js].

La quantification des couleurs est la raison pour laquelle les GIF gèrent bien les graphiques en couleur plate, mais luttent avec les photographies et les dégradés. Un gradient sur 1080 pixels peut utiliser 500+ couleurs distinctes. La compression jusqu'à 256 produit un baguage visible — marches discrètes où le gradient doit être lisse.

Ce que vous pouvez faire à ce sujet: Utilisez moins de couleurs dans votre conception. Formes plates, remplissages solides, et le texte quantifie bien. Les dégradés lisses et les textures photographiques ne le font pas. Si votre GIF a un baguage, simplifiez la palette et non la résolution.

Étape 3: Compression LZW

Les indices de pixel de chaque cadre (références dans la palette 256 couleurs) sont compressés en utilisant la compression Lempel-Ziv-Welch (LZW) [Welch, 1984]. LZW construit un dictionnaire de séquences d'octets répétées pendant qu'il scanne les données. Lorsqu'il rencontre une séquence qu'il a déjà vue, il sort l'index du dictionnaire au lieu des octets bruts.

Cela signifie que la compression GIF est plus efficace lorsqu'il y a de grandes zones de couleurs répétées - des fonds solides, des formes plates, du texte sur une surface uniforme. Les textures complexes avec variation de niveau pixel produisent de mauvais rapports de compression parce que le dictionnaire LZW trouve peu de séquences répétées.

Conséquences pratiques: Un GIF 1080×1080 de texte blanc sur fond noir pourrait se comprimer à 200Ko. La même résolution GIF d'une photographie complexe peut être de 8 Mo. La taille du fichier dépend davantage de la complexité visuelle que de la résolution ou du nombre d'images.

Étape 4 : Élimination et optimisation des cadres

Les cadres GIF peuvent spécifier une méthode d'élimination: si vous voulez effacer la toile avant de dessiner le cadre suivant, laisser le cadre précédent visible, ou restaurer la Historique. Les encodeurs Smart GIF utilisent frame differencing — encodant uniquement les pixels qui ont changé entre les images, pas l'ensemble du cadre.

Si votre animation a un arrière-plan statique avec un petit élément mobile, un GIF optimisé encode l'arrière-plan une fois et ne met à jour que la région où l'élément a déménagé. Cela réduit considérablement la taille du fichier. L'encodeur de PinePaper utilise gif.js qui applique cette optimisation automatiquement.

Les chiffres

Pour une animation PinePaper typique (1080×1080, 15 FPS, 3 secondes, fond sombre avec texte animé):

Composante	Taille
Cadres bruts (45 × 4.7M pixels × 3 octets)	~634 MB
Après quantification (256 couleurs, 1 octet/pixel)	~211 MB
Après compression LZW	~2-4 MB
Avec cadre différent	~1-2 MB

Le rapport de compression de brut à final est d'environ 300:1 à 600:1. La plupart de cela vient de la quantification de couleur (3:1) et LZW (50:1 à 100:1).

Quand utiliser GIF vs autres formats

Format	Meilleur pour	Limitation
GIF	Support universel, jeux automatiques, applications de messagerie	256 couleurs, gros fichiers, sans audio
WebM (VP9)	Meilleure qualité, petits fichiers, web	Soutien limité en Safari, iMessage
MP4 (H.264)	Médias sociaux, lecteurs vidéo	Nécessite un codec, pas de transparence
APNG	Animation couleur complète avec transparence	Support limité dans les navigateurs plus anciens

GIF est le bon choix lorsque vous avez besoin de compatibilité universelle et de jeu automatique. Pour la qualité ou la taille du fichier, WebM ou MP4 sont mieux.

Essaie

Ouvrez PinePaper Studio, créez un design et exportez en tant que GIF. Observez comment la taille du fichier change lorsque vous:

• Augmenter le nombre de cadres (plus de cadres = plus grand fichier, proportionnellement)
• Ajouter des gradients (mauvaise quantification = fichier plus grand)
• Utiliser des couleurs solides (bonne quantification = fichier plus petit)
• Augmenter la taille de la toile (plus de pixels par image = plus grand fichier)

Chaque changement est une mesure du pipeline de compression. Vous ne faites pas seulement un GIF — vous observez comment la théorie de l'information s'applique à votre conception.

Références

• CompuServe (1987). Spécification du format d'échange graphique, version 87a.
• GAPHY (2020). GIPHY Rapport annuel : 10 milliards de portions quotidiennes.
• Heckbert, P. (1982). Quantification de l'image couleur pour l'affichage du tampon de cadre. Computer Graphics (SIGGRAPH), 16(3), 297-307.
• Rubaxa. gif.js — Encodeur JavaScript GIF utilisant les travailleurs Web. github.com/jnordberg/gif.js.
• Welch, T.A. (1984). Une technique de compression des données à haute performance. IEEE Computer, 17(6), 8-19.

---

L'exportation de PinePaper est gratuite — pas de filigrane, pas d'inscription. Ouvrez pinepaper.studio/editor et exportez votre première animation.