Encodage
Data URI / Image Base64
Encodage d'une image en Data URI (data:image/…;base64,…) pour l'insérer dans CSS/HTML, et décodage d'un Data URI ou de Base64 brut vers un fichier — le tout directement dans le navigateur.
L'aperçu de l'image apparaîtra ici.
A Data URI embeds a file's contents (usually an image) directly into HTML or CSS as a Base64 string, instead of linking to a separate file. This removes an extra network request at the cost of a larger document.
How to use it
- Encode: upload an image and the tool generates a ready data:image/…;base64,… string to paste into src, href, or CSS.
- Decode: paste a Data URI or raw Base64 to get the original file back for download.
- The copied string can be pasted straight into an HTML attribute or a CSS property with no extra processing.
Common uses
- Embedding small icons or sprites in CSS to avoid an extra HTTP request.
- Building email templates, where external images can get blocked by the email client.
- Quickly previewing an image as a self-contained string without uploading the file anywhere.
Things to keep in mind
Base64 encoding grows the data by about 33% — for large images, a Data URI is usually a worse choice than a separate file with browser caching.
A Data URI isn't cached separately from the document it's embedded in — it gets re-downloaded along with the page every time.
Article sur cet outil: Data URI : quand intégrer une image directement dans le code
Questions fréquentes
À quoi sert un Data URI ?
Un Data URI intègre directement le contenu d'un fichier, comme une image, dans du CSS ou du HTML sous forme de texte Base64, évitant une requête réseau séparée. C'est pratique pour de petites icônes ou images utilisées une seule fois.
Y a-t-il des limites à l'usage des Data URI ?
Oui, la taille de l'image encodée en Base64 augmente d'environ 33 %, et certains navigateurs ou clients email imposent des limites de taille sur les URLs ou attributs. Contrairement à une vraie URL de fichier, un Data URI n'est pas mis en cache séparément par le navigateur.
Mon image est-elle envoyée sur un serveur ?
Non, l'encodage et le décodage se font entièrement dans votre navigateur. Aucune image n'est transmise à un serveur.
Peut-on utiliser un Data URI pour un SVG sans Base64 ?
Oui. Le SVG est du texte (XML), donc au lieu du Base64, un percent-encoding des caractères spéciaux suffit : data:image/svg+xml,%3Csvg...%3E. Cette approche est plus compacte et reste éditable directement dans un fichier CSS.
Peut-on insérer un Data URI dans un attribut href ou background-image ?
Oui, un Data URI fonctionne partout où une référence à une ressource est attendue — dans src, href, background-image en CSS et même dans @import. La syntaxe et les limites de taille sont les mêmes que pour la balise img.