Comment convertir une image en Base64
- Déposez une image dans la zone ci-dessus ou cliquez sur Choisir une image. Les fichiers PNG, JPG, GIF, WebP, SVG, AVIF, ICO et BMP fonctionnent.
- L’outil affiche un aperçu, la taille de l’image et la longueur du texte Base64.
- Choisissez le format voulu avec les onglets : URL de données (le texte complet
data:image/…;base64,…), Base64 (uniquement la partie encodée), HTML <img>, CSS (une lignebackground-image) ou Markdown. - Pour les extraits HTML et Markdown, saisissez un texte alternatif qui décrit l’image, et laissez Ajouter la largeur et la hauteur au HTML activé pour que la page ne saute pas pendant le chargement.
- Cliquez sur Copier et collez le code où vous en avez besoin. Un texte long est raccourci dans le cadre pour garder la page rapide, mais « Copier » copie toujours le texte complet.
Tout se passe dans votre navigateur. L’image n’est jamais envoyée, il n’y a pas d’inscription, et le fichier d’origine n’est pas modifié.
Qu’est-ce qu’une image en Base64 ?
Base64 est une façon d’écrire n’importe quelles données binaires avec seulement 64 caractères sûrs : les lettres, les chiffres, le plus et la barre oblique. Chaque groupe de 3 octets du fichier devient 4 caractères, ce qui explique que le texte soit environ un tiers plus long que le fichier. Une URL de données place ce texte après un court en-tête, data:image/png;base64,, qui indique au navigateur le type du fichier et son encodage. Les navigateurs la traitent comme n’importe quelle adresse d’image : elle peut donc servir dans un attribut <img src>, dans un url() CSS et dans des images Markdown.
La conversion ne recompresse rien. Les octets de votre fichier sont encodés exactement tels quels : décoder le texte redonne donc une image identique.
Quand utiliser une image intégrée
- Petites icônes et logos de quelques kilooctets, quand économiser une requête vaut le surcroît de taille.
- Pages en un seul fichier, comme un rapport enregistré, une démo de code ou un fichier HTML que vous envoyez à quelqu’un, qui doit fonctionner sans aucun autre fichier.
- Bundles CSS et JavaScript qui ont besoin d’un minuscule espace réservé ou d’un motif d’arrière-plan.
- Données de test et documentation, où un court extrait de texte est plus simple qu’un fichier.
Évitez-la pour les photos et les grandes images : le texte est un tiers plus gros que le fichier, il ralentit le téléchargement et l’analyse du HTML ou du CSS, et le navigateur ne peut pas mettre l’image en cache séparément de la page. De nombreux clients de messagerie, dont Gmail, n’affichent pas non plus les images en URL de données. Si votre site utilise une politique de sécurité de contenu (CSP), data: doit être autorisé dans img-src.
Exemple concret
Vous avez une icône PNG de 3 000 octets, de 40×20 pixels, que vous voulez placer dans un bouton d’un fichier HTML unique. Déposez-la dans l’outil : le texte Base64 compte 4 000 caractères, soit 33 % de plus que le fichier, car 3 000 ÷ 3 × 4 = 4 000. Dans l’onglet HTML, saisissez le texte alternatif Télécharger et copiez le résultat, qui ressemble à ceci :
<img src="data:image/png;base64,iVBORw0KGgo…" alt="Télécharger" width="40" height="20">
Collez-le dans le bouton et l’icône fait partie de la page, sans second fichier à héberger. Pour la même icône en arrière-plan CSS, utilisez l’onglet CSS et collez background-image: url("data:…"); dans la règle.
Conseils et problèmes courants
- Images SVG. Ce sont déjà des fichiers texte : on peut aussi les intégrer en URL de données sans Base64, avec les caractères spéciaux encodés en pourcentage, ce qui donne un texte plus court. La version Base64 reste toutefois la plus simple et fonctionne partout.
- Réduisez d’abord la taille. Si le texte Base64 est énorme, compressez ou redimensionnez l’image avant de la convertir.
- Vérifiez le type. Le début de l’URL de données doit indiquer le bon type d’image ; cet outil le définit d’après votre fichier.
- Retours à la ligne. Une URL de données doit tenir sur une seule ligne. Copiez-la telle quelle et n’ajoutez ni espaces ni retours.
- Accessibilité. Donnez toujours un texte alternatif utile, ou un texte alternatif vide pour les images purement décoratives.
Questions fréquentes
Mon image est-elle envoyée sur un serveur ?
Non. Le fichier est lu et converti dans votre navigateur, sur votre propre appareil. Ni l’image ni son texte Base64 ne le quittent.
Qu’est-ce qu’une URL de données Base64 ?
C’est l’image entière écrite sous forme de texte, de la forme data:image/png;base64,… Vous pouvez ainsi la placer directement dans un attribut HTML src, un url() CSS ou une image Markdown, au lieu de renvoyer vers un fichier séparé.
Pourquoi le texte Base64 est-il plus gros que mon image ?
Base64 écrit chaque groupe de 3 octets en 4 caractères : le texte est donc environ 33 % plus long que le fichier. De plus, le navigateur ne peut pas mettre en cache séparément les images intégrées. Réservez-les aux petites images comme les icônes et gardez les images plus grandes sous forme de fichiers classiques.
Puis-je utiliser une URL de données dans un e-mail ?
Souvent non. De nombreux clients de messagerie, dont Gmail, n’affichent pas les images intégrées sous forme d’URL de données. Pour les e-mails HTML, mieux vaut renvoyer vers une image hébergée ou la joindre.
La qualité de l’image change-t-elle ?
Non. Les octets de votre fichier sont encodés tels quels, sans recompression : l’image décodée à partir du texte Base64 est donc identique à l’original.