Convertisseur image ↔ Base64
Convertit les images en data URLs Base64 et inversement — avec extraits CSS et HTML
À propos de cet outil
Déposez, choisissez ou collez une image et obtenez son Base64 sous toutes les formes utiles : un data URL prêt à l’emploi, une déclaration CSS background-image, une balise <img> complète avec ses dimensions réelles, et le payload Base64 brut. Le sens inverse fonctionne aussi — collez un data URL ou un bloc Base64 nu, et l’image est décodée, prévisualisée et téléchargeable en fichier.
Le format est identifié par les octets magiques, pas par l’extension ni le type MIME déclaré : un PNG renommé en .jpg (ou un data URL mal étiqueté) se convertit donc correctement. Le panneau des tailles est honnête sur le coût : Base64 gonfle les données d’environ un tiers, et la taille encodée exacte s’affiche à côté de l’originale pour décider si l’incrustation en vaut la peine.
Contrairement à la plupart des sites image vers Base64, rien n’est envoyé : le fichier est lu avec l’API FileReader du navigateur et encodé dans la page. C’est donc sans risque pour les captures de tableaux de bord internes, les visuels produits non publiés, ou tout ce que vous préférez ne pas confier au serveur d’un inconnu.
Questions fréquentes
- Quand incruster une image en Base64 plutôt que lier un fichier ?
- Quand l’image est petite (moins de ~10 Ko), change rarement et coûterait sinon une requête HTTP supplémentaire — icônes, logos dans les e-mails, documents HTML autonomes. Au-delà, le fichier séparé gagne : il se met en cache indépendamment, se charge en parallèle et ne gonfle pas votre HTML ou CSS de 33 %.
- Pourquoi la version Base64 est-elle environ un tiers plus grosse que mon fichier ?
- Base64 représente chaque groupe de 3 octets binaires par 4 caractères ASCII, un surcoût structurel de +33 % (plus jusqu’à deux caractères de bourrage). Gzip ou Brotli côté serveur en récupère une partie, mais l’inflation est inhérente à l’encodage — il échange de la taille contre la capacité d’incorporer du binaire dans du texte.
- Puis-je décoder un data URL trouvé dans une feuille de style ou du HTML ?
- Oui — passez en Base64 → image et collez le tout, préfixe data: compris. Les data URLs SVG en percent-encoding (ceux sans ;base64) se décodent aussi, et les sauts de ligne ou espaces du payload sont retirés automatiquement. Le résultat s’affiche dans la page et se télécharge avec la bonne extension.
- Est-ce que ça marche pour SVG, GIF et ICO, ou seulement PNG et JPEG ?
- Tout ce que le détecteur reconnaît se convertit en Base64 : PNG, JPEG, WebP, GIF, SVG, BMP, ICO et AVIF. Pour le SVG en particulier, notez que la source XML est souvent plus petite et plus lisible incrustée telle quelle — encoder du SVG en Base64 n’a vraiment de sens que lorsque les guillemets ou l’échappement posent problème.