Convertisseur d'Image en Base64

Qu'est-ce qu'une image Base64 (URI de données) ?

<!-- The same 1×1 transparent PNG, four ways -->

<!-- HTML -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" alt="pixel">

/* CSS */
.badge {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==");
}

<!-- Markdown -->
![pixel](data:image/png;base64,iVBORw0KGgo…)

// JSON
{ "mime": "image/png", "data": "iVBORw0KGgo…" }

Fonctionnalités clés

Exemples

transparent-1x1.png  (un PNG de 68 octets)

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

icon.svg

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…" alt="icon">

photo.jpg  (12 Ko)

![photo](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ…)

Comment convertir une image en Base64

1. 1

   Ajoutez votre image

   Glissez une image sur la zone de dépôt, cliquez pour parcourir, ou collez depuis le presse-papiers avec Ctrl+V / Cmd+V. PNG, JPG, GIF, WebP, SVG, ICO et BMP sont tous pris en charge et encodés entièrement dans votre navigateur.

2. 2

   Choisissez un format de sortie

   Choisissez URI de données, Base64 brut, HTML , arrière-plan CSS, Markdown ou JSON parmi les onglets. Consultez la barre de métadonnées pour l'augmentation de taille et le badge de conseil pour savoir si l'intégration en vaut la peine.

3. 3

   Copiez ou téléchargez

   Cliquez sur Copier pour récupérer l'extrait, ou sur Télécharger pour l'enregistrer dans un fichier. Pour inverser le processus, passez à l'onglet Base64 → Image, collez une chaîne et téléchargez l'image reconstruite.

Pièges courants

data:base64,iVBORw0KGgo…
<!-- no MIME type — will not render -->

data:image/png;base64,iVBORw0KGgo…
<!-- correct: image/png -->

data:image/png;base64,iVBORw0KGgoAAAANS
UhEUgAAAAEAAAABCAYAAAA…
<!-- embedded newline breaks the attribute -->

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAA…
<!-- single unbroken line -->

…WjR9awAAAABJRU5ErkJggg
<!-- missing trailing == -->

…WjR9awAAAABJRU5ErkJggg==
<!-- complete with padding -->

/* 380 KB hero photo inlined into a global stylesheet */
.hero { background-image: url("data:image/jpeg;base64,/9j/…(½ MB of text)…"); }

/* Serve it as a cached file instead */
.hero { background-image: url("/img/hero.jpg"); }

Cas d'utilisation courants

Intégrer un logo ou une icône dans le CSS

Déposez un petit PNG ou une icône SVG, copiez l'extrait CSS background-image et collez-le dans votre feuille de style pour supprimer une requête HTTP sur une ressource qui change rarement. Gardez-le sous ~2 Ko (surveillez le badge vert) pour que la feuille de style reste légère.

Intégrer des images dans un e-mail HTML

Les clients de messagerie bloquent souvent les images distantes. Encodez votre logo en URI de données et collez l'élément dans le modèle pour qu'il s'affiche sans récupération serveur. Testez sur les différents clients — réservez l'intégration aux petites icônes, pas aux photos.

Markdown et README autonomes

Quand vous ne pouvez pas héberger une image — un ticket GitHub, un notebook, un document hors ligne — la sortie Markdown intègre l'image directement dans le fichier, pour qu'elle voyage avec le texte. Idéal pour les petits schémas et les badges.

Images dans des charges utiles JSON ou API

Besoin de transmettre une miniature dans un document JSON ou un fichier de configuration ? La sortie JSON vous donne un objet { mime, data } à déposer directement, et le décodeur récupère l'image à l'autre bout.

Débogage rapide d'URI de données

Vous avez trouvé un mystérieux URI data: dans une feuille de style ou une réponse d'API ? Collez-le dans l'onglet Base64 → Image pour voir ce que c'est réellement, lire ses vraies dimensions et le télécharger comme un fichier normal pour une inspection plus poussée.

Widgets et bookmarklets en un seul fichier

Les bookmarklets et les widgets intégrables doivent être autonomes, sans aucune dépendance externe. Intégrer leurs icônes en Base64 garde tout dans un seul fichier qui fonctionne quel que soit l'endroit où il est déposé.

Détails techniques

