Image vers Base64
Transforme une image en data URI Base64, avec CSS et HTML prêts à coller, sur ton appareil.
Comment ça marche
Cet outil lit ton image avec le FileReader de ton navigateur et l'encode en data URI Base64 — une longue chaîne de texte qui contient l'image entière en ligne, commençant par quelque chose comme data:image/png;base64,. Comme l'image devient du texte, tu peux l'intégrer directement dans du HTML ou du CSS sans fichier séparé. Tout se passe en local dans ton navigateur : l'image n'est jamais envoyée, et tu obtiens trois extraits prêts à coller — le data URI brut, une règle CSS background-image et une balise HTML <img>. Un aperçu en miniature montre l'image encodée, et la taille en Ko du data URI est affichée pour que tu juges de sa lourdeur.
Comment encoder une image
Glisse-dépose une image sur la zone prévue ou clique dessus pour ouvrir ton explorateur de fichiers. L'outil accepte le PNG, JPG, WEBP, GIF et SVG — tout ce que ton navigateur peut lire. Dès qu'un fichier est chargé, le data URI apparaît automatiquement dans la zone de texte, sans bouton ni étape de conversion. Tu peux ensuite copier le data URI tel quel, le copier enveloppé dans une déclaration CSS background-image: url("…"), ou le copier enveloppé dans une balise HTML <img src="…">. Pour repartir de zéro, appuie sur le bouton retirer à côté du nom du fichier pour effacer le résultat et choisir une autre image.
Un exemple concret
Imagine que tu crées un e-mail HTML en un seul fichier avec un petit logo en haut. Plutôt que d'héberger le logo séparément et d'espérer que le client mail le récupère, tu le convertis ici, tu copies l'extrait HTML et tu colles la balise <img> obtenue directement dans ton gabarit. L'image voyage dans l'e-mail lui-même, donc aucun lien cassé lorsque l'app de messagerie du destinataire bloque les images distantes. La même approche fonctionne pour un placeholder de page d'atterrissage : copie l'extrait CSS et définis-le comme background-image, et le rendu se fait sans requête réseau supplémentaire.
Ce que tu peux attendre
La sortie est toujours un data URI complet, pas une simple chaîne Base64 — elle conserve le type MIME du fichier d'origine au début (par exemple data:image/webp;base64,…), et la taille affichée en Ko correspond à toute la chaîne encodée, environ un tiers plus lourde que le fichier source. Aucun traitement d'image n'a lieu : l'outil ne redimensionne, ne compresse ni ne ré-encode ta photo, donc le format à l'intérieur du data URI correspond exactement à celui que tu as déposé. Les trois boutons de copie donnent la même chaîne sous trois formes — brut, CSS et HTML — afin que tu colles celle qui correspond à ton contexte sans édition manuelle. Tout est généré instantanément sur ton appareil, sans rien envoyer sur un serveur.
Problèmes courants et solutions
Si la page ralentit après l'intégration, une très grande photo produit un data URI énorme — corrige cela en convertissant des images plus petites ou compressées, car le Base64 grossit d'environ un tiers. Si les boutons de copie semblent ne rien faire, ton navigateur bloque peut-être l'accès au presse-papiers — reclique ou sélectionne et copie manuellement dans la zone de texte. Si tu veux un format différent de celui déposé, l'outil garde ton format d'origine — convertis d'abord ton image en PNG ou WEBP séparément. Et si rien ne se passe quand tu déposes un fichier, c'est peut-être que ce n'est pas une image — reste sur des fichiers PNG, JPG, WEBP, GIF ou SVG.
Questions fréquentes
Pourquoi le Base64 est-il plus gros que mon image ?
L'encodage Base64 ajoute environ 33% de surcoût car il représente des données binaires avec uniquement des caractères texte. C'est normal, et c'est pourquoi l'intégration convient surtout aux petites images.
Ça marche avec le SVG et le GIF ?
Oui. Toute image que ton navigateur peut lire — PNG, JPG, WEBP, GIF, SVG — est encodée en gardant son format d'origine dans le data URI.
Mon image est-elle envoyée quelque part ?
Non. La lecture et l'encodage se font entièrement dans ton navigateur et l'image ne quitte jamais ton appareil.
Est-ce que j'obtiens une chaîne Base64 brute ou un data URI ?
Tu obtiens toujours un data URI complet, avec le type MIME au début (comme data:image/png;base64,…). C'est ce que tu peux coller directement dans les attributs HTML et CSS.
Pourquoi la taille en Ko du résultat est-elle plus grande que mon fichier ?
La taille affichée est la longueur de la chaîne de texte encodée, qui inclut le préfixe data: et le surcoût d'environ 33% du Base64 en plus de ton fichier d'origine.
Comment savoir quel bouton de copie utiliser ?
Les trois boutons enveloppent le même data URI différemment — brut, une déclaration CSS background-image, et une balise HTML <img>. Choisis celui qui correspond à l'endroit où l'image doit apparaître : CSS pour les fonds, HTML pour le contenu intégré.