Ajouter du texte à un GIF

Incrustez une légende dans chaque image d'un GIF animé, en laissant le minutage de l'animation exactement tel qu'il était.

1. 1

   Ajoutez votre GIF

   Glissez un GIF animé sur la zone de dépôt, ou cliquez pour parcourir vos fichiers. Le WebP animé et l'APNG fonctionnent aussi. Le fichier est lu sur votre appareil et n'est jamais envoyé en ligne.

2. 2

   Saisissez votre légende

   Écrivez dans la zone de texte et l'aperçu se met à jour au fur et à mesure. Les lignes longues passent seules à la ligne, et la touche Entrée démarre une nouvelle ligne là où vous le souhaitez.

3. 3

   Placez-la et mettez-la en forme

   Choisissez l'une des neuf positions ou faites glisser la légende n'importe où sur l'image. Choisissez une police, une taille, un contour et une couleur. Pour le rendu mème classique, passez le calque en barre de légende : le canevas s'agrandit au-dessus ou en dessous de l'image.

4. 4

   Téléchargez le GIF légendé

   Appuyez sur Ajouter le texte, puis sur Télécharger. Le délai de chaque image, la durée totale et le nombre de boucles ressortent inchangés, si bien que l'animation se joue exactement comme avant.

Un GIF animé se joue sans son, sans commandes et le plus souvent sans le moindre contexte autour de lui. Le texte est la seule chose qui puisse porter la blague, nommer le produit, désigner l'étape du tutoriel ou créditer la source — et il doit faire partie de l'image, parce qu'un GIF est copié hors de sa page et collé ailleurs dans les minutes qui suivent sa publication. Une légende inscrite dans les pixels voyage avec le fichier ; une légende écrite dans le HTML autour, non.

Jusqu'à huit calques de texte, quatre polices fournies au rendu identique sur tous les appareils, des contours et des ombres, une barre de légende qui agrandit le canevas, et du texte calé sur une plage d'images.

Lit le GIF, le WebP animé et l'APNG. Écrit un GIF89a standard en préservant à l'identique le nombre d'images, les délais par image, la durée totale et le nombre de boucles.

Ce qu'apporte une légende incrustée

• Elle survit à la copie. Un GIF est glissé dans une discussion, remis en ligne sur un forum et intégré à une présentation. Le seul texte qui l'accompagne est celui qui se trouve à l'intérieur des images.
• Elle fonctionne sans le son. Les GIF n'ont aucune piste audio, donc une démonstration, une réaction ou une étape de tutoriel doit dire ce qu'elle veut dire par écrit, ou pas du tout.
• Elle transforme une réaction en mème. La légende en haut et en bas est un format que les gens reconnaissent instantanément, et c'est ce qui fait la différence entre un extrait et une blague.
• Elle crédite et elle signe. Une petite ligne semi-transparente dans un coin survit à chaque repartage, et c'est pourquoi filigraner un GIF est un problème de légende plutôt qu'un problème de retouche d'image.

Une image fixe n'offre qu'une seule surface à dessiner. Un GIF animé en offre une pile, chacune ne couvrant potentiellement qu'une partie du canevas, chacune avec son propre délai et son propre masque de transparence, et chacune stockée comme la différence avec l'image précédente. Le texte doit se retrouver sur chacune de ces images, à l'identique, faute de quoi l'animation développe un frémissement le long des bords des lettres que personne ne sait nommer mais que tout le monde voit.

Ce qui se passe pour chaque image

• Composer. Chaque image est dessinée sur un canevas à la taille logique de l'animation, en respectant son décalage, sa méthode d'effacement et sa transparence, pour que la légende se pose sur l'image que verrait réellement un spectateur.
• Matricer une seule fois. La légende est dessinée dans une seule surface de superposition, et non une fois par image. Chaque image reçoit ensuite littéralement les mêmes pixels : la dérive et le scintillement deviennent impossibles, et pas seulement peu probables.
• Amorcer la palette. Vos couleurs de texte et le dégradé entre le remplissage et le contour sont inscrits nommément dans la table des couleurs, avant que les couleurs propres à l'image ne soient déduites d'un histogramme.
• Réoptimiser. Les régions qui n'ont pas changé d'une image à l'autre sont de nouveau marquées transparentes, ce qui représente l'essentiel du poids d'un GIF — et une légende qui ne bouge jamais ne coûte presque rien après la première image.

