Mode d’emploi

Choisissez Image → Base64 et sélectionnez un fichier image, ou Base64 → Image pour faire l’opération inverse.
Sélectionnez le format de sortie souhaité : URL de données, Base64 brut, balise img HTML, règle CSS background-image ou Markdown.
Copiez le résultat et collez-le dans votre code, votre modèle d’e-mail ou votre JSON.
Pour décoder, collez une URL de données ou du Base64 brut. L’image s’affiche en aperçu et peut être téléchargée.

Fonctionnement

Base64 représente les données binaires à l’aide de 64 caractères imprimables, ce qui permet d’intégrer une image directement dans des formats texte. Une URL de données ajoute le type de média au début, par exemple data:image/png;base64, suivi des octets encodés. Les navigateurs acceptent les URL de données partout où une URL d’image est autorisée : dans l’attribut src d’une balise img, dans un url() CSS ou dans une référence d’image SVG.

Le texte encodé est toujours environ un tiers plus volumineux que le fichier d’origine (4 caractères pour 3 octets). Intégrer de petites icônes et des images provisoires peut éviter une requête réseau distincte. Toutefois, les données intégrées ne peuvent pas être mises en cache séparément et sont téléchargées à nouveau avec chaque page ou feuille de style qui les contient. Cette méthode est donc rarement avantageuse au-delà de quelques kilo-octets. De nombreux clients de messagerie bloquent ou suppriment les images en URL de données : faites un essai avant de les utiliser dans une newsletter.

Le fichier est encodé octet par octet : il n’est pas recompressé et ses métadonnées (comme EXIF) sont conservées. Pour le décodage, l’outil accepte une URL de données complète, du Base64 brut, du Base64 compatible avec les URL et du texte copié avec une enveloppe CSS url(…). Le type d’image est détecté à partir des octets décodés, et non déduit de l’étiquette.

Exemples

Petite icône dans une feuille de style

Une icône PNG de 600 octets devient une chaîne Base64 de 800 caractères. La sortie CSS génère une règle background-image que vous pouvez coller dans une classe sans héberger de fichier séparé.

Image issue d’une réponse d’API

Une API renvoie un champ JSON tel que "iVBORw0KGgoAAAANSUhEUg…". Collez-le dans Base64 → Image pour afficher l’image, vérifier sa taille et la télécharger au format PNG.

Logo SVG dans HTML

L’encodage d’un SVG génère une URL data:image/svg+xml;base64 utilisable dans une balise img. Pour les SVG, le code SVG non compressé est souvent plus court que sa version Base64 : pensez à intégrer directement le SVG.

Foire aux questions

Pourquoi la version Base64 est-elle plus volumineuse que mon image ?

Base64 utilise 4 caractères pour stocker 3 octets, soit environ 33 % de plus, auxquels s’ajoute un petit supplément pour le préfixe de l’URL de données. La compression Gzip ou Brotli sur un serveur web réduit cet écart, sans le supprimer.

L’encodage modifie-t-il ou compresse-t-il l’image ?

Non. Les octets exacts du fichier sont encodés, y compris les métadonnées. Pour raccourcir la chaîne, compressez ou redimensionnez d’abord l’image.

Quelle est la différence entre une URL de données et du Base64 brut ?

Le Base64 brut correspond uniquement aux octets encodés. Une URL de données ajoute un préfixe tel que data:image/jpeg;base64, qui indique au navigateur le type de fichier et permet de l’utiliser directement comme source d’image.

Y a-t-il une limite de taille ?

Vous pouvez encoder des fichiers allant jusqu’à 10 MB ici. Les chaînes très longues peuvent ralentir les champs de texte et les éditeurs, et les URL de données de cette taille ne sont pas adaptées aux sites web.

Confidentialité

L’encodage et le décodage s’effectuent dans votre navigateur. Votre image et le texte Base64 ne sont ni envoyés, ni stockés, ni inclus dans les données analytiques.