Encoder une image en Base64 / Data URI

Une Data URI est une URL qui contient directement les données d'une ressource au lieu de pointer vers un fichier distant. Sa forme générale est data:[<mediatype>][;base64],<data>. Pour une image, on a typiquement data:image/png;base64,iVBORw0KGgo…. La ressource est embarquée dans le HTML, le CSS ou le JSON et chargée sans aucune requête HTTP supplémentaire.

Les motivations courantes :

• Réduire les requêtes HTTP : intégrer une icône directement dans le CSS plutôt que la charger en plus du document
• Email signature avec image inline : pas de risque que l'image soit bloquée comme contenu distant
• Web Components / Web Workers : où charger une ressource externe pose souvent un problème de scope ou de CORS
• Storage local (LocalStorage, IndexedDB, base de données) : sérialiser une vignette d'avatar en string
• Self-contained snippets : un fichier HTML qui se suffit à lui-même, sans dépendance externe

Quelques contextes concrets où l'encodage Base64 image se justifie :

• Icônes SVG inline en CSS (background-image: url("data:image/svg+xml;base64,…"))
• Signatures email personnalisées avec logo
• Prototypage rapide d'une page autonome partagée par e-mail
• Web components autonomes (un seul fichier déployable)
• Génération de PDF côté navigateur (jsPDF) avec vignettes embarquées
• Données de test (mocks) qui contiennent des images

Trois étapes :

1. Téléversez votre image (PNG, JPG, SVG, WebP, GIF) via la zone de dépôt
2. Cliquez sur « Encoder »
3. Copiez la Data URI résultante avec le bouton dédié, et collez-la dans votre HTML, CSS ou JSON

Le Base64 n'est pas une solution miracle. Quelques précautions :

• Le Base64 augmente la taille de ~33 % : 4 caractères ASCII pour chaque 3 bytes binaires
• Les images encodées ne sont pas mises en cache séparément par le navigateur ; elles sont rechargées avec le HTML/CSS qui les contient
• À privilégier pour les images de moins de 10 KB ; au-delà, un fichier externe est généralement plus efficace
• Pour le SVG, préférer l'encodage URL (via encodeURIComponent) plutôt que Base64 : le résultat est plus court et reste parsable comme du texte
• Outils de build modernes (Webpack, Vite) automatisent le choix Base64 vs. fichier externe via une taille seuil configurable

HTML :

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAAS+rJYwAAAAASUVORK5CYII=" alt="pixel">

CSS :

.icon {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…") no-repeat;
  width: 16px;
  height: 16px;
}

JSON (mock data) :

{
  "user": {
    "name": "Adrien",
    "avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA…"
  }
}

Quelle est la différence entre Base64 et binaire ?

Le binaire représente les octets bruts d'un fichier. Le Base64 est un encodage qui transforme ces octets en 64 caractères ASCII imprimables (A-Z, a-z, 0-9, +, /). Les contextes texte (HTML, JSON, email) ne peuvent pas transporter du binaire ; le Base64 résout ce problème au prix d'un surcoût de taille de 33 %.

Pourquoi ma Data URI est-elle si longue ?

Une image de 30 KB en binaire devient ~40 KB en Base64. Et chaque caractère est un byte ASCII, donc oui, la chaîne est longue. C'est inhérent à l'encodage. Pour les grosses images, garder un fichier externe.

Tous les navigateurs supportent les Data URI ?

Oui, sans exception parmi les navigateurs modernes (Chrome, Firefox, Safari, Edge depuis IE8 même). Limites historiques : IE8 plafonnait à 32 KB. Plus de souci aujourd'hui sur le web.

Comment décoder une Data URI ?

Notre décodeur d'image Base64 fait l'opération inverse : collez votre Data URI, récupérez le fichier image (PNG, JPG, SVG, WebP) prêt à téléverser ou enregistrer.

Base64 vs. URL encoding pour les SVG ?

Pour le SVG, l'URL encoding (avec encodeURIComponent) produit une chaîne plus courte que Base64 et reste lisible comme du texte. C'est le choix recommandé en CSS quand on intègre un SVG inline. Pour les formats binaires (PNG, JPG), Base64 reste obligatoire.

L'encodage Base64 affecte-t-il la qualité de l'image ?

Non. L'encodage est lossless : c'est une bijection octet binaire ↔ chaîne Base64. Les pixels d'origine sont strictement préservés. Seule la taille du fichier transporté augmente de 33 %.