Identique sur la première image, celle du milieu et la dernière

Comme la légende est une seule matrice composée de nombreuses fois, le contrôle est strict : sur une animation de 100 images, les pixels qui forment les lettres sont comparés sur l'image 0, l'image 50 et l'image 99 et doivent correspondre exactement. C'est le cas. Un outil qui dessine le texte image par image ne peut pas le promettre — une police qui a fini de se charger entre l'image 2 et l'image 3, ou une transformation arrondie différemment à un autre décalage, produit une légende dont la forme n'est subtilement pas la même, et la différence entre images du GIF la renvoie alors intégralement sur chaque image.

Tous les autres outils GIF déplacent des pixels qui existaient déjà. Celui-ci en invente, ce qui le place d'emblée face à la plus ancienne contrainte du format : un GIF ne retient que 256 couleurs au maximum pour toute l'animation. Des lettres lissées sont précisément ce qu'une table pleine ne peut pas absorber. Le bord doux d'une lettre est un dégradé — de la couleur de remplissage vers le contour, et du contour vers ce que se trouve être l'image — et sur des images photographiques ces valeurs intermédiaires n'ont nulle part où aller. Le quantificateur rabat chacune d'elles sur la couleur la plus proche dont il disposait déjà, et la légende revient mâchée. C'est pourquoi les GIF légendés par la plupart des outils en ligne rendent moins bien que la même légende sur un PNG.

Deux réponses, toutes deux mesurées

• Couleurs amorcées, toujours actives. Vos couleurs de remplissage, de contour, d'ombre et de barre, plus six paliers du dégradé entre remplissage et contour, sont inscrites nommément dans la palette avant que les couleurs de l'image ne soient déduites. Avant que cela n'existe, une légende demandée en #ffffff ressortait sans un seul pixel blanc pur dans le résultat — sans que rien n'ait l'air anormal.
• Le mode Net, quand vous le voulez. Il durcit les bords de la légende des deux côtés : la transparence face à l'image, et le remplissage face au contour. La légende n'apporte alors que deux couleurs à la table au lieu de soixante-quatre.
• La mesure. Face à un rendu en couleurs vraies du même composite, sur un fichier de test photographique sans aucune entrée de palette libre : Lissé 2.329 sur 255 sur les pixels de la légende, Net 0.000. L'image derrière la légende s'est améliorée elle aussi, passant de 3.594 à 0.168.
• Ce qui a été essayé puis abandonné. Repondérer l'histogramme des couleurs en faveur de la zone de la légende a été implémenté, mesuré et retiré : une fois les couleurs amorcées nommément, cela n'apportait rien sur les lettres et coûtait en fidélité à l'image, à toutes les tailles de palette testées.

Pourquoi le tramage est désactivé par défaut ici

Tous les outils voisins de cette section appliquent un tramage par défaut et celui-ci non, parce que l'entrée est déjà une animation dont les couleurs provenaient d'une table d'au plus 256 entrées. Le tramage ré-approxime des pixels qui étaient déjà exacts, sur toute l'image, pour ne rien gagner. Mesuré sur l'image 0 face à un rendu en couleurs vraies : l'erreur de fond est de 0.000 sur 255 sans tramage, et entre 8.9 et 11.9 avec le tramage ordonné. Le tramage ordonné et la diffusion d'erreur restent disponibles pour une source en couleurs vraies — un APNG ou un WebP animé — où il y a un vrai dégradé à répartir.

Il y a deux façons de poser des mots sur une animation et elles ne sont pas interchangeables. La superposition place le texte par-dessus l'image, ce qui ne coûte rien en taille ni en forme et recouvre ce qui se trouve dessous. Une barre de légende ajoute une bande au-dessus ou en dessous et déplace l'image vers le bas ou vers le haut pour faire de la place — le canevas devient donc plus haut et rien n'est masqué. La seconde est le format mème classique, et c'est celle que la plupart des outils en ligne ne proposent pas du tout, parce qu'agrandir le canevas oblige à recomposer chaque image à une nouvelle taille.

Laquelle utiliser