Comment fonctionne l'encodage Base64

Le Base64 prend le flux binaire de l'image trois octets (24 bits) à la fois et le découpe en quatre groupes de 6 bits, chacun mappé sur un caractère de l'alphabet de 64 symboles. Quand la longueur de l'entrée n'est pas un multiple de trois, un ou deux caractères de remplissage = marquent le reste. Ce rapport 3-vers-4 explique pourquoi le texte encodé est environ 33 % plus volumineux que la source. L'outil calcule la longueur d'octets décodée directement à partir de la longueur de la chaîne et du remplissage, si bien que les tailles qu'il indique sont exactes, pas estimées.

Détection MIME et octets magiques

Quand vous encodez un fichier, son type MIME provient de l'objet File du navigateur. Quand vous décodez une chaîne Base64 brute sans préfixe data:, l'outil inspecte les premiers caractères, qui correspondent aux octets magiques de l'image : iVBORw0KGgo pour PNG, /9j/ pour JPEG, R0lGOD pour GIF, UklGR pour WebP, et PHN2Zy ou PD94bWw pour SVG. Cela permet au décodeur de reconstruire un URI de données correct et de télécharger avec la bonne extension de fichier, même quand l'entrée n'est que la charge utile nue.

Traitement 100 % local

L'encodage utilise readAsDataURL de l'API FileReader, qui renvoie un URI de données synthétisé entièrement dans le navigateur. Le décodage pour le téléchargement utilise atob plus un Uint8Array pour reconstruire le binaire, puis un Blob et une URL d'objet — là encore sans aucun réseau. Le résultat est un outil que vous pouvez exécuter hors ligne et auquel confier des images confidentielles, car les octets ne quittent jamais la page. Vous pouvez vérifier le comportement sans requête dans les outils de développement de votre navigateur.

Bonnes pratiques

N'intégrez que des ressources petites et stables

Le créneau idéal du Base64, ce sont les ressources sous ~2 Ko qui changent rarement et apparaissent sur peu de pages — icônes, petits logos, sprites d'interface. Au-delà de ~10 Ko, la pénalité de taille et la perte de mise en cache l'emportent sur la requête économisée, surtout maintenant que HTTP/2 rend les requêtes supplémentaires peu coûteuses. Laissez le badge de conseil vous guider, et servez les photos et grands graphismes comme des fichiers normaux mis en cache.

Préférez l'encodage URL pour le SVG

Le SVG est du texte, donc le Base64 le gonfle sans gain. Pour intégrer un SVG dans du CSS ou du HTML, encodez plutôt le balisage en URL — c'est généralement plus compact, ça reste lisible et ça se compresse mieux avec gzip/brotli. Réservez le SVG en Base64 aux pipelines qui l'exigent spécifiquement. Notre Encodeur/Décodeur URL gère l'encodage en pourcentage.

Définissez toujours le bon type MIME

Un URI de données ne s'affiche que si son type MIME correspond au contenu : image/png, image/jpeg, image/gif, image/webp, image/svg+xml. Un type erroné ou manquant est la première cause d'échec d'affichage d'une image intégrée. Quand vous copiez depuis cet outil, le type est défini pour vous ; si vous assemblez les URI à la main, vérifiez bien le préfixe.

Compressez avant d'encoder

Comme le Base64 ajoute ~33 % à la taille du fichier, réduire la source d'abord est doublement rentable. Passez vos images dans notre Compresseur d'images — ou exportez aux bonnes dimensions — avant d'encoder, pour que l'URI de données résultant soit aussi petit que possible. Un PNG compressé de 4 Ko bat un original de 40 Ko, à la fois comme fichier et intégré.

Ne comptez jamais sur le Base64 pour la confidentialité

Le Base64 est trivialement réversible et n'offre aucune protection. Ne l'utilisez pas pour masquer un contenu d'image sensible — n'importe qui peut le décoder instantanément, y compris avec l'onglet de cette page. Si un contenu doit être protégé, utilisez de vrais contrôles d'accès et du chiffrement sur le serveur, et servez l'image via un point d'accès authentifié.

Questions fréquentes

Que fait ce convertisseur d'image en Base64 ?

