Comment convertir une image en base64 (data URI) et dans l'autre sens ?
Convertisseur image ↔ base64 / data URI en ligne.
En mode « Encode », tu uploads un fichier, obtiens une chaîne base64 + un data: URI complet prêt à coller dans du CSS / HTML.
En mode « Decode », tu colles du base64 ou un data URI, vois l'aperçu de l'image, télécharges en fichier.
Tout tourne en local : l'image ne quitte jamais ton navigateur.
Super pour les devs : embarquer des icônes dans CSS sans requêtes supplémentaires, signatures e-mail avec images inline, debug d'e-mails HTML marketing.
Comment l'utiliser
- Choisis un mode : « Encode » (fichier → base64) ou « Decode » (base64 → fichier).
- Encode : dépose un fichier ou clique sur « Choisir un fichier ». PNG, JPG, WebP, AVIF, HEIC, SVG, GIF.
- Tu reçois deux sorties : le complet `"data:image/...;base64,..."` (prêt pour `background-image` CSS ou `src` HTML), et le payload « base64 seul ».
- Decode : colle le data URI complet ou juste le payload base64. L'outil détecte le format depuis le préfixe ou suppose du PNG. Aperçu + bouton de téléchargement.
Quand c'est utile
Là où base64 et data URIs paient, usages typiques :
- CSS sans requêtes supplémentaires : icônes minuscules en background-image: url(data:image/svg+xml;base64,...) éliminent l'aller-retour serveur.
- Signatures e-mail : logo embarqué n'a pas besoin de CDN, fonctionne hors ligne.
- Alternatives aux SVG sprites : pour de très petites icônes (<2 KB), un data URI est souvent plus petit que le surcoût des en-têtes HTTP.
- Payloads JSON : APIs qui n'acceptent pas le multipart-form-data mais acceptent les images base64 dans du JSON.
- E-mail marketing : certaines plateformes (Mailchimp, Brevo) attendent les images en base64.
- Fixtures de tests : dans les tests front-end (Playwright, Cypress), les screenshots sont souvent codés en base64.
Questions et réponses
Non. Tout tourne en local via la FileReader API. Decode aussi : on décode le base64 vers les octets en local, on construit une Blob URL. DevTools → Network = pas de requêtes.