Mode d’emploi
- Déposez un GIF sur la zone de dépôt, cliquez pour en choisir un ou collez une image.
- Gardez « Conserver l’original » dans « Convertir en » et « Taille d’origine » dans « Largeur max. » pour préserver l’animation.
- Vérifiez la taille d’origine et la taille encodée : les GIF animés grossissent vite.
- Copiez la balise img ou le background-image CSS, ou prenez la version data URI, Base64 brut ou Markdown.
À propos du format GIF
GIF (Graphics Interchange Format, type MIME image/gif) date de 1987. Chaque image utilise une palette de 256 couleurs au maximum, compressée sans perte avec LZW. La transparence fonctionne en tout ou rien : une entrée de la palette peut être marquée comme transparente, mais il n’existe pas d’opacité partielle. Un fichier peut contenir de nombreuses images, chacune avec son propre délai, ainsi qu’un nombre de boucles, ce qui a fait du GIF le format des courtes animations.
Le Base64 d’un GIF commence par R0lGODlh pour la version courante GIF89a, ou par R0lGODdh pour l’ancienne version GIF87a.
Conserver l’animation
Lorsque vous conservez le format d’origine, l’outil encode les octets du fichier tels quels. Le data URI s’anime donc exactement comme le fichier, que vous l’utilisiez dans une balise <img> ou comme arrière-plan CSS.
Convertir en PNG, JPEG ou WebP, ou définir une largeur maximale, redessine l’image dans le navigateur, et seule la première image de l’animation est conservée. C’est utile pour obtenir un aperçu fixe d’une animation ; pour la version animée, laissez ces deux options désactivées.
Quand les data URI GIF restent pertinents
- Petits indicateurs de chargement et icônes d’état animées en CSS.
- Le classique pixel transparent 1x1, utilisé comme
srcprovisoire. Il ne pèse que quelques dizaines d’octets et bien moins de 100 caractères en Base64. - Dessins au trait simples, avec peu de couleurs, pour lesquels le GIF est compact.
Les grandes animations s’y prêtent mal. Un GIF de réaction de 2 Mo devient environ 2,7 Mo de texte impossible à mettre en cache séparément ; un fichier vidéo hébergé ou un WebP animé est bien plus léger.
.loading {
background: url("data:image/gif;base64,R0lGODlh...") no-repeat center;
}
<img src="data:image/gif;base64,R0lGODlh..." width="32" height="32" alt="Loading">Questions fréquentes
Mon GIF sera-t-il toujours animé après l’encodage Base64 ?
Oui, tant que vous conservez le format d’origine et ne redimensionnez pas l’image. Base64 stocke le fichier complet, y compris toutes les images et le réglage de boucle.
Pourquoi mon GIF ne bouge-t-il plus après la conversion ?
Une conversion en PNG, JPEG ou WebP, ou un redimensionnement, redessine l’image à partir de la première image de l’animation. L’outil ne peut pas créer de PNG ou de WebP animés : conservez donc le GIF d’origine pour garder le mouvement.