• Superposition, pour les GIF de réaction. L'image est la blague et les mots la commentent. Utilisez un contour pour que le texte survive à tout ce qui bouge en dessous.
• Barre au-dessus, pour le format mème. La phrase d'accroche se lit avant l'image. Le canevas grandit exactement de la hauteur dont le texte replié a besoin, plus la marge — deux lignes donnent automatiquement une barre plus haute qu'une seule.
• Barre en dessous, pour les sous-titres et les crédits. Une bande noire sous l'image se lit comme une plaque de sous-titre et ne recouvre jamais l'action. Les barres du haut et du bas peuvent être utilisées ensemble.
• Une barre transparente. Elle agrandit le canevas sans inventer d'arrière-plan, ce dont a besoin un autocollant avec une légende en dessous.

La hauteur de la barre est mesurée, pas devinée

La bande fait exactement la hauteur dont le texte replié a besoin, plus la marge, calculée avant qu'une seule image ne soit dessinée — parce que l'encodeur reçoit une seule largeur et une seule hauteur pour toute l'animation et refuse une image qui arrive à une autre taille. Tapez une légende plus longue et la barre gagne une ligne ; raccourcissez-la et le canevas rétrécit à nouveau. Un GIF de 200×120 avec une barre de deux lignes au-dessus devient 200×172, et l'image est poussée vers le bas plutôt que recouverte.

Une légende superposée à une image en mouvement n'a aucun arrière-plan fixe. Un texte blanc est invisible sur une image claire et un texte noir disparaît dans une image sombre, et comme l'image bouge, une couleur qui fonctionne sur l'image 1 échoue sur l'image 40. Le contour est la réponse, et ce n'est pas une décoration : il place une bordure constante entre la lettre et ce qui se trouve derrière, si bien que le contraste est fixé par vous et non par les images.

Les commandes de lisibilité

• Épaisseur du contour. Mesurée en pourcentage de la taille de police, elle suit donc l'échelle du texte au lieu de se réduire à un filet sur une grande légende. Le tracé est peint au double de l'épaisseur demandée et le remplissage vient par-dessus, ce qui place tout le contour à l'extérieur de la lettre au lieu d'en manger la moitié.
• Ombre. Une ombre portée douce et décalée, pour une séparation plus discrète qu'un contour franc. Elle est dessinée avec la seule passe de contour, de sorte qu'une légende sur plusieurs lignes n'en accumule pas une seconde copie à travers les bords semi-transparents.
• Opacité. Pour les filigranes et les crédits, où l'objectif est d'être présent sans rivaliser avec l'image. Elle s'applique à tout le calque, contour compris.
• Une plaque de fond. Un rectangle rempli derrière les mots, à l'opacité de votre choix. Il fixe le contraste au lieu de l'améliorer, et sur une petite palette c'est la moins coûteuse des quatre : une couleur unie plutôt qu'un contour lissé autour de chaque lettre.

L'effet secondaire dont personne ne parle

Un contour est aussi ce qui permet à un texte lissé de survivre à une petite palette. Sans lui, le bord doux de chaque lettre se fond dans l'image, si bien que les couleurs intermédiaires dépendent des images et ne peuvent pas être prédites. Avec lui, le bord intérieur se fond du remplissage vers le contour — un dégradé court et connu, qui peut être inscrit à l'avance dans la table des couleurs. C'est pour cela que les six paliers amorcés existent, et pourquoi une légende avec contour ressort plus propre qu'une légende sans contour sur le même GIF.

Une légende n'a pas à couvrir toute l'animation. Chaque calque a une plage d'images : il peut donc courir de l'image 10 à l'image 30 et être absent ailleurs. Deux répliques de dialogue deviennent deux calques aux plages différentes ; une chute peut être retenue jusqu'au moment où elle tombe ; un tutoriel peut désigner chaque étape au moment où elle se produit. Le panneau indique combien d'images un calque couvre et à combien de secondes cela correspond, parce qu'un numéro d'image ne veut rien dire sans les délais à côté.

Comment cela reste économe