Il lit une image que vous déposez, collez ou sélectionnez et encode ses octets en une chaîne Base64 — entièrement dans votre navigateur. Vous obtenez le Base64 brut, un URI de données prêt à l'emploi (data:image/png;base64,…) et des extraits prêts à coller pour HTML , CSS background-image, Markdown et JSON. Une barre de métadonnées indique la taille du fichier d'origine, la taille encodée, le pourcentage exact d'augmentation (le Base64 est environ 33 % plus volumineux), les dimensions en pixels et le type MIME. Rien n'est envoyé : l'encodage s'exécute localement via l'API FileReader, ce qui rend l'outil sûr pour les captures d'écran, les ressources internes et les visuels non publiés. Pour faire l'inverse, utilisez l'onglet Base64 → Image ou notre décodeur Base64 en image.

Mes images sont-elles envoyées à un serveur ?

Non. Chaque étape se déroule côté client dans votre navigateur via l'API FileReader et l'encodage de chaînes JavaScript. Votre image n'est jamais transmise, jamais stockée et jamais journalisée. Vous pouvez le vérifier en ouvrant l'onglet Réseau de votre navigateur — encoder une image ne déclenche aucune requête réseau. Cela rend l'outil sûr pour les contenus sensibles : captures d'écran de produits avant lancement, schémas internes, ressources clients et tout contenu sous NDA. Aucune limite de taille n'est imposée par un quota d'envoi, seulement la limite pratique de la taille de chaîne Base64 que votre navigateur et votre système cible peuvent gérer confortablement.

De combien le Base64 augmente-t-il la taille d'une image ?

Le Base64 encode chaque groupe de 3 octets de données binaires en 4 caractères ASCII, si bien que la chaîne encodée est environ 33 % plus volumineuse que le fichier d'origine (plus quelques octets de remplissage et le préfixe data:). Un PNG de 9 Ko devient environ 12 Ko de texte. Cette surcharge est la raison la plus importante de ne pas encoder de grandes images en Base64 : vous transmettez plus d'octets et, comme la chaîne est intégrée dans votre HTML ou CSS, ces octets sont retéléchargés à chaque modification du fichier conteneur et ne peuvent pas être mis en cache séparément. L'outil affiche l'augmentation exacte pour votre fichier spécifique dans la barre de métadonnées, pour décider avec de vrais chiffres.

Quand utiliser une image Base64 plutôt qu'un fichier normal ?

