Convertisseur image en Base64 et Base64 en image

Qu’est-ce que ce convertisseur ?

Base64 est un encodage qui représente n’importe quelle suite d’octets — donc n’importe quel fichier binaire, y compris une image — avec seulement 64 caractères imprimables : les lettres majuscules et minuscules, les chiffres et deux symboles supplémentaires. Convertir une image en Base64 revient à transformer ses octets bruts (PNG, JPEG, GIF, WebP, BMP, SVG ou ICO) en une longue chaîne de texte qui peut ensuite être collée telle quelle dans un fichier CSS, un document HTML, un fichier JSON ou tout format qui n’accepte que du texte.

Cet outil fonctionne dans les deux sens. En mode image vers Base64, il lit un fichier déposé ou choisi et produit quatre résultats copiables séparément : le Base64 brut, une URI de données (la forme data:image/png;base64,… directement utilisable dans un attribut src ou une propriété CSS), une déclaration CSS background prête à coller, et une balise HTML img complète. En mode Base64 vers image, il fait l’inverse : collez une URI de données ou une simple chaîne Base64, et l’outil affiche un aperçu et propose de télécharger l’image reconstruite.

Tout se déroule dans l’onglet du navigateur : aucun fichier n’est envoyé à un serveur, quelle que soit la taille de l’image ou de la chaîne Base64.

Comment convertir une image en Base64 (ou l’inverse)

1. Sélectionnez le sens souhaité dans le sélecteur Direction : image vers Base64 pour encoder un fichier, ou Base64 vers image pour reconstruire un aperçu à partir d’une chaîne.
2. Fournissez le contenu à convertir : en mode image vers Base64, déposez un fichier dans la zone prévue ou cliquez sur choisir une image parmi les formats PNG, JPEG, GIF, WebP, BMP, SVG et ICO, dans la limite de 10 Mo ; en mode Base64 vers image, collez une URI de données complète ou une simple chaîne Base64 dans le champ prévu.
3. Récupérez le résultat : en mode encodage, copiez le Base64 brut, l’URI de données, la déclaration CSS ou la balise HTML d’un clic, et consultez le panneau taille pour le poids d’origine, le nombre de caractères et les dimensions ; en mode décodage, vérifiez l’aperçu puis téléchargez l’image, ou effacez tout avec le bouton prévu à cet effet.

Quand intégrer une image en Base64, et quand s’en abstenir

Encoder une image en Base64 pour l’intégrer directement dans le HTML ou le CSS supprime une requête HTTP séparée : le navigateur reçoit l’image en même temps que la page, sans aller-retour supplémentaire vers le serveur. C’est utile, mais seulement dans certaines situations précises.

Le problème central est la mise en cache. Un fichier image ordinaire est mis en cache une fois par le navigateur et réutilisé sur toutes les pages qui le référencent. Une image encodée en Base64 n’existe pas comme ressource indépendante : elle fait partie du fichier HTML ou CSS qui la contient, et elle est retéléchargée dès que ce fichier change, même si l’image elle-même n’a pas bougé.

Une image encodée en Base64 perd aussi les optimisations de chargement modernes : impossible de la charger en différé, ni de lui associer un srcset pour servir une résolution adaptée à l’écran, puisqu’il n’existe plus de fichier distinct à différer ou à décliner en plusieurs tailles. Intégrée dans une feuille de style, elle alourdit en plus une ressource qui bloque le rendu : le navigateur doit finir de charger et d’analyser tout le CSS avant le premier affichage. Le texte encodé est par ailleurs un tiers plus volumineux que les octets d’origine, aussi bien en mémoire que dans le fichier qu’il faut ensuite relire ou modifier.

La règle qui en découle est simple : intégrez en Base64 les images petites, statiques et toujours nécessaires — une icône, un dégradé d’un pixel, un logo présent sur chaque page — et laissez les photographies ou toute image réutilisée sur plusieurs pages sous forme de fichiers ordinaires, avec leur propre URL et leur propre entrée de cache.

Le vrai coût du Base64 (et pourquoi le chiffre de 33 % est trompeur)

Base64 découpe l’entrée en groupes de trois octets et écrit chaque groupe sous la forme de quatre caractères pris dans un alphabet de 64 symboles ; la longueur encodée vaut donc exactement 4 × l’arrondi supérieur de n / 3 caractères pour n octets d’entrée, une formule vérifiée pour toutes les longueurs de 0 à 4 000 octets. Quand la taille d’entrée n’est pas un multiple de trois, la sortie est complétée par un ou deux caractères = : 3 octets donnent 4 caractères sans complément, 4 octets donnent 8 caractères avec deux =, 5 octets donnent 8 caractères avec un seul =. Le surcoût asymptotique est exactement d’un tiers, soit 33,33 %.

C’est le chiffre que tout le monde répète, et il décrit fidèlement le texte décodé — mais rarement ce qui transite réellement sur le réseau, parce que les réponses HTTP sont presque toujours compressées en gzip. Sur des images PNG de tailles croissantes, comparer le gzip du fichier brut à celui de sa version Base64 donne : 8×8 pixels, +11,3 % ; 16×16, +4,2 % ; 32×32, +1,5 % ; 64×64, +0,9 % ; 128×128, +0,9 % ; 256×256, +0,9 % ; 512×512, +0,9 %. Sur 60 000 octets de données aléatoires incompressibles, le surcoût reste de +33,33 % à l’état brut mais tombe à +0,97 % après gzip.

L’explication tient à l’alphabet lui-même : Base64 n’utilise que 64 symboles distincts, ce qui représente exactement 6 bits d’information par caractère de 8 bits — log2(64) = 6,00 bits, mesuré directement. L’étage de Huffman de Deflate repère cette redondance et la récupère presque intégralement, ce qui explique pourquoi le surcoût mesuré après compression s’effondre à moins de 1 % dès que l’image dépasse quelques dizaines de pixels de côté.

Passé environ 64×64 pixels, encoder une image en Base64 coûte donc de l’ordre de 1 %, pas 33 %, une fois la compression appliquée. À lire comme « environ un pour cent » plutôt que comme une constante : le chiffre exact dépend de l’implémentation de Deflate qui compresse la réponse, et deux d’entre elles mesurées ici diffèrent de quelques dixièmes. Le panneau taille de cet outil affiche le poids d’origine, le nombre de caractères Base64 et le surcoût brut pour votre propre fichier.

Pourquoi cet outil est-il gratuit ?

Ce convertisseur ne fait tourner aucun modèle et n’a besoin d’aucun serveur : l’encodage et le décodage Base64 se font entièrement dans votre navigateur, en JavaScript, à partir des octets bruts de votre fichier. Rien n’est jamais téléversé, ce qui rend le coût de fonctionnement nul quel que soit le nombre d’images converties.

C’est pourquoi l’outil reste gratuit, sans création de compte, sans filigrane sur le résultat et sans limite d’utilisation. L’encodeur et le décodeur ont été vérifiés face au module base64 de la bibliothèque standard de Python, sur des milliers d’entrées binaires aléatoires de toutes les longueurs.