Découper un GIF en images

Transformez un GIF animé en un ensemble d'images séparées, une par image, dans l'ordre où l'animation se lit.

1. 1

   Ajoutez votre animation

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

2. 2

   Choisissez un format et les images voulues

   Le PNG conserve chaque pixel tel quel et c'est le choix par défaut. Prenez ensuite toutes les images, une plage, une image sur N, ou saisissez une liste comme 1, 3, 5-9 : le compte se met à jour avant toute exécution.

3. 3

   Extrayez

   Chaque image sélectionnée apparaît à l'écran dans sa propre vignette, numérotée selon sa position dans l'animation d'origine et accompagnée de sa propre durée.

4. 4

   Enregistrez une image ou toutes

   Chaque image a son propre téléchargement, ou prenez l'ensemble en un ZIP. L'archive contient aussi un petit fichier de durées listant le délai de chaque image, pour refaire l'animation à l'identique.

Une animation est une pile d'images qui se fait passer pour un seul fichier, et bien souvent l'image dont vous avez besoin se trouve à l'intérieur. Vous voulez l'image exacte où l'expression fonctionne, pour en faire une miniature. Vous voulez vérifier si la troisième image est vraiment celle qui porte l'artefact. Vous voulez récupérer la planche de sprites d'un GIF qu'on vous a envoyé, faute des fichiers d'origine. Ou vous voulez modifier l'animation image par image, ce qui suppose d'avoir les images.

Prenez toutes les images, une plage, une image sur N ou une liste que vous saisissez — en PNG, JPG, WebP ou GIF, avec une planche de sprites dans la même opération.

Lit le GIF, le WebP animé et l'APNG. Écrit une image fixe par image de l'animation, numérotée selon sa place dans la source, plus une planche de sprites facultative et un fichier de durées dans l'archive.

Ce qu'un jeu d'images vous apporte

• La bonne image. Une image tirée de l'animation, en pleine qualité, à utiliser comme affiche, miniature ou photogramme. Faire défiler un GIF dans un navigateur et faire une capture donne une approximation rééchantillonnée et recompressée ; extraire donne l'image.
• Quelque chose de modifiable. Tous les éditeurs d'images travaillent sur des images fixes. Découper, modifier, remonter : c'est ainsi que se font la plupart des retouches de GIF, et la première étape est celle où presque tout le monde bloque.
• Une planche de sprites. Les moteurs de jeu et l'animation CSS veulent une image unique avec les cases disposées en grille. La refaire à la main depuis une animation est fastidieux ; c'est la même opération que l'extraction, rangée autrement.
• Des preuves. Le nombre d'images, les durées et le contenu exact des pixels sont ce qu'il vous faut quand une animation semble fausse et que vous cherchez pourquoi.

C'est ce qui sépare un extracteur qui fonctionne d'un extracteur qui produit un dossier de fragments incompréhensibles. Une image de GIF n'est pas tenue d'être l'image entière. Le format autorise chaque image à être un rectangle de n'importe quelle taille, placé à n'importe quelle position, avec sa propre palette, sa propre couleur transparente et sa propre consigne sur ce qu'il faut faire du canevas ensuite. Une animation de vingt images montrant un visage dont seuls les yeux clignent peut stocker la première image en 400 par 300 et les images deux à vingt en carrés de 60 par 20. Confier ces images brutes à un encodeur produit une image utilisable et dix-neuf minuscules recadrages d'un œil, ce que personne n'entend par découper un GIF.

Ce qui arrive ici à chaque image

• Composition. Chaque image est dessinée sur un canevas de la taille logique complète de l'animation, en respectant sa position, sa transparence et la méthode d'effacement de l'image précédente. Ce qui est exporté est l'image qu'un spectateur aurait réellement vue à cet instant.
• Sélection. Les images demandées sont prises par indice, sans décoder les autres. La sélection est de l'arithmétique pure : rien n'est rééchantillonné et rien ne perd en qualité.
• Mise à l'échelle, si demandée. Un tracé par image à la taille réduite, sur votre matériel graphique lorsqu'il est disponible. Le réglage d'échelle ne peut pas agrandir ; extraire des images plus grandes que l'animation reviendrait à inventer des pixels qu'elle n'a jamais eus.
• Encodage. Un fichier par image, écrit directement et non via une capture de canevas. En PNG c'est sans perte, donc l'image exportée et l'image décodée sont les mêmes pixels.

Ce qu'un séparateur ne doit pas changer