• Une superposition par ensemble distinct de calques. Une animation entière avec une seule légende toujours présente ne matrice qu'une seule superposition. Deux calques minutés aux plages différentes en produisent trois ou quatre, pas une par image.
• La barre n'est pas minutée. Une barre de légende a modifié la taille du canevas : la bande appartient donc à toute l'animation et seuls les mots vont et viennent. Faire clignoter la bande se lirait comme un défaut de rendu plutôt que comme du texte qui apparaît.
• Les plages sont bornées à l'animation. Une plage qui dépasse la dernière image s'arrête à la dernière image, au lieu de produire silencieusement un calque qui ne se dessine jamais.

C'est l'échec silencieux de presque tous les outils de légendage. Une police est nommée, le navigateur ou le serveur la résout, et si elle manque, autre chose est substitué — sans erreur et sans signe visible. Mesuré dans ce dépôt sur un autre outil : deux entrées d'un sélecteur de quinze polices produisaient des métriques de texte identiques à celles de la famille de repli, ce qui signifie que le canevas dessinait autre chose depuis le début pendant que la liste déroulante affirmait le contraire. Impact, la police des mèmes, ne semble fonctionner que parce que la machine de test tournait généralement sous Windows ; elle est absente de la plupart des appareils Android, iOS et Linux.

Les quatre polices fournies

• Anton. La substitution libre d'Impact, et la police par défaut. Des capitales grasses et condensées — la voix du mème. Fournie plutôt que nommée, pour que chaque appareil obtienne la vraie police.
• Montserrat. Une linéale géométrique en graisse grasse. Le choix neutre pour les démonstrations de produit, les étiquettes et tout ce qui ne doit pas avoir l'air d'une blague.
• Oswald. Condensée, pour que de longues légendes tiennent en largeur sur un GIF étroit sans se réduire à rien. La police des sous-titres.
• Caveat. Une police manuscrite, pour les annotations et les explications à base de flèches et de notes, là où une police mécanique paraît trop formelle.

Comment l'outil prouve que la police a bien pris

Chaque police est enregistrée à partir de son propre fichier avant qu'une seule lettre ne soit mesurée — ce qui compte, parce que mesurer avec une police non enregistrée renvoie les largeurs de la police de repli, et la mise en page calculée à partir d'elles est alors fausse pour la police qui dessine finalement : les lignes se coupent au mauvais endroit et une barre de légende ressort à la mauvaise hauteur. Après l'enregistrement, l'outil vérifie que la famille se résout réellement, et signale à l'écran si ce n'est pas le cas. Il ne dessine jamais discrètement avec une police système en l'appelant Anton.

Les polices fournies couvrent le latin et le latin étendu, c'est-à-dire tous les caractères de l'anglais, de l'espagnol, du français, de l'allemand, du portugais et de l'indonésien. Tout ce qui sort de là retombe sur les polices de votre propre appareil, caractère par caractère, de sorte que les lettres autour restent dans la police choisie. C'est un compromis délibéré : fournir une police couvrant toutes les écritures reviendrait à livrer des dizaines de mégaoctets pour légender un GIF de 200 KB.

Ce que cela signifie en pratique

• Les emoji s'affichent en couleur. La chaîne de repli nomme explicitement les familles d'emoji des plateformes, parce qu'une famille linéale générique se résout en une police de texte et qu'une police de texte dessine un carré vide. Mesuré : une légende avec deux emoji introduit 980 couleurs distinctes dans la superposition, contre 30 pour la même légende sans eux — ce sont vraiment des illustrations en couleur, pas des tracés.
• Le latin accentué est exact. Les sous-ensembles latin et latin étendu de chaque police sont enregistrés, si bien qu'une légende en français ou en portugais ne change pas de police au milieu d'un mot.
• Les autres écritures utilisent les polices de votre appareil. Le cyrillique, le grec, l'arabe, l'hébreu, le thaï et les écritures d'Asie de l'Est s'affichent tous si votre appareil dispose d'une police pour eux, ce qui est le cas de tous les appareils modernes. Ils auront l'allure de la police de votre système plutôt que de la nôtre.

Des capitales en haut et en bas dans une police grasse condensée avec un contour noir, c'est un format, pas un choix de style — il est assez reconnaissable pour qu'un rendu légèrement raté fasse amateur. Le préréglage Mème règle les deux calques d'un coup : Anton, tout en majuscules, remplissage blanc, contour noir à l'épaisseur du format d'origine, un calque ancré en haut et un en bas, dimensionnés en proportion de l'image pour que le rendu soit juste sur n'importe quel GIF.

