Convertisseur image → Base64

À propos de cet outil

Cet outil convertit une image en Base64 pour l'intégrer directement dans une page HTML, une feuille de style, un fichier Markdown ou un e-mail, sans fichier séparé. Il produit l'URL de données complète, le Base64 seul, une balise img, une règle CSS background-image ou une image Markdown, et indique le surcoût en poids (environ 33 %). Dans l'autre sens, il décode du Base64 ou une URL de données : le format est reconnu par la signature des données, l'image s'affiche et se télécharge. Tout se déroule dans votre navigateur.

Comment utiliser cet outil

1. Choisissez le sens : « Image vers Base64 » ou « Base64 vers image ».
2. Importez une image et sélectionnez le format de sortie (URL de données, Base64 seul, balise img, CSS ou Markdown), ou collez du Base64 à décoder.
3. Vérifiez le poids du texte obtenu et les conseils éventuels.
4. Copiez le résultat, enregistrez-le en .txt, ou téléchargez l'image décodée.

Qu'est-ce que le Base64 et une URL de données ?

Le Base64 est un codage qui représente des données binaires (comme les octets d'une image) avec seulement 64 caractères sûrs : les lettres A à Z et a à z, les chiffres 0 à 9, « + » et « / », complétés par « = » en fin de texte. Il est défini par la RFC 4648. Chaque groupe de trois octets devient quatre caractères : le texte obtenu est donc environ 33 % plus long que les données d'origine.

Une URL de données (data: URL, RFC 2397) place ce texte dans une adresse que le navigateur sait afficher sans rien télécharger :

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR4nGM4VmgJAANxAXFhTttGAAAAAElFTkSuQmCC

Elle se compose du préfixe data:, du type de média (image/png), de l'indication ;base64 et, après la virgule, des données elles-mêmes. Cet exemple, un seul pixel de couleur terre cuite (#c67139), tient en une ligne ; une icône de 2 Ko dépasse 2 700 caractères. L'outil produit cette forme complète, mais aussi le Base64 seul, une balise img, une règle CSS ou une image Markdown.

Quand l'utiliser, et quand l'éviter

Bons usages

• Très petites images (moins de 10 Ko environ) : icônes, puces, motifs répétés, miniatures floues servant de repli avant le chargement de l'image réelle.
• Fichier unique et autonome : une page HTML ou une documentation à envoyer ou à archiver sans dossier d'images.
• Courriels HTML : certains clients bloquent les images distantes ; une image intégrée s'affiche sans demande de chargement (mais certains clients bloquent aussi les data URL, à tester).
• Prototypes et démonstrations qui ne doivent dépendre d'aucune ressource externe.

Mauvais usages

• Les grandes images. Une photo de 200 Ko devient un texte de 270 Ko collé dans votre HTML ou votre CSS : la page entière doit être téléchargée avant d'afficher quoi que ce soit, et l'image ne peut plus être mise en cache séparément.
• Les images réutilisées sur plusieurs pages. Un fichier séparé est téléchargé une fois et mis en cache ; une image intégrée est retéléchargée avec chaque page.
• Les images sous la ligne de flottaison. Elles pourraient se charger en différé (loading="lazy") ; intégrées dans le HTML, elles sont chargées d'emblée.

La règle pratique : en dessous de 10 Ko, l'économie d'une requête réseau peut valoir le surcoût ; au-delà, gardez un fichier. Le plus simple est de commencer par réduire l'image avec le compresseur, ou de la remplacer par un SVG, avant de l'encoder.

Les formes de sortie de l'outil

Pensez à écrire un vrai texte alternatif dans l'attribut alt : l'outil le remplit avec le nom du fichier, à remplacer par une description de l'image (ou par un alt="" vide pour une image purement décorative).

Décoder du Base64 : retrouver une image

Le mode « Base64 vers image » fait l'opération inverse. Collez l'URL de données complète ou le Base64 seul, et l'outil :

1. nettoie le texte (espaces, retours à la ligne, variantes « URL-safe » avec « - » et « _ » à la place de « + » et « / ») et ajoute le remplissage « = » manquant ;
2. décode les octets et reconnaît le format par sa signature (les premiers octets d'un fichier PNG, JPEG, GIF, WebP, BMP ou AVIF sont caractéristiques ; un SVG commence par une balise <svg) ;
3. affiche l'image, indique son format, ses dimensions et son poids, et vous laisse la télécharger avec la bonne extension.

Si le texte n'est pas du Base64 valide (caractères interdits, longueur impossible) ou si les données décodées ne sont pas une image (du texte, un PDF, un fichier tronqué), l'outil l'explique. Il détecte aussi quand l'URL annonce un type différent du contenu réel.

Pour encoder ou décoder du texte ou n'importe quel fichier, utilisez l'encodeur Base64. Prudence : ne décodez et n'ouvrez que des données dont vous connaissez la source ; un SVG peut contenir du script et ne doit pas être ouvert directement depuis une source inconnue (l'outil l'affiche dans une balise img, qui n'exécute aucun script).

Questions fréquentes