Trois choses doivent survivre, et les trois sont vérifiées à chaque exécution plutôt que supposées. L'ORDRE : l'image trois de l'animation doit être le fichier trois de la sortie, ce qui est vérifié pixel par pixel contre la source avec une bibliothèque d'images indépendante. LE CANEVAS : chaque image sort à la taille complète de l'animation, donc une image qui n'est qu'un sous-rectangle est composée et non recadrée. Et LES DURÉES : le délai propre de chaque image l'accompagne jusqu'au fichier de durées de l'archive, car les délais d'un GIF sont par image et irréguliers bien plus souvent qu'on ne le croit. Un outil qui perd l'une des trois produit quand même un dossier plein d'images plausibles, et c'est exactement pour cela que chacune est mesurée.

Une image de GIF est une image à palette : 256 couleurs au plus, dont une éventuellement transparente. Ce seul fait décide de tout le choix du format de sortie, et c'est pourquoi le format par défaut ici est le PNG et non le JPG que mettent en avant la plupart des outils.

Format par format

• PNG — le choix par défaut, et sans perte. Stocke les couleurs de l'image exactement et conserve la transparence. Comme une image de GIF a très peu de couleurs distinctes, le PNG la compresse en général bien, donc le sans-perte coûte moins que vous ne le croiriez. Ne choisissez autre chose que pour une raison précise.
• JPG — petit, pour le photographique. Bon pour des images issues de vidéo, déjà bruitées, quand vous en extrayez beaucoup. Il n'a pas de transparence, donc une couleur de fond est peinte dessous ; et il ajoute des halos autour des bords nets, ce qui est le mauvais compromis pour du texte, des captures et du dessin au trait.
• WebP — entre les deux. Plus petit que le PNG à rendu comparable, et contrairement au JPG il garde la transparence. Le hic : tous les navigateurs ne savent pas en ÉCRIRE, donc le réglage vous dit si le vôtre le peut plutôt que de le supposer.
• GIF — une image qui reste à palette. Chaque image réécrite comme son propre GIF à une seule case, palette intacte. C'est le format à choisir quand les images repartent vers un autre outil d'animation qui les attend ainsi.

Le problème de la boîte noire

Si vous avez déjà extrait les images d'un autocollant ou d'une animation de logo et obtenu un dossier d'images posées dans des rectangles noirs, voici pourquoi : le JPG n'a pas de canal alpha, et un pixel transparent dessiné sur un canevas vierge est noir, si bien qu'un extracteur qui écrit du JPG sans y penser produit exactement cela. Ici une couleur de fond est peinte sous chaque image avant d'écrire un format opaque, et elle vaut blanc par défaut parce que c'est presque toujours ce que l'on veut. Le noir est proposé pour les cas où ce n'est pas le cas. Le réglage est vérifié dans les deux sens : un choix de fond qui produirait la même image des deux côtés serait une étiquette, pas un réglage.

• GIF to PNG converter — one picture in, one picture out. Use it when you have a still GIF you want as a PNG; for an animation it gives you the first frame, not the set.
• GIF to JPG converter — the same, for JPG, and with the same background handling for transparency. Use it for one picture; use this page when you want what is inside an animation.

Tout extraire est étonnamment rarement la bonne idée. Un enregistrement d'écran de trois secondes à 30 images par seconde, ce sont quatre-vingt-dix fichiers, dont la plupart ne diffèrent de leur voisin que par un curseur déplacé de quatre pixels. Choisir un sous-ensemble est en général plus rapide et plus utile, et le compte de la sélection s'affiche avant toute exécution, donc rien n'est à deviner.

Les quatre façons de sélectionner

• Toutes les images. Le réglage par défaut. Le bon choix quand l'animation est courte, ou quand vous avez vraiment besoin de toutes.
• Une plage. Deux numéros, bornes comprises. Le choix naturel quand la partie qui vous intéresse est un passage d'un clip plus long. Les deux champs sont bornés par le nombre réel d'images, donc impossible de demander une image qui n'existe pas.
• Une image sur N. Une sur deux, sur trois, sur quatre, etc. C'est ainsi que l'on transforme un long enregistrement en une planche contact d'une douzaine d'images représentatives sans les choisir une à une.
• Une liste saisie. Numéros isolés et plages mélangés, comme 1, 3, 5-9. Une plage écrite à l'envers est lue comme les images qui se trouvent entre les deux, les doublons fusionnent, et la sortie est toujours dans l'ordre de lecture quel que soit l'ordre de saisie. Ce qui n'est pas lisible est signalé plutôt qu'ignoré en silence.

