CodeKitHubEn quoi consiste cet outil ?
Base64 est une façon de représenter des données binaires — comme les octets bruts d'une image — sous forme de texte simple, en utilisant uniquement des lettres, des chiffres et quelques symboles. Étant du texte simple, une image encodée en Base64 peut être intégrée directement dans du HTML, du CSS ou du JSON au lieu d'être référencée comme un fichier séparé.
Une « URL data » enrobe ce texte Base64 d'un petit préfixe (data:image/png;base64,) qui indique au navigateur le type de fichier concerné, afin qu'elle puisse être placée directement dans un attribut src ou url() et affichée sans requête supplémentaire.
Pourquoi l'utiliser ?
- Obtenez les deux formats en même temps — l'URL data complète pour HTML/CSS, et le Base64 brut (sans préfixe) pour l'intégrer dans du JSON ou des fichiers de config.
- Aucun aller-retour serveur : élimine une requête HTTP pour les petites icônes, avatars ou images en ligne.
- Préserve exactement les octets du fichier d'origine — pas de ré-encodage ni de perte de qualité, contrairement aux outils qui décodent et réenregistrent l'image.
- Affiche la différence de taille pour que vous sachiez ce que vous échangez contre cette commodité.
- Confidentiel : le fichier est lu localement avec l'API FileReader du navigateur et ne quitte jamais votre appareil.
Mode d'emploi
- Cliquez sur la zone de dépôt ou glissez-déposez un fichier image dessus.
- Copiez l'URL data complète si vous la collez dans un <img src> ou un background-image CSS.
- Copiez le Base64 brut (sans préfixe data:) si vous intégrez la valeur dans du JSON, YAML ou un autre format de config qui connaît déjà le type de fichier.
- Vérifiez la note de taille — le texte Base64 est environ un tiers plus volumineux que le fichier binaire d'origine.
Exemple
Entrée
Un fichier icône PNG de 12 Ko.Résultat
data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 Ko de texte) plus la même chaîne sans le préfixe data:.L'augmentation de taille d'environ 33 % est inhérente à l'encodage Base64 (3 octets de binaire deviennent 4 caractères de texte) — ce n'est pas un bug de l'outil.
Où chaque format est utilisé
| Format | Usage typique |
|---|---|
| URL data complète | HTML <img src="...">, CSS background-image: url(...), images inline dans les e-mails |
| Base64 brut | Payloads JSON d'API, fichiers YAML/config, champs BLOB de base de données, protocoles binaires personnalisés |
Base64 et taille d'image — le compromis en pratique
La surcharge d'environ 33 % signifie que l'intégration Base64 est surtout adaptée aux petits éléments : une icône de 2 Ko devient un texte inline inoffensif d'environ 2,7 Ko, mais une photo de 500 Ko devient environ 665 Ko de texte inline dans votre HTML, ce qui ralentit l'analyse et ne peut pas être mis en cache séparément de la page.
Si vous intégrez de nombreuses images ou des images plus grandes, mettez en balance le bénéfice de la requête économisée avec le coût en poids de page — et envisagez de compresser d'abord.
Foire aux questions
Pourquoi la chaîne Base64 est-elle tellement plus grosse que mon fichier image ?
Base64 encode chaque groupe de 3 octets de données binaires en 4 caractères texte, ce qui représente une surcharge fixe d'environ 33 %. Pour une image de 100 Ko, attendez-vous à environ 133 Ko de texte Base64. C'est normal et inévitable — c'est le coût de la représentation de données binaires sous forme de texte sûr et portable.
Quelle est la différence entre l'URL data et la chaîne Base64 brute ?
L'URL data inclut un préfixe data:image/png;base64, qui indique à un navigateur ou moteur de rendu quel type MIME le texte suivant décode. Collez l'URL data complète dans un src HTML ou un url() CSS. Le Base64 brut (tout ce qui suit la virgule) est ce dont vous avez besoin quand un système connaît déjà le type de fichier séparément — par exemple un champ JSON comme { "format": "png", "data": "<base64 brut>" }.
Quand faut-il intégrer une image en Base64 plutôt que de créer un lien vers un fichier ?
L'intégration Base64 est utile pour les petites images fréquemment réutilisées (icônes, logos, petits graphismes d'interface) où économiser une requête HTTP compense la surcharge d'environ 33 %, ou dans des contextes où un fichier séparé n'est pas pratique, comme les images inline dans les e-mails ou les exports HTML autonomes. Pour les grandes photos ou tout ce qui est réutilisé sur de nombreuses pages, un fichier lié classique avec mise en cache navigateur est presque toujours préférable.
La conversion en Base64 modifie-t-elle ou compresse-t-elle mon image ?
Non. Base64 est un encodage texte sans perte des octets originaux exacts — il ne touche ni aux pixels, ni à la résolution, ni à la compression. Pour un fichier plus léger, compressez d'abord l'image avec un compresseur d'images, puis convertissez le résultat compressé en Base64.
Mon image est-elle envoyée quelque part ?
Non. Le fichier est lu directement dans votre navigateur avec l'API FileReader et encodé localement — il n'est jamais envoyé sur le réseau.