Image ↔ Base64

Qu’est-ce que la conversion image vers Base64 ?#

Une URL de données est une chaîne qui intègre un fichier complet en ligne, préfixée par son type MIME : data:image/png;base64,iVBORw0KGgo…. Dès qu’une image se trouve à l’intérieur d’une telle chaîne, elle se comporte comme du texte : vous pouvez la coller dans du HTML, du CSS, du JSON, un fichier Markdown ou un fichier source, et le consommateur l’affiche sans jamais avoir à récupérer de fichier distinct. Cette page transforme un fichier image en URL de données et reconvertit une URL de données en image affichable, entièrement dans votre navigateur.

Le Base64 gonfle les données binaires d’environ 33 % (chaque groupe de trois octets devient quatre caractères ASCII), si bien qu’une URL de données est plus volumineuse que le fichier qu’elle remplace. Le compromis vaut le coup lorsque vous voulez zéro requête externe : signatures d’e-mail en HTML, démos en fichier unique, favicons intégrés dans un <head>, icônes embarquées dans une configuration JSON, ou ressources dans des environnements (certaines pages sous CSP stricte, aperçus en bac à sable) où charger un <img src> depuis le disque n’est pas possible.

Cet outil analyse les URL de données selon la RFC 2397, accepte aussi bien les charges utiles en base64 qu’en texte encodé URL, détecte le type MIME et vérifie qu’il s’agit bien d’une image avant l’aperçu — ainsi, coller une chaîne cassée échoue bruyamment au lieu d’afficher une icône d’image brisée.

Comment l’utiliser#

1. Déposez une image sur la zone en pointillés, ou cliquez sur Téléverser et choisissez un fichier. PNG, JPEG, WebP, GIF, SVG, BMP, AVIF et ICO sont tous acceptés.
2. La zone de texte URL de données Base64 à gauche se remplit avec la chaîne complète data:image/…;base64,…. Utilisez Copier à droite pour la récupérer.
3. Pour faire l’opération inverse, collez une URL de données dans cette même zone. L’aperçu à droite réaffiche l’image, et Télécharger la sauvegarde en tant que vrai fichier avec l’extension correcte.
4. Effacer vide les deux volets.

Le type MIME est lu depuis l’en-tête de l’URL de données, non déduit de l’extension du fichier — renommer un .png en .jpg ne trompe donc pas l’outil, et l’extension du téléchargement correspond toujours au type réel.

Caractéristiques principales#

• Conversion bidirectionnelle. Image → URL de données pour l’intégration ; URL de données → fichier pour l’extraction. Le même volet gère les deux sens.
• Conscient du type MIME. L’extension de téléchargement suggérée est déduite du type de média réel (image/svg+xml → .svg, image/jpeg → .jpg), pas du nom de fichier.
• Valide avant l’aperçu. Les chaînes mal formées sont signalées comme invalides plutôt que d’afficher silencieusement une image brisée.
• Gère les octets arbitraires sans risque. L’encodage Base64 est découpé en blocs afin que les charges utiles multioctets et binaires fassent l’aller-retour sans corruption.
• Tout reste local. Les API FileReader et atob/btoa font le travail dans la page ; rien n’est téléversé.

Exemple commenté#

Vous disposez de pixel.gif, un pixel transparent de suivi 1×1 (celui que les clients de messagerie utilisent comme balise d’ouverture), 43 octets. Téléversez-le. La zone URL de données produit la chaîne complète et exacte :

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

C’est une URL de données réelle et complète : collez-la dans un <img src="…"> en HTML, un background-image: url('…') en CSS ou un champ JSON, et le consommateur affiche le pixel d’origine sans aucun chargement de fichier. Le type MIME (image/gif) et l’extension .gif du téléchargement proviennent tous deux de l’en-tête de l’URL de données, pas du nom de fichier d’origine.

Pour une photo plus lourde, le principe est identique — seul le corps base64 grossit (environ 1,33× la taille en octets) et le type MIME devient image/jpeg ou image/webp.

FAQ#

Pourquoi mon URL de données est-elle bien plus grosse que le fichier d’origine ?#

Le Base64 représente chaque groupe de trois octets par quatre caractères, donc la chaîne fait environ 1,33× la taille binaire. Pour les images lourdes, c’est du gaspillage — utilisez d’abord l’outil de compression, ou hébergez le fichier et liez-le plutôt que de l’intégrer en ligne.

Y a-t-il une limite de taille ?#

Le navigateur gère les URL de données jusqu’à plusieurs centaines de mégaoctets, mais en pratique tout ce qui dépasse quelques centaines de Kio alourdit votre HTML, votre CSS et votre JSON et ralentit les analyseurs. N’intégrez en ligne que de petites icônes, logos et sprites.

Puis-je convertir un SVG ?#

Oui. Le SVG a le type MIME image/svg+xml et c’est déjà du texte, donc l’URL de données est compacte et fait l’aller-retour sans perte.

L’URL de données que j’ai collée est indiquée « invalide ». Que s’est-il passé ?#

La chaîne doit commencer par data: et contenir une virgule séparant l’en-tête de la charge utile. Une copie tronquée, un espace parasite en début de chaîne ou un marqueur ;base64 manquant font tous échouer l’analyse. Recopiez la chaîne complète, en-tête inclus.