Pourquoi la limite gratuite porte sur la SORTIE

La plupart des outils à offre gratuite limitent le fichier que vous pouvez ouvrir. C'est le mauvais axe pour celui-ci : cela refuserait d'emblée un enregistrement de 300 images, y compris à quelqu'un qui n'en voulait que cinq au milieu. Ici la limite porte sur le nombre d'images EXTRAITES en une fois — soixante en gratuit — donc toute animation est acceptée et la limite est quelque chose que votre propre sélection peut satisfaire. Quand une sélection dépasse, l'outil le dit avant de commencer, indique le nombre réel et propose un bouton qui ajuste la sélection. Pro supprime la limite et accepte jusqu'à vingt animations d'un coup.

Une planche de sprites, ce sont les mêmes images disposées sur une seule image au lieu de plusieurs, et c'est ce que veut en général un moteur de jeu, une animation CSS ou une figure de documentation. L'activer produit la planche EN PLUS des images individuelles et non à leur place, parce qu'on veut assez souvent les deux pour que devoir choisir soit une gêne.

La disposition

• Colonnes automatiques. Laissez le nombre de colonnes à zéro et les images se rangent dans une grille à peu près carrée : neuf images donnent trois par trois, dix donnent quatre par trois. Que la dernière rangée soit incomplète est normal.
• Une bande. Une colonne donne une bande verticale, et autant de colonnes que d'images donne une seule rangée horizontale. Les deux sont courantes en animation CSS par sprites, où la position du fond se déplace sur un seul axe.
• L'espacement. Un écart entre les cases, en pixels, pour les moteurs qui échantillonnent légèrement hors case et récupéreraient sinon le bord de la case voisine. L'écart n'est ajouté qu'entre les cases, jamais autour, pour que le calcul de position d'une case reste simple.
• Elle suit la sélection. La planche contient les images sélectionnées, pas toute l'animation : une image sur trois parmi huit donne une planche de trois cases, et une plage donne une planche de cette plage.

Découper n'est en général que la moitié du travail. L'autre moitié est le remontage, et c'est là que presque tous les extracteurs vous laissent tomber sans le dire : ils vous remettent un dossier d'images et jettent la seule chose qui en faisait une animation. Un GIF stocke un délai pour chaque image indépendamment, et les vraies animations s'en servent : une pose tenue une seconde, puis six images à 40 millisecondes. Remonter à partir des seules images oblige à deviner une cadence unique, qui ne peut pas reproduire cela.

Le fichier de durées

Chaque archive produite par cet outil contient, à côté des images, un petit fichier séparé par des virgules listant le numéro de chaque image, son nom de fichier, son propre délai en millisecondes et son instant de départ dans l'animation. Quelques centaines d'octets, et toute la différence entre un dossier d'images et une animation que vous pouvez refaire. Redonnez les images et ces délais au Créateur de GIF et le résultat se lit exactement comme l'original. Les délais sont lus dans la source et repris sans y toucher : les nombres avec lesquels l'animation a été créée, pas une moyenne ni une cadence arrondie.

Tous les chiffres ci-dessous sont produits par la batterie de tests de cet outil sur l'appareil de référence et sont reproductibles en la relançant. Quand une affirmation porte sur l'exactitude plutôt que sur la vitesse, elle est vérifiée contre une bibliothèque d'images indépendante qui ne partage aucun code avec cet outil : la comparaison n'est donc pas notre sortie jugée contre notre sortie précédente.

Les chiffres

• Débit Une animation de 100 images en 480 par 270 devient 100 fichiers PNG en 512 ms, ou 100 JPG en 155 ms. Un GIF de réaction typique de huit images prend 2 ms.
• Taille des fichiers Ces 100 images PNG totalisent 3,0 Mo. Les mêmes images via l'encodeur PNG du navigateur totalisent 7,7 Mo — 2,59 fois plus, pour des pixels vérifiés identiques.
• Identité des images Chaque fichier exporté est comparé à l'image source dont il porte le numéro, pixel par pixel, par un décodeur indépendant. La comparaison porte sur l'égalité, pas sur une tolérance : exporter en PNG une image décodée est sans perte des deux côtés, il n'y a donc rien à tolérer.
• Planche de sprites Une planche de 100 cases en 4800 par 2700 est construite et écrite en 926 ms, dans la même opération que les images individuelles.
• Sélection Choisir les images à garder ne coûte rien du tout : c'est de l'arithmétique d'indices, donc les images non demandées ne sont jamais encodées.

