Convertisseur d’image en Base64 (Data URI)
Convertissez une image en data URI Base64 dans votre navigateur et copiez des extraits HTML img, CSS background et Markdown prêts à l’emploi, avec les tailles.
S'exécute entièrement dans votre navigateur. Vos données ne sont jamais envoyées.
Qu'est-ce que Image en Base64 ?
Cet outil encode un fichier image en Base64 pour l’intégrer directement dans du HTML, du CSS, du JSON ou du Markdown. Il fournit le data URI complet (data:image/png;base64,…), la chaîne Base64 brute, des extraits <img>, CSS background-image et Markdown prêts à copier, ainsi que la taille de l’image et le surcoût du Base64.
Comment utiliser Image en Base64
- Déposez, choisissez ou collez une image (PNG, JPEG, GIF, WebP, SVG, ICO…).
- Lisez le format détecté, les dimensions, la taille du fichier et la longueur du data URI.
- Cliquez sur Copier à côté de la variante voulue : data URI, Base64 brut, extrait HTML, arrière-plan CSS ou Markdown.
Exemple
PNG 30×30 rempli de #3366CC (99 octets)
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAIAAAC0Ujn1AAAAKklEQVR4nGM0TjvDQBvARCNzR40eNXrU6FGjR40eNXrU6FGjR40eEUYDACc1AaFANYRxAAAAAElFTkSuQmCC
Quand utiliser Image en Base64
Intégrez en ligne de très petites images comme des icônes, de petits logos ou des espaces réservés pour économiser une requête HTTP, ou dans du HTML monofichier, des e-mails, des API JSON ou du CSS qui doit être autonome. Évitez-le pour les images de plus de 20 KB environ : elles alourdissent votre HTML/CSS et ne peuvent pas être mises en cache séparément.
Comment fonctionne Image en Base64
Les octets du fichier sont lus avec File.arrayBuffer(), le vrai format est détecté à partir de ses octets magiques (par exemple 89 50 4E 47 pour PNG) plutôt que de se fier à l’extension, puis les octets sont encodés en Base64 avec btoa. Le data URI est data:<mime>;base64,<base64>. Le Base64 représente chaque groupe de 3 octets par 4 caractères : le texte est donc environ 33 % plus gros que le fichier.
Cas d'utilisation courants
- Intégrer une petite icône directement dans un fichier CSS.
- Placer un logo dans un modèle d’e-mail HTML ou une page hors ligne monofichier.
- Envoyer une image dans une charge utile JSON vers une API.
- Rédiger un document Markdown ou Jupyter autonome.
Note de Sécurité
Les images sont décodées, traitées et encodées localement dans votre navigateur avec l’API Canvas. Rien n’est envoyé à un serveur.
Questions Fréquentes
Pourquoi le Base64 est-il plus gros que mon fichier ?
Le Base64 utilise 4 caractères de texte pour 3 octets : la chaîne encodée est donc environ 33 % plus grande (plus quelques octets pour le bourrage et le préfixe du data URI).
L’outil modifie-t-il ou compresse-t-il mon image ?
Non. Il encode exactement les octets de votre fichier. Utilisez d’abord le compresseur d’images si vous voulez un résultat plus léger.
Puis-je reconvertir le Base64 en image ?
Oui, utilisez l’outil Base64 en image, qui accepte un data URI ou du Base64 brut et vous permet de télécharger le fichier.