Bien le faire

• Deux calques, pas deux lignes. L'accroche et la chute sont des calques distincts, pour pouvoir être positionnés et minutés indépendamment. Un seul calque contenant un retour à la ligne place les deux lignes au même endroit.
• Des capitales, délibérément. Le réglage majuscules transforme le texte au moment du dessin plutôt que de vous demander de taper en capitales, si bien que la même légende peut passer d'un format à l'autre sans être ressaisie.
• Des barres pour le format légende. L'autre forme de mème reconnaissable place l'accroche sur une bande blanche au-dessus de l'image plutôt que par-dessus. Changez le placement et le canevas s'agrandit en conséquence.

Un GIF boucle toutes les deux ou trois secondes et le lecteur n'a qu'un seul passage sur les mots avant que l'image ne reparte. C'est une contrainte bien plus dure que pour une image fixe, et c'est la raison pour laquelle la plupart des GIF légendés échouent : le texte est trop long pour être fini avant la boucle, ou trop petit pour être lu à la taille où il sera vu, ou placé exactement là où se trouve le mouvement.

Par matière

• GIF de réaction. Six mots ou moins, en grand, avec un contour, près d'un bord. Si cela ne tient pas sur deux lignes, ce n'est pas une légende de réaction.
• Démonstrations de produit et d'interface. Montserrat, une barre de légende en dessous plutôt qu'une superposition, et une plage d'images par étape pour que chaque intitulé apparaisse avec l'action qu'il décrit.
• Tutoriels et modes d'emploi. Numérotez les étapes et calez chaque calque sur son étape. Une légende permanente énumérant quatre étapes est illisible pendant qu'une cinquième chose bouge.
• Filigranes et crédits. Petit, faible opacité, ancré dans un coin, et sans contour — un filigrane qui rivalise avec l'image se fait rogner par celui qui la repartage.

La taille est un pourcentage, volontairement

Chaque mesure ici — la taille de police, l'épaisseur du contour, l'ombre, la largeur de repli — est un pourcentage de l'image plutôt qu'un nombre de pixels. Une légende de 24 pixels est illisible sur un GIF de 640 pixels et recouvre celui de 90 pixels : une taille en pixels serait donc un réglage à reprendre pour chaque fichier. En pourcentage, un seul jeu de réglages produit une légende d'aspect cohérent sur tout un lot d'animations de tailles différentes.

Légender n'est pas un seul métier. Un mème, une démonstration de produit, un rapport de bug et un filigrane veulent des polices, des placements et un minutage différents, et les réglages qui rendent l'un bon rendent les autres moins bons.

Par objectif

• Mèmes et réactions. Le format pour lequel la mise en page haut et bas existe. Reconnaissable d'un coup d'œil et lisible en une boucle.
• Démonstrations de produit dans un README. Un enregistrement d'écran avec une étape intitulée est de la documentation ; le même enregistrement sans intitulés est de la décoration.
• Assistance et rapports de bug. Une annotation à base de flèche et de note sur un enregistrement du problème épargne un paragraphe de description.
• Publications sociales sans le son. Toute animation qui se lance seule dans un fil est muette : tout ce qu'elle a à dire doit donc être écrit dessus.
• Autocollants et emoji. Un mot court sur un autocollant transparent, avec une barre de légende transparente pour que les mots se placent hors du dessin.

La liste des entrées est fermée et appliquée dès la boîte de dialogue de fichiers plutôt qu'au niveau du moteur : un fichier que cet outil ne sait pas ouvrir est refusé en quelques millisecondes, avec un renvoi vers l'outil qui le peut — au lieu d'être accepté puis d'échouer plus tard derrière un indicateur de chargement.