Le Base64 (sous forme d'URI de données) convient bien aux petites ressources qui changent rarement, lorsque éviter une requête HTTP séparée compte plus que la mise en cache : petites icônes et logos intégrés dans le CSS, images dans les e-mails HTML (de nombreux clients bloquent les images externes mais affichent les URI de données), widgets ou bookmarklets en un seul fichier qui doivent être autonomes, sprites SVG et images stockées dans des charges utiles JSON/API. Règle empirique : en dessous d'environ 2 Ko et utilisée sur une ou deux pages, l'intégration l'emporte généralement. Le badge de conseil de cet outil encode exactement cette heuristique — vert sous 2 Ko, orange jusqu'à 10 Ko, rouge au-delà.

Quand NE PAS utiliser d'images Base64 ?

Évitez le Base64 pour tout ce qui est volumineux ou réutilisé sur plusieurs pages. Quatre raisons concrètes : (1) l'augmentation de taille d'environ 33 % signifie plus d'octets sur le réseau ; (2) une image intégrée ne peut pas être mise en cache seule — elle est retéléchargée à chaque modification du HTML ou CSS qui la contient, et répétée sur chaque page qui l'intègre ; (3) décoder un grand URI de données consomme du CPU et de la batterie, ce qui est perceptible sur mobile ; et (4) vous perdez les images réactives (srcset/sizes) et le chargement différé. Comme HTTP/2 multiplexe à peu de frais de nombreuses petites requêtes, la raison initiale de l'intégration — réduire le nombre de requêtes — ne s'applique presque plus. Pour les photos, images d'en-tête ou tout ce qui dépasse ~10 Ko, un fichier normal mis en cache se charge presque toujours plus vite. Si l'objectif est un fichier plus petit, passez-le d'abord dans notre Compresseur d'images.

Comment utiliser la sortie Base64 dans HTML et CSS ?

Pour le HTML, passez à l'onglet HTML et collez l'élément généré : . Pour le CSS, utilisez l'onglet CSS, qui enveloppe l'URI de données dans background-image: url("data:image/png;base64,…"). Les deux fonctionnent partout où une URL est acceptée — src d'img, arrière-plan CSS, mask-image, voire balises link de favicon. Le schéma data: est pris en charge par tous les navigateurs modernes. Une réserve : des URI de données très longs dans du HTML en ligne peuvent nuire à la lisibilité et, en CSS, gonfler la feuille de style livrée à chaque visiteur, alors réservez l'intégration aux ressources réellement petites.

Quels formats d'image sont pris en charge ?

PNG, JPEG/JPG, GIF (y compris animés), WebP, SVG, ICO et BMP sont tous pris en charge, ainsi que AVIF lorsque le navigateur sait le décoder. Comme l'outil encode les octets bruts plutôt que de réafficher l'image, les GIF animés restent animés, les PNG transparents conservent leur canal alpha et les SVG demeurent entièrement vectoriels. Le type MIME est lu depuis le fichier lui-même et, lorsque vous collez du Base64 brut dans le décodeur, déduit des octets magiques des données. Il n'y a aucune conversion de format pendant l'encodage — la sortie représente exactement le fichier que vous avez fourni.

Pourquoi le SVG est-il un cas particulier ?

Le SVG est du texte XML, pas du binaire, alors le Base64 le rend en réalité plus volumineux et moins lisible sans aucun bénéfice. Pour intégrer un SVG dans du CSS ou du HTML, l'encodage URL du balisage (encodage en pourcentage de quelques caractères comme #, <, > et les guillemets) est généralement plus compact que le Base64 et garde la source lisible et compressible avec gzip. Cet outil propose tout de même une sortie SVG en Base64 car certains pipelines l'exigent, mais si vous optimisez du CSS à la main, préférez un URI de données encodé en URL. Notre Encodeur/Décodeur URL facilite cette approche.

Le Base64 est-il la même chose qu'un chiffrement ?

Non. Le Base64 est un encodage, pas un chiffrement — il est entièrement réversible par quiconque, sans aucune clé. Il existe pour représenter des données binaires à l'aide d'un jeu sûr de caractères ASCII imprimables, afin que les données survivent au transport à travers des systèmes qui ne gèrent que du texte (HTML, JSON, en-têtes d'e-mail, URL). N'importe qui peut décoder une chaîne Base64 vers l'image d'origine en quelques secondes, y compris avec l'onglet Base64 → Image proposé ici. Ne traitez jamais le Base64 comme un moyen de cacher ou de protéger un contenu d'image sensible ; il n'offre aucune confidentialité.

Puis-je intégrer une image Base64 dans un e-mail ?

Oui, et c'est l'un des meilleurs usages de la technique. De nombreux clients de messagerie bloquent par défaut les images hébergées en externe pour des raisons de confidentialité, ce qui casse les mises en page reposant sur des logos distants. Intégrer de petites images sous forme d'URI de données garantit qu'elles s'affichent immédiatement sans récupération serveur. Les compromis : certains anciens clients (notamment certaines versions d'Outlook) prennent mal en charge les URI de données, et les gros visuels intégrés gonflent la taille du message que chaque destinataire télécharge. Gardez les images intégrées petites — logos et icônes, pas des photographies — et testez sur vos clients cibles.

Pourquoi mon image Base64 ne s'affiche-t-elle pas ?

Les causes les plus fréquentes : un type MIME manquant ou erroné dans le préfixe data: (utilisez image/png pour PNG, image/jpeg pour JPG, image/svg+xml pour SVG), des espaces ou des retours à la ligne insérés par erreur dans la chaîne, une copie tronquée qui a perdu le remplissage final (= ou ==), ou le collage du seul Base64 brut sans le préfixe data:…;base64, là où une URL est attendue. Le décodeur de cet outil est tolérant — il supprime les espaces, accepte une entrée avec ou sans préfixe et déduit le MIME des octets magiques de l'image — alors coller votre chaîne dans l'onglet Base64 → Image est le moyen le plus rapide de vérifier si les données elles-mêmes sont valides.