Comment convertir une image en data URI Base64
Embarquez petites icônes et filigranes directement dans HTML, CSS, JSON ou modèles d’e-mail en Base64 — sans requête HTTP supplémentaire ni ressource manquante.
D’autres utilitaires qui complètent bien ce guide :
Pourquoi c’est important
Un e-mail transactionnel a besoin d’un petit logo. Lier une image distante marche jusqu’à ce que le client mail bloque le chargement distant « pour la vie privée ». La solution : intégrer le logo en data:image/png;base64,.... Le coût est d’environ 33 % de taille en plus, mais pour des assets minuscules (moins de 4 Ko), le gain de latence et la garantie d’affichage compensent. Même astuce pour favicons, icônes de fond CSS et sprites SVG dans générateurs de sites statiques.
Trois scénarios réels
Encodez le logo 80×80, collez la data URI dans le src du <img>.
Pas d’invite « charger images distantes »
background-image: url(data:image/svg+xml;base64,...) garde le bundle autonome.
Une requête réseau en moins
Encodez la vignette, intégrez au JSON ; le client affiche sans fetch supplémentaire.
Un seul aller-retour
Parcours
Ouvrez l’outil Image vers Base64.
Déposer l’image
PNG, JPEG, WebP, GIF, SVG, ICO. L’outil lit via l’API File du navigateur.
Choisir le format de sortie
Data URI complète (
data:image/png;base64,...) — à coller danssrcou CSS. Base64 brut — pour champs JSON quand le préfixe est géré côté serveur.Choisir l’encodage adapté aux URL
Base64 standard avec
+/convient HTML/CSS. Base64 URL-safe (-_) aide quand la valeur va dans query string ou nom de fichier.Copier ou télécharger
Le texte peut aussi partir en fichier
.txtpour les très longues chaînes.
Source
icon.svg (412 bytes)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2L2 22h20L12 2z"/>
</svg>Data URI
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDJMMiAyMmgyMEwxMiAyeiIvPjwvc3ZnPg==
Conseils avancés
- Inlinez seulement les petits assets (≤ 4 Ko). Au-delà, HTML/CSS/JSON grossissent plus que le gain d’une requête.
- Préférez le SVG inline pour les icônes. Le SVG compresse bien en Base64 et met à l’échelle sans perte.
- En CSS, utilisez la forme
url().background: url(data:image/png;base64,...)est universellement supporté. - Pour l’e-mail, testez dans de vrais clients. Outlook Windows historiquement capricieux avec data URI ; Gmail / Apple Mail récents gèrent bien.
Pièges courants
Piège courant
URI trop longue pour les parseurs CSS anciens
Certains analyseurs CSS legacy échouent sur des lignes multi-Mo. Les grosses images vont sur CDN ; inlinez seulement le minuscule.
Piège courant
URI cassée en JSON à cause des « / » dans data URL
JSON n’exige pas d’échapper /, mais certains éditeurs le font automatiquement. L’encodage Base64 URL-safe contourne le problème.
Piège courant
E-mails : inline data vs conflit CID
Certains clients préfèrent les références cid: aux data:. Testez sur le client cible ; prévoyez repli si besoin.
Quand ce n’est pas l’outil adapté
- Inlining côté serveur en masse pendant le build —
url-loaderWebpack ou suffixe?inlineVite. - Traitement image avant encodage — compressez avec le compresseur d’images d’abord.
- Très grosses images — envoyer 5 Mo de Base64 dans un corps JSON est gaspilleur ; servez l’URL CDN.
FAQ
Quelle pénalité de taille ?
Le Base64 grossit d’environ 33 %. Une PNG d’1 Ko devient ~1,37 Ko en data URI.
Le navigateur met-il en cache une image inline ?
Non — chaque page qui embarque la data URI reparse les octets. D’où l’intérêt limité aux tout petits assets.
Mon image est-elle téléversée ?
Non. L’encodeur lit localement et sort la chaîne directement.
Étapes suivantes
- Sens inverse — collez une data URI vers fichier avec l’outil Base64 vers image.
- Compressez avant d’encoder pour minimiser la taille : compresseur d’images.
- Changez de format avec le convertisseur d’images si la cible n’accepte que du JPEG.