Convertir une image en Base64 – Data URI pour HTML et CSS
Encodez des images en Base64 pour les intégrer directement dans du HTML, du CSS, du JSON ou des e-mails — ou collez du Base64 pour voir et télécharger l’image. PNG, JPG, WebP, GIF et SVG.
Déposez une image pour obtenir la data URI, le Base64 brut, une balise et une règle CSS de fond, chacun avec un bouton copier. Pour décoder, passez en « Base64 → image », collez le texte et téléchargez. Le Base64 alourdit de 33 % : réservez-le aux petites icônes.
Comment utiliser : Image en Base64
- Choisissez « Image → Base64 » ou « Base64 → image ».
- Déposez une ou plusieurs images, ou collez du Base64.
- Copiez la data URI, le Base64, le HTML ou le CSS.
- Consultez l’augmentation de taille par fichier.
- Téléchargez les images décodées en un clic.
Qu’est-ce qu’une image en Base64 ?
Le Base64 transforme des données binaires en texte à l’aide de 64 caractères sûrs. Une data URI ajoute le type de fichier devant, par exemple data:image/png;base64,iVBORw0…, pour que le navigateur affiche l’image sans fichier séparé. Vous pouvez la coller dans l’attribut src d’un <img>, dans un fond CSS ou dans du JSON.
Quand l’utiliser ?
| Bon usage | Mieux en fichier classique |
|---|---|
| Petites icônes et logos (moins de 10 Ko) | Photos et grandes images |
| Signatures e-mail et e-mails HTML | Images utilisées sur beaucoup de pages |
| Démos HTML en un seul fichier | Images souvent modifiées |
| API JSON n’acceptant que du texte | Images à mettre en cache |
Le Base64 grossit le fichier de 33 % et une image intégrée n’est pas mise en cache séparément. Pour les grandes images, compressez-les avec le Compresser une image et liez le fichier.
Décoder du Base64
Collez une data URI ou du Base64 brut pour voir et télécharger l’image. Le Base64 « URL-safe » (avec - et _) est accepté et le type de fichier est détecté d’après les premiers octets si le préfixe data: manque. Pratique pour vérifier des images stockées en base de données, dans des réponses d’API ou dans du code HTML.
Dans les projets web
Des outils comme Vite ou Webpack intègrent souvent en Base64 les images de moins de 4 à 8 Ko et servent les autres en fichiers : un bon repère. Attention aux e-mails : certains logiciels bloquent les images Base64 ou les affichent en pièce jointe.
Le cas du SVG
Le SVG est déjà du texte, le Base64 ne fait que l’alourdir. Pour un SVG en CSS, l’encodage URL est souvent plus court — faites-le avec Encoder / décoder une URL. Pour transformer un SVG en PNG d’abord, utilisez Convertir SVG en PNG.
Confidentialité
Les images sont lues et encodées avec l’API FileReader dans le navigateur et ne sont jamais envoyées. Pour du texte ou d’autres données, l’encodeur Encoder / décoder Base64 fonctionne avec tout texte.
Ces outils gratuits peuvent aussi vous être utiles : Formateur JSON, Générateur de mot de passe et Testeur de regex.
Questions fréquentes
Comment convertir une image en Base64 ?
Déposez l’image : data URI, Base64, HTML et CSS apparaissent avec des boutons copier.
Comment convertir du Base64 en image ?
Passez en Base64 → image, collez le texte et cliquez sur Télécharger l’image.
Pourquoi la version Base64 est plus lourde ?
Le Base64 utilise 4 caractères pour 3 octets, soit environ 33 % de plus.
Faut-il utiliser des images Base64 sur mon site ?
Seulement pour de très petites images ; les autres chargent plus vite en fichiers mis en cache.
Mes images sont-elles envoyées ?
Non. Tout se passe dans le navigateur.
Dernière mise à jour: