Image en Base64 : data URI, HTML et CSS

Le Base64 transforme les données binaires d’une image en texte composé de lettres, de chiffres et de quelques symboles. Ce texte peut être intégré là où seul du texte est accepté : dans du HTML ou du CSS sous forme de data URI, dans un JSON envoyé à une API, dans un modèle d’e-mail ou dans un fichier de configuration. Le navigateur le décode en image d’origine à l’affichage.

Le convertisseur lit votre image dans le navigateur et produit instantanément la chaîne encodée, avec des extraits prêts à l’emploi : un data URI complet (data:image/png;base64,…), la chaîne Base64 seule, une balise HTML img, une règle CSS background-image et un objet JSON. Vous pouvez copier chacun dans le presse-papiers ou télécharger la sortie en fichier texte ou JSON. Les images jusqu’à 10 Mo sont acceptées.

Comment utiliser : Convertisseur d’image en Base64

1. Importez ou déposez une image (JPG, PNG, WebP, GIF, SVG et autres formats lus par le navigateur, jusqu’à 10 Mo). Le format, les dimensions et le poids de l’original s’affichent.
2. Choisissez le format de sortie : Data URI, Base64 Only, CSS Background, HTML Image ou JSON.
3. Copiez le résultat en un clic ou téléchargez-le, puis collez-le dans votre HTML, CSS, JavaScript ou requête API.
4. Vérifiez le nombre de caractères et la taille encodée dans le panneau de statistiques avant d’utiliser de grandes images.

Quand les images Base64 ont du sens

• Petites icônes et logos dans le CSS ou le HTML, pour éviter une requête HTTP séparée.
• Modèles d’e-mails HTML où les images externes peuvent être bloquées.
• API et JSON qui n’acceptent les images que sous forme de texte.
• Démos et prototypes en un seul fichier qui doivent fonctionner sans ressources externes.

Exemples de sortie

Un data URI ressemble à data:image/png;base64,iVBORw0KGgo… et peut s’utiliser partout où une URL est attendue. En HTML, il devient <img src="data:image/png;base64,…" alt="">, et en CSS background-image: url(data:image/png;base64,…). La sortie JSON entoure la chaîne de son type MIME et de ses dimensions, pratique pour les requêtes API et les jeux de test.

Poids et performances

Le Base64 étant environ 33 % plus lourd que le fichier binaire et lu avec le HTML ou le CSS qui le contient, l’intégration est surtout rentable pour des images de quelques kilo-octets, comme les icônes, petits logos et espaces réservés. Compressez ou redimensionnez d’abord l’image, idéalement à la taille d’affichage exacte, pour garder une chaîne courte et des pages rapides.

Le Base64 rend les données environ un tiers plus lourdes que le fichier d’origine, et les images intégrées ne peuvent pas être mises en cache séparément par le navigateur. Réservez-le aux petites images ; pour les photos et grands graphismes, un fichier image classique compressé avec le compresseur d’images est plus rapide.

Privé, gratuit et rapide

L’outil fonctionne entièrement dans votre navigateur : vos fichiers et textes sont traités sur votre appareil et ne sont envoyés à aucun serveur. Sans inscription, sans filigrane et sans limite quotidienne.