• GIF en entrée. Animé ou à une seule image, entrelacé ou non, avec une palette globale ou une palette locale différente sur chaque image. Les images en sous-rectangle avec un décalage sont composées sur le canevas complet avant que quoi que ce soit ne soit dessiné dessus.
• WebP animé et APNG en entrée. Les deux sont lus par nos propres démultiplexeurs dans tous les navigateurs plutôt que par un décodeur natif, si bien que les images et le minutage sont identiques partout.
• GIF en sortie, toujours. Un GIF89a standard avec une table de couleurs globale, des délais par image, des méthodes d'effacement et une extension de boucle Netscape.
• Tout le reste est refusé avec un renvoi. Une vidéo est envoyée vers Vidéo en GIF, une image fixe vers le Générateur de mèmes, qui fait le même travail pour une image qui ne bouge pas.

Ce que l'outil lit

Le GIF est décodé nativement là où le navigateur dispose d'un décodeur, et par notre propre lecteur partout ailleurs, si bien qu'une animation s'ouvre de la même façon dans tous les navigateurs au lieu d'arriver réduite à sa première image. Le WebP animé et l'APNG passent toujours par notre propre lecteur, ce qui maintient le nombre d'images et le minutage identiques d'un moteur à l'autre.

Limites de taille et de lot

• Gratuit. Un fichier jusqu'à 50 MB et jusqu'à 300 images, avec trois calques de texte et la palette complète de 256 couleurs. Le forfait gratuit n'est pas une légende de qualité réduite — c'est une légende sur un seul fichier.
• Pro. Jusqu'à 20 fichiers à la fois, téléchargés dans une seule archive ZIP, et huit calques de texte. Le traitement par lot est ce que Pro apporte ici, parce que légender un ensemble d'extraits avec la même ligne de crédit un par un est la vraie corvée.
• La limite commune aux deux forfaits. Chaque image est développée en couleurs vraies pendant son traitement : un budget mémoire borne donc le travail avant qu'il ne commence, plutôt que de laisser l'onglet cesser de répondre pendant que l'anneau de progression continue de tourner.

Rien n'est envoyé en ligne. La police est enregistrée à partir d'octets livrés avec la page, la légende est mesurée et mise en page, une seule superposition est matricée, le fichier est décodé image par image, chaque image est composée avec la superposition, une palette est construite avec vos couleurs déjà dedans, les régions inchangées sont de nouveau marquées transparentes, et le résultat est écrit sous forme de GIF89a standard. Tout cela s'exécute dans un fil d'arrière-plan pour que la page reste réactive, et la mise en correspondance des couleurs s'exécute sur votre matériel graphique là où il est disponible.

Pourquoi le même fichier se légende à l'identique à chaque fois

• Des polices livrées avec la page. Aucune requête réseau ne résout une police à l'exécution : une légende ne peut donc pas dépendre de l'état d'un serveur de polices à cette minute-là, ni des polices qu'un appareil a par hasard installées.
• Un quantificateur déterministe. Une médiane par découpage, et non le quantificateur neuronal aléatoire qu'utilisent la plupart des bibliothèques GIF : la même entrée avec les mêmes réglages produit donc toujours une sortie identique au bit près.
• Des résultats identiques sur tous les chemins. Le chemin accéléré par le matériel graphique et le chemin processeur doivent produire les mêmes octets, et pas seulement des octets semblables — un chemin qui choisirait une autre entrée de palette se verrait sous forme de scintillement de couleur entre les images.

Ce qu'un outil de légendage ne doit pas modifier

Quatre choses doivent ressortir exactement comme elles sont entrées : le nombre d'images, le délai propre à chaque image, la durée totale de lecture et le nombre de boucles. Un outil qui re-minute une animation en la légendant produit un GIF parfaitement valide qui se joue simplement à la mauvaise vitesse, sans que rien dans le fichier ne paraisse anormal. La seule dimension qui puisse changer est la hauteur du canevas, et uniquement lorsque vous avez demandé une barre de légende — ce qui est une demande et non un effet de bord.

La légende est matricée une seule fois puis composée sur chaque image, et la mise en correspondance des couleurs est accélérée par le matériel là où votre appareil le permet, les chemins accéléré et de repli étant vérifiés comme produisant une sortie identique au bit près. Mesuré sur l'appareil de référence : une animation de 100 images en 480×270 légendée en 284 ms. Tout se fait sur votre appareil, pas sur nos serveurs.

• Compresseur GIF
• Optimiseur GIF
• Redimensionner un GIF
• Rogner un GIF
• Générateur de mèmes
• Tous les outils GIF