Intégrer une petite icône en CSS
Quelques KB convertis en fragment background-image, une requête HTTP de moins.
Guide
Image ↔ Base64 convertit dans les deux sens entre un fichier image et un encodage texte. Sens encodage : après avoir choisi une image, l'outil affiche quatre sorties en même temps — Data URL complète (data:image/png;base64,…, directement utilisable dans un src ou un url()), Base64 brut sans préfixe, fragment CSS background-image: url('…'); et fragment HTML ; chaque sortie a son propre bouton de copie et la carte indique le poids encodé ainsi que son augmentation. Sens décodage : collez une Data URL ou du Base64 brut, l'outil détecte le format d'après l'en-tête du fichier (PNG / JPEG / GIF / WebP / BMP / SVG), affiche un aperçu et permet le téléchargement. Le traitement se fait localement dans le navigateur.
Mis à jour le 2026-09-093 min read
Image ↔ Base64 convertit dans les deux sens entre un fichier image et un encodage texte. Sens encodage : après avoir choisi une image, l'outil affiche quatre sorties en même temps — Data URL complète (data:image/png;base64,…, directement utilisable dans un src ou un url()), Base64 brut sans préfixe, fragment CSS background-image: url('…'); et fragment HTML <img src=… alt=nom-du-fichier /> ; chaque sortie a son propre bouton de copie et la carte indique le poids encodé ainsi que son augmentation. Sens décodage : collez une Data URL ou du Base64 brut, l'outil détecte le format d'après l'en-tête du fichier (PNG / JPEG / GIF / WebP / BMP / SVG), affiche un aperçu et permet le téléchargement. Le traitement se fait localement dans le navigateur.
Sa différence avec l'« Encodeur/décodeur Base64 » généraliste : ici tout est pensé pour les images — ajout du préfixe MIME, fragments CSS / HTML prêts à coller et restitution d'un texte en image visible.
data:image/...;base64, ou du Base64 brut (les espaces et retours à la ligne sont nettoyés), puis cliquez sur « Décoder l'aperçu ».base64-image.png.Le Base64 pèse environ 1,33 fois le fichier d'origine
Sans préfixe, le format est déduit de l'en-tête
Icône PNG de 12 KBData URL d'environ 16 KB (+33 %) ; fragment CSS `background-image: url('data:image/png;base64,iVBOR…');`Coller du Base64 brut commençant par `iVBORw0KGgo`Détecté comme image/png, aperçu affiché, téléchargement en `.png`Coller une chaîne coupée en deux« Échec du décodage : contenu Base64 invalide, vérifiez qu'il est complet »data:image/svg+xml;base64,…, sans variante inline en URL encodingQuelques KB convertis en fragment background-image, une requête HTTP de moins.
Convertissez l'image de signature en fragment <img> et collez-le dans un éditeur qui n'accepte que du HTML.
Collez le champ Base64 d'une réponse d'API pour voir enfin de quelle image il s'agit.
Quand héberger l'image est compliqué, écrivez la Data URL directement dans le document.
Le Base64 représente 3 octets par 4 caractères, soit une inflation fixe d'environ 33 %, à laquelle s'ajoute le préfixe data: ; une grande image ne gagne pas à être inlinée.
Oui, tous les caractères d'espacement sont retirés avant le décodage.
Le navigateur ne sait pas afficher le HEIC directement : l'outil le convertit d'abord en JPEG (qualité 0.92), puis l'encode, avec le MIME image/jpeg.
L'encodage et le décodage se font localement dans le navigateur via FileReader et atob : l'image et le texte Base64 ne sont envoyés à aucun serveur.
Mis à jour le 2026-09-09
Image vers Base64 (DataURL / CSS / HTML) et Base64 vers image avec aperçu
Cet outil n’est pas entièrement traduit ; certains contenus utilisent la langue source ou une langue de repli.