Convertisseur d'Image en Base64 — Gratuit en ligne

Convertissez un fichier image en URI de données Base64 pour l'intégrer directement en HTML ou CSS.

Les résultats sont fournis à titre informatif uniquement et peuvent contenir des erreurs. Vérifiez les informations importantes de manière indépendante. L'utilisation de cet outil se fait à vos propres risques.

Ce que fait cet outil

Le convertisseur d'image en Base64 transforme un fichier image en data URL : une seule ligne de texte qui commence par data:image/png;base64, (ou le type de votre fichier), suivie des octets de l'image encodés en Base64. Choisissez un PNG, un JPG, un GIF, un SVG, un WebP ou toute autre image : le texte apparaît avec un aperçu, prêt à être copié.

Le fichier est lu avec le FileReader du navigateur : il n'est donc jamais envoyé sur un serveur. Une data URL s'utilise partout où une adresse d'image classique fonctionne : dans un <img src>, dans une règle CSS background-image: url(...), dans un payload JSON ou dans un modèle d'e-mail. Le Base64 rend les données environ un tiers plus volumineuses que le fichier d'origine : il convient donc surtout aux petites images.

Quand l'utiliser

  • Intégrer une petite icône ou un logo dans le CSS pour que la page fasse une requête de moins.
  • Placer une image dans un fichier HTML unique et autonome, comme un rapport ou une démo.
  • Envoyer une image dans une requête d'API JSON qui n'accepte pas les envois multipart.
  • Ajouter une image inline à une signature d'e-mail HTML ou à une fixture de test.

Exemple concret

Entrée

pixel.png (1 × 1 px, bleu, 69 octets)

Sortie

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mOwbvoGAAKvAbSJsn7VAAAAAElFTkSuQmCC

Questions sur cet outil

Pourquoi le texte Base64 est-il plus gros que mon image ?

Le Base64 écrit chaque groupe de 3 octets sous forme de 4 caractères de texte : le résultat est donc environ 33 % plus volumineux que le fichier. Une image de 30 Ko devient environ 40 Ko de texte. La compression Gzip ou Brotli côté serveur en récupère une partie.

Quand faut-il éviter d'intégrer une image inline ?

Évitez-le pour les grandes photos et pour les images utilisées sur de nombreuses pages. Un fichier image classique n'est mis en cache qu'une fois par le navigateur, alors qu'une image inline est retéléchargée avec chaque fichier HTML ou CSS qui la contient.

Comment utiliser le résultat en CSS ?

Placez-le dans url() : background-image: url("data:image/png;base64,...");. Pour les icônes SVG, un SVG encodé en URL est souvent plus léger que le Base64 ; la page Encodeur d'URL peut le préparer.

Comment reconvertir du Base64 en image ?

Collez la data URL complète dans la barre d'adresse d'un navigateur et enregistrez l'image, ou décodez la partie qui suit la virgule avec le Décodeur Base64 si vous avez besoin des octets bruts.

Cet outil est-il gratuit ?

Oui, il est gratuit. Sans inscription ni e-mail. Résultats directement sur cette page.

Comment obtenir mon résultat ?

Utilisez cet outil sur cette page. Le résultat apparaît ici, sans envoi par e-mail.