La liste des entrées est fermée et appliquée au niveau du sélecteur de fichiers, pas du moteur : un fichier que cet outil ne sait pas ouvrir est refusé en quelques millisecondes avec un chemin vers l'outil qui le peut, plutôt qu'accepté puis mis en échec derrière un indicateur de chargement.

• GIF en entrée. Animé ou à une seule image, entrelacé ou non, avec palette globale ou une palette locale différente sur chaque image. Les images qui sont des sous-rectangles positionnés sont composées sur le canevas complet avant toute écriture.
• WebP animé et APNG en entrée. Les deux sont lus par nos propres démultiplexeurs sur tous les navigateurs plutôt que par un décodeur natif, donc le nombre d'images et les durées sont identiques partout au lieu de dépendre du navigateur utilisé.
• Images fixes en sortie. PNG, JPG, WebP ou GIF à une image, un fichier par image, plus une planche de sprites facultative et un fichier de durées dans l'archive.
• Tout le reste est refusé avec un chemin. Une vidéo est envoyée vers Vidéo en GIF ; une photo fixe vers le Créateur de GIF. Le refus dit ce qu'est le fichier, ce que prend cet outil, et où aller.

Comment l'animation est lue

Le GIF est décodé nativement quand le navigateur dispose d'un décodeur, et par notre propre lecteur partout ailleurs : une animation s'ouvre donc de la même façon dans tous les navigateurs au lieu d'arriver sous la forme de sa première image sans aucune erreur, ce qui se produit dans plusieurs navigateurs sans ce repli. Le WebP animé et l'APNG passent toujours par notre lecteur, ce qui garde le nombre d'images et les durées identiques d'un moteur à l'autre. L'outil indique quel lecteur a servi, donc une différence entre navigateurs apparaît comme un fait et non comme un mystère.

Limites des offres

• Gratuit. Une animation jusqu'à 50 Mo, et jusqu'à 60 images extraites par exécution. En pleine qualité : l'offre gratuite n'est pas une extraction dégradée, c'est un lot plus petit. Toute longueur d'animation est acceptée ; la limite porte sur la sélection, et les réglages de sélection existent pour la satisfaire.
• Pro. Jusqu'à 20 animations à la fois et aucune limite d'images, téléchargées ensemble dans une seule archive. C'est le lot que Pro achète ici, parce qu'extraire les images d'un dossier de clips un par un est la vraie corvée.
• La limite commune aux deux offres. Chaque image est développée en couleurs complètes pendant le traitement, donc un budget mémoire borne le travail avant qu'il ne commence, au lieu de laisser l'onglet cesser de répondre pendant que l'indicateur continue de tourner.

Rien n'est envoyé. L'animation est décodée image par image sur votre propre machine, chaque image est composée sur le canevas complet, les images sélectionnées sont encodées et l'archive est construite — le tout dans un fil d'arrière-plan, pour que la page continue de s'afficher pendant le travail. L'outil fonctionne réseau coupé une fois la page chargée, et nos propres tests enregistrent chaque requête réseau d'une exécution en exigeant que la liste soit vide.

Pourquoi la même animation se découpe toujours pareil

• Aucun hasard nulle part. Aucune étape du parcours n'utilise d'algorithme aléatoire, donc la même animation avec les mêmes réglages produit toujours des fichiers identiques octet pour octet. C'est ce qui rend possible de tester la sortie tout court.
• L'encodeur s'annonce. Le résultat indique quel décodeur a lu l'animation et lequel des deux écrivains PNG a produit les octets, si bien qu'un repli silencieux apparaît comme un fait déclaré et non comme une variation inexpliquée de taille.
• Vérifié contre une autre implémentation. L'identité des images, leur nombre, leurs tailles et leurs durées sont vérifiés avec libvips, une bibliothèque d'images totalement distincte, et non contre notre propre sortie précédente.

Les images sont composées et mises à l'échelle sur votre matériel graphique lorsque votre appareil le permet, et tout le travail se déroule dans un fil d'arrière-plan pour que la page reste réactive. Mesuré sur l'appareil de référence : une animation de 100 images en 480 par 270 devient 100 fichiers PNG en 512 ms, pour un total de 3,0 Mo contre les 7,7 Mo que produit l'encodeur du navigateur sur les mêmes pixels. Rien n'est envoyé sur nos serveurs.

• Convertisseur GIF vers PNG
• Convertisseur GIF vers JPG
• Compresseur de GIF
• Redimensionner un GIF
• Créateur de GIF
• Tous les outils GIF