GIF en Base64

Comment convertir un GIF en Base64

1. Déposez un fichier .gif dans la zone ou choisissez-le avec le sélecteur de fichiers.
2. Ne touchez pas à Largeur max., Convertir en et Supprimer les métadonnées (EXIF) si le GIF est animé.
3. Choisissez Sortie en : Data URI, CSS background-image, HTML <img>, Markdown ou Base64 brut.
4. Appuyez sur Copier la sortie. Le compteur indique de combien le texte est plus gros que le fichier.

L’aperçu joue l’animation : vous pouvez vérifier qu’il s’agit du bon fichier avant de copier.

L’animation et les options de réencodage

Les options au-dessus de la sortie redessinent l’image sur un canvas. Un canvas contient une seule image fixe, et les navigateurs ne savent pas en tirer un fichier GIF : un GIF réencodé ressort donc en PNG (ou en JPEG ou WebP si vous les choisissez) de la première image seulement. C’est utile pour obtenir une miniature fixe d’une animation ; pour garder l’animation, laissez ces options désactivées.

Pour un GIF animé trop lourd, la solution doit intervenir avant cet outil : réduisez le nombre d’images, les dimensions ou la palette de couleurs dans un éditeur de GIF, ou remplacez-le par un court MP4 ou WebM en boucle, généralement bien plus petit que le même extrait en GIF.

À quoi ressemble le Base64 d’un GIF

Le GIF transparent de 1×1 ci-dessous fait 42 octets, soit 56 caractères de Base64 :

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" width="1" height="1">

Il servait autrefois à remplir les mises en page en tableaux et apparaît encore comme src provisoire pour les images chargées en différé, car une image valide évite l’icône d’image cassée et une requête supplémentaire.

Taille d’un GIF animé en Base64

La compression GIF est faible selon les critères actuels, et les GIF animés stockent chaque image. Un GIF de réaction de deux secondes peut facilement peser quelques mégaoctets, qui deviennent plusieurs mégaoctets de texte Base64. N’intégrez que de petits GIF, comme des indicateurs de chargement ou de minuscules icônes. Pour tout ce qui est plus gros, un fichier normal peut être mis en cache et chargé en différé, alors qu’une data URI est retéléchargée avec chaque page qui la contient.

Les e-mails se prêtent mal aux GIF en Base64. Gmail et les autres webmails n’affichent pas les images en data URI : les GIF animés des newsletters sont donc liés comme fichiers hébergés. Voir Base64 dans les e-mails.

Encoder un GIF en Node.js

import { readFileSync } from "node:fs";

const gif = readFileSync("spinner.gif");
const uri = `data:image/gif;base64,${gif.toString("base64")}`;

Base64 en Node.js traite des streams et de la sortie URL-safe. Pour retransformer une chaîne Base64 en fichier lisible, utilisez Base64 en GIF.

FAQ