Convertisseur d'image en Base64
Transformez une image en data URI Base64 pour HTML, CSS ou JSON, et inversement. Tout s'exécute localement — rien n'est téléversé.
- Entrée
- PNG · JPEG · WebP · GIF · SVG · ICO · Base64
- Sortie
- Base64 · data URI · HTML · CSS · image file
Déposez une image à convertir en Base64
PNG, JPEG, WebP, GIF, AVIF, SVG et plus. Vous pouvez aussi coller une image depuis le presse-papiers. Elle ne quitte jamais votre appareil.
Convertir une image en Base64, et du Base64 en image
Ce convertisseur d'image en Base64 transforme un PNG, JPEG, WebP, GIF ou SVG en chaîne Base64 et en data URI, et écrit les extraits que vous collez réellement : une balise img HTML, une règle CSS background-image, du Markdown et une chaîne JSON. Il fonctionne aussi dans l'autre sens : collez une data URI ou du Base64 brut pour voir l'image, vérifier son vrai type et la télécharger. L'image est lue sur votre appareil et n'est jamais téléversée.
Comment convertir une image en Base64
- Déposez une image sur la page, choisissez-en une, ou collez-la depuis le presse-papiers avec Ctrl/⌘ + V.
- Vérifiez l'aperçu, les dimensions et les tailles. Pour une photo, activez Réencoder en WebP pour raccourcir la chaîne ; pour un SVG, laissez SVG encodé pour URL activé.
- Copiez la forme qu'il vous faut : Base64 brut, data URI, balise HTML
<img>,background-imageCSS, Markdown ou chaîne JSON. - Pour aller dans l'autre sens, passez en Base64 → Image, collez la chaîne et téléchargez l'image ou envoyez-la vers un autre outil.
Ce qu'est une data URI
Une data URI place le contenu d'un fichier directement dans une URL : data:image/png;base64,iVBORw0KGgo…. La partie avant la virgule indique le type de média et précise que les données sont encodées en Base64 ; le reste est l'image elle-même. Partout où un navigateur accepte une URL d'image — un attribut src, un url() CSS, une image Markdown — il accepte une data URI, et l'image arrive sans requête séparée.
La contrepartie, c'est la taille. Le Base64 alourdit les données d'environ 33 %, et une image intégrée ne peut pas être mise en cache à part : elle est retéléchargée avec chaque copie du HTML ou du CSS qui la contient. L'intégration est rentable pour les petites images — icônes, petits logos, images de substitution, images d'e-mails HTML ou de documents en fichier unique — et coûte plus qu'elle ne rapporte pour des photos de plusieurs centaines de kilo-octets.
Quel extrait utiliser
- Base64 brut
- Seulement les octets encodés, pour les API et champs JSON qui attendent du Base64 et stockent le type à part.
- Data URI
- L'URL data: complète, prête pour tout endroit qui accepte une URL d'image.
- HTML <img>
- Une balise img avec la data URI, un texte alternatif tiré du nom de fichier, ainsi que la largeur et la hauteur de l'image, ce qui évite les décalages de mise en page.
- CSS background-image
- Une déclaration pour une feuille de style. Bien pour de petites décorations répétées ; à éviter pour les grandes images dans le CSS critique.
- Markdown et JSON
- Une image en syntaxe Markdown, et la data URI sous forme de chaîne JSON correctement entre guillemets et échappée.
SVG : l'encodage URL fait mieux que le Base64
Le SVG est du texte : il n'a pas du tout besoin de Base64. N'encoder en pourcent que les quelques caractères qu'une URL ne peut pas contenir, et transformer les guillemets doubles en apostrophes, donne une URI data:image/svg+xml,… généralement 15 à 30 % plus courte que la version Base64, qui se compresse mieux avec gzip et reste lisible. C'est le réglage par défaut pour les fichiers SVG ici ; désactivez-le si un système exige du Base64.
Pour les images matricielles, réencoder en WebP avant la conversion réduit souvent la chaîne de moitié ou plus pour les photos et les captures d'écran. L'outil utilise l'encodeur de votre navigateur ; si le navigateur ne sait pas écrire de WebP, l'outil vous le signale et garde le résultat obtenu. Pour mieux maîtriser le format et la qualité, passez d'abord par le convertisseur d'images.
Du Base64 vers une image
Collez une data URI complète, du Base64 brut, ou même une balise <img> ou une règle CSS entière : l'outil extrait l'image, la prévisualise et affiche son poids et ses dimensions. Le type est lu dans les premiers octets de l'image plutôt que repris de l'étiquette : un JPEG étiqueté PNG est téléchargé pour ce qu'il est vraiment. Pour du Base64 qui contient autre chose qu'une image, comme un PDF ou un ZIP, utilisez le décodeur Base64, qui gère tous les types de fichiers.
Questions fréquentes
- Comment convertir une image en Base64 ?
- Déposez ou collez l'image dans le convertisseur. La chaîne Base64, la data URI et des extraits HTML, CSS, Markdown et JSON prêts à l'emploi apparaissent aussitôt, chacun avec un bouton de copie.
- Comment convertir du Base64 en image ?
- Passez en Base64 → Image et collez la data URI ou la chaîne Base64 brute. L'image est prévisualisée immédiatement et peut être téléchargée avec la bonne extension.
- Le Base64 alourdit-il les images ?
- Oui, d'environ un tiers, car chaque groupe de trois octets devient quatre caractères. L'intégration vaut le coup pour les petites images qui économisent une requête, pas pour les grandes photos.
- Comment utiliser une image Base64 en CSS ?
- Utilisez-la comme URL : background-image: url("data:image/png;base64,…");. Copiez l'extrait CSS, il est déjà sous cette forme.
- Faut-il encoder un SVG en Base64 ?
- En général, non. Une data URI SVG encodée pour URL est plus courte que la version Base64 et reste lisible, et tous les navigateurs modernes la prennent en charge. L'outil la produit par défaut pour les fichiers SVG.
- Les images Base64 fonctionnent-elles dans les e-mails ?
- La prise en charge varie : de nombreux webmails, dont Gmail, bloquent les images en data URI. Pour l'e-mail, les images jointes référencées par cid: ou les images hébergées sont plus fiables.
- Mon image est-elle téléversée ?
- Non. L'image est lue et encodée dans votre navigateur, et rien n'est envoyé à un serveur.