Mode d’emploi
- 1.Pour encoder, laissez « Image en Base64 » sélectionné et déposez une image sur la page, collez-en une depuis le presse-papiers ou cliquez sur « Choisir une image ».
- 2.Copiez la version qu’il vous faut : la data URI pour un
srcou unurl(), le Base64 brut pour une API, ou la balise HTML ou la règle CSS toute prête. Les fichiers SVG ont aussi droit à une data URI encodée en URL, plus courte. - 3.Pour décoder, passez à « Base64 en image » et collez une data URI ou du Base64 brut. Du code CSS ou HTML qui en contient une fonctionne aussi.
- 4.Vérifiez l’aperçu, le format et la taille, puis cliquez sur Télécharger pour enregistrer l’image avec la bonne extension.
Qu’est-ce qu’une data URI ?
Une data URI place un fichier entier dans une URL : une page peut ainsi afficher une image sans téléchargement séparé. La syntaxe est data:[<media type>][;base64],<data>, par exemple data:image/png;base64,iVBORw0KGgo…. Le type de média indique au navigateur la nature des données ; ;base64 précise qu’elles sont encodées en Base64 et non sous forme de texte encodé en URL.
Le Base64 écrit chaque groupe de 3 octets du fichier sous forme de 4 caractères ASCII simples : c’est pourquoi le résultat est environ un tiers plus volumineux que l’image. Gzip et Brotli en récupèrent une partie lors de l’envoi de la page, mais le navigateur doit tout de même décoder le texte complet.
Quand intégrer une image aide, et quand ça pénalise
L’intégration est rentable pour les toutes petites images : icônes, petits arrière-plans et images d’attente d’un ou deux kilo-octets, pour lesquelles une requête séparée coûterait plus cher que les octets eux-mêmes. C’est aussi pratique pour les rapports HTML en un seul fichier, les données de test, et les API ou documents JSON qui attendent une image sous forme de texte.
Au-delà, cela ralentit généralement les pages. L’image ne peut pas être mise en cache séparément : elle est donc retéléchargée avec chaque page ou feuille de style qui la contient ; en CSS, elle retarde aussi l’affichage, car le navigateur attend la feuille de style entière. Avec HTTP/2, les requêtes supplémentaires coûtent peu : au-delà de quelques kilo-octets, un fichier image classique est donc le meilleur choix.
L’e-mail est un cas particulier : Gmail et Outlook n’affichent pas les images en data URI. Les newsletters doivent donc utiliser des liens vers des images hébergées, ou les joindre en pièces jointes intégrées (CID).
Une data URI plus courte pour le SVG
Le SVG est du texte : il n’a pas du tout besoin du Base64. Une data URI SVG encodée en URL, comme data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'…, est généralement 15 à 25 % plus courte, se compresse mieux et reste lisible dans votre CSS.
Seuls quelques caractères doivent être échappés : <, > et surtout # (écrit %23), qui sinon terminerait l’URL, par exemple dans une couleur comme fill='%23f00'. Cet outil réduit aussi les espaces et passe aux guillemets simples pour que l’URI tienne dans url("…") sans autre échappement.
Questions fréquentes
Mon image est-elle envoyée quelque part ?
Non. L’image est lue et encodée par votre navigateur, sur votre propre appareil, et le Base64 collé y est aussi décodé. Rien n’est envoyé à nestoo ni à qui que ce soit.
Pourquoi la version Base64 est-elle plus lourde que le fichier image ?
Le Base64 représente chaque groupe de 3 octets par 4 caractères d’un alphabet de 64 : le texte est donc environ 33 % plus volumineux que le fichier, plus le court préfixe data:image/…;base64,. C’est le prix à payer pour stocker des données binaires sous forme de texte.
Comment utiliser une data URI en HTML, CSS, Markdown ou JSON ?
En HTML, placez-la dans le src d’une image : <img src="data:image/png;base64,…" alt="">. En CSS, utilisez-la dans url() : background-image: url("data:…");. En JSON, c’est une chaîne ordinaire ; beaucoup d’API ne veulent que la partie Base64, sans le préfixe data:. Le Markdown accepte  en principe, mais GitHub et beaucoup d’autres sites suppriment les images en data URI : utilisez-y plutôt une image hébergée.
Quelle taille d’image est acceptée ?
L’outil encode des images jusqu’à 20 Mo, et les navigateurs savent afficher des data URI de plusieurs mégaoctets. En pratique, limitez les images intégrées à quelques kilo-octets : au-delà, elles alourdissent votre HTML ou votre CSS et ne peuvent pas être mises en cache séparément.
Comment retransformer une data URI en fichier image ?
Passez à « Base64 en image » et collez la data URI ou le Base64 brut. L’outil détecte le vrai format à partir des données elles-mêmes, affiche un aperçu et enregistre le fichier avec la bonne extension, même si l’URI annonçait un autre type.