Pourquoi les GIF échouent au stade de l'extraction

La plupart des mauvais GIF sont déterminés avant l'ouverture d'un logiciel GIF. Quelqu'un extrait chaque image d'un clip de cinq secondes, obtient 150 images, les assemble et se retrouve avec un fichier de 14 Mo qu'une application de chat refuse d'intégrer. L'instinct est alors de comprimer plus fort, ce qui le rend boueux sans le rendre beaucoup plus petit.

Le problème réel se situe en amont. Un GIF n'est pas un codec vidéo : il n'a pas de compensation de mouvement, aucune prédiction inter-images digne de ce nom et un plafond strict de 256 couleurs par image. Chaque image est proche d'une image autonome. Ce seul fait détermine chaque décision ci-dessous.

La séquence à suivre est donc la suivante : décidez d'abord du nombre d'images, ensuite de la palette, et ensuite seulement, souciez-vous de la compression.

Étape 1 : Choisissez l'intervalle d'échantillonnage

La question n'est pas "de combien d'images la source dispose-t-elle" mais "de combien d'images le mouvement a-t-il réellement besoin". Quelques points de départ approximatifs :

  • 10 à 12 ips — le paramètre le plus performant. Assez fluide pour les gestes, les démos d'interface utilisateur et la plupart des clips de réaction. Sur une source à 30 ips, c'est-à-dire toutes les trois images ; à 60 ips, tous les 5.
  • 15 ips — pour un mouvement continu où 12 commence à clignoter, comme un panoramique de caméra ou un objet rebondissant.
  • 5 à 8 ips — pour un contenu de type diapositive : une construction de graphique, un avant/après, un zoom lent. Cela semble souvent délibéré plutôt que bon marché.
  • 24+ ips — cela en vaut rarement la peine. La taille du fichier double à peu près contre 12 ips et la plupart des spectateurs ne peuvent pas le distinguer dans une petite image en boucle.

Dans le extracteur d'image, utilisez le mode "Frame Rate (FPS)" et entrez le diviseur : 3 pour chaque troisième image, 5 pour chaque cinquième. Le nombre d'images se met à jour au fur et à mesure que vous tapez, ce qui correspond au nombre qui prédit réellement la taille de votre fichier.

Vérification d'intégrité avant l'extraction : multipliez le nombre d'images prévu par environ 30 à 60 Ko. Il s’agit d’une approximation réaliste pour un cadre GIF de 480 pixels de large après réduction de la palette. Soixante images atterrissent quelque part entre 2 et 3 Mo. Si cela dépasse votre budget, coupez les images maintenant : c'est bien plus efficace que de compresser plus tard.

Étape 2 : gardez la durée courte

GIF n'a pas de cas d'utilisation de longue durée. Deux à quatre secondes couvrent presque tout ce qui fonctionne comme une boucle, et le point de boucle compte plus que la longueur : un clip qui se termine près de l'endroit où il a commencé se lit comme continu, tandis qu'un clip qui coupe au milieu du mouvement attire l'attention sur la couture à chaque répétition.

Utilisez le curseur de plage de temps pour découper avant d'extraire plutôt que de supprimer des images par la suite. Les horodatages sont visibles lorsque vous faites glisser, afin que vous puissiez placer le point de sortie sur la même pose que le point d'entrée.

Étape 3 : comprenez la limite de 256 couleurs

C'est la contrainte qui surprend les gens, et elle vaut la peine de la comprendre plutôt que de la combattre.

Chaque image GIF est indexée dans une palette de 256 couleurs maximum. Votre vidéo source en compte des millions. Quelque chose doit éliminer la différence, et la façon dont il le fait détermine l'apparence du résultat.

Deux stratégies, et la bonne dépend entièrement du contenu :

  • Dithering disperse les pixels des couleurs de la palette adjacentes pour simuler celles manquantes. Les dégradés – ciels, éclairage doux, ombres sur un visage – survivent bien mieux avec. Le coût est un motif de taches visibles et un fichier sensiblement plus volumineux, car ce bruit annule la compression.
  • Pas de tramage donne des zones de couleurs plates et nettes et des fichiers beaucoup plus petits. Idéal pour les enregistrements d'écran, les démos d'interface utilisateur, les dessins au trait, tout ce qui comporte de grandes régions uniformes. Sur les dégradés photographiques, il produit des bandes dures.

Règle pratique : contenu de l'écran, pas de tramage. Images de la caméra, tramage. Si vous n'êtes pas sûr, exportez les deux et regardez-les en taille réelle : la différence est évidente et cela prend une minute.

C'est aussi pourquoi extraire vers PNG est la bonne décision même si le GIF final comporte 256 couleurs. Chaque artefact JPEG dans la source devient une couleur sur laquelle la palette doit consacrer une entrée. L'introduction d'images propres et sans perte dans l'étape de la palette donne au quantiseur un meilleur point de départ.

Étape 4 : Faites correspondre le délai d'image à l'intervalle que vous avez extrait

Les GIF ne stockent pas de fréquence d'images. Ils stockent un délai par image, en centièmes de seconde — et c'est là que de nombreux GIF finissent par être lus à la mauvaise vitesse.

Le calcul est simple : délai = 100 ÷ votre fps cible.

  • 12 ips → délai de 8 (0,08 s)
  • 10 ips → délai de 10 (0,10 s)
  • 15 ips → délai 7 (arrondi à 6,67)
  • 5 ips → délai 20 (0,20 s)

Deux choses à savoir. Premièrement, l’arrondi est réel : 15 fps ne peuvent pas être exprimés exactement, donc la boucle dérive légèrement. Pour tout ce qui concerne le timing, préférez 10, 12,5, 20 ou 25 ips, qui se divisent proprement. Deuxièmement, la plupart des navigateurs limitent silencieusement les délais inférieurs à 2 (0,02 s) jusqu'à 10 - ainsi, un GIF créé à 50 ips sera lu à 10 ips pour la plupart des spectateurs, soit cinq fois la taille du fichier et aucune fluidité.

Étape 5 : Réduisez la taille, dans l'ordre qui fonctionne

Si le fichier est encore trop volumineux, appliquez-les dans l'ordre. Chacun coûte moins cher en qualité par octet enregistré que celui qui le suit.

  1. Réduisez les dimensions. Réduire de moitié la largeur par quart du nombre de pixels. Un GIF de 480 pixels de large convient à la plupart des contextes d'intégration ; 800+ est rarement nécessaire.
  2. Déposez des images. Passer de 15 à 10 ips supprime un tiers des données pour un changement que la plupart des spectateurs n'enregistreront pas.
  3. Raccourcissez le clip. Sans pitié. Presque tous les GIF ont une seconde au début ou à la fin qui ne fait rien.
  4. Réduisez la palette en dessous de 256. 128 ou même 64 couleurs. souvent invisible sur le contenu de l'écran et nettement plus petit.
  5. Désactiver le tramage si vous l'aviez activé et que le contenu peut le prendre.

Notez que "compresser plus fort" n'est pas sur la liste. La compression du GIF est LZW sans perte — il n'y a pas de cadran de qualité. Tout ce que vous pouvez faire est de décider quelles données inclure en premier lieu.

Quand vous ne devriez pas du tout créer de GIF

Cela vaut la peine de le dire clairement, car cela permet d'économiser beaucoup d'efforts :

  • Tout ce qui dépasse environ cinq secondes. Un MP4 ou un WebM représentera une fraction de la taille avec une meilleure qualité. De toute façon, la plupart des plates-formes qui acceptent les « GIF » les convertissent désormais en vidéo en interne.
  • Contenu photographique avec beaucoup de dégradés. 256 couleurs ne suffisent tout simplement pas, et aucune supercherie de palette corrige le problème.
  • Tout ce qui nécessite de l'audio. Le GIF n'en a pas, et la boucle semblera fausse si la source avait un rythme.
  • Tout ce qui dépasse 800 pixels de large. À ce moment-là, la pénalité de taille est suffisamment sévère pour que la vidéo soit la bonne réponse.

GIF gagne sa place exactement dans une situation : une boucle courte et silencieuse à lecture automatique qui doit fonctionner n'importe où sans lecteur. Pour cela, il est toujours invaincu — à condition que les images entrantes aient été choisies délibérément.

Un exemple concret

Disons que vous souhaitez un GIF d'un Interaction de trois secondes avec l'interface utilisateur à partir d'un enregistrement d'écran à 60 ips, sous 1 Mo.

  1. Découper aux 3,2 secondes qui contiennent l'interaction, la dernière image étant proche de la première.
  2. Extraire en mode FPS avec N = 5 — chaque cinquième image de 60 ips donne 12 ips, soit environ 38 images. Sortie PNG.
  3. Assembler au délai 8, tramage désactivé (il s'agit d'un contenu d'écran avec des couleurs plates).
  4. Ajuster à 600 pixels de large si la source était plus grande.
  5. Vérifiez le résultat. Environ 38 images de contenu plat de l'interface utilisateur atterrissent généralement bien en dessous de 1 Mo. Sinon, baissez la palette à 128 couleurs avant de toucher quoi que ce soit d'autre.

Le tout prend quelques minutes, et chaque étape est une décision que vous avez prise plutôt qu'un défaut dont vous avez hérité.