Convertisseur Image → Base64

Encodez n'importe quelle image en data URI Base64, ou collez une data URI pour la décoder en image. Copiez le résultat ou récupérez le snippet CSS url(). Rien ne quitte votre appareil.

Comment fonctionne Image vers Base64

Image en Base64 lit votre fichier image et l'encode sous forme d'URI de données Base64 que vous pouvez intégrer directement en HTML, CSS ou JSON sans avoir besoin d'une requête de fichier séparée. La conversion utilise l'API FileReader dans votre navigateur ; aucun octet de votre image n'est envoyé à un serveur. Vous pouvez également coller une chaîne Base64 pour la décoder et prévisualiser l'image, entièrement en local.

Une URI de données Base64 est environ 33% plus grande que le binaire original car chaque groupe de trois octets s'étend en quatre caractères ASCII. Cette augmentation de taille est le compromis attendu pour la commodité d'insérer une image dans un document ou une feuille de style. L'outil vous montre à la fois la chaîne Base64 brute et un extrait de balise HTML img prêt à l'emploi ainsi qu'un extrait CSS background-image pour un copier-coller rapide dans votre projet.

Rédigé par Bastien Sulyan

Comment utiliser Image vers Base64, étape par étape

Déposez un fichier image sur la zone de chargement ou cliquez pour parcourir. Formats acceptés : JPEG, PNG, WebP, GIF, SVG.
L'URI de données Base64 apparaît immédiatement dans le champ de sortie.
Copiez la chaîne Base64 brute, ou utilisez la balise HTML img pré-formatée ou l'extrait CSS background-image.
Pour décoder, collez une chaîne Base64 dans le champ de saisie et passez en mode décodage pour prévisualiser l'image.
Cliquez sur le bouton copier à côté de n'importe quel extrait pour le copier dans le presse-papiers.

Cas d'utilisation courants

Un développeur front-end intègre une petite icône sous forme d'URI de données dans un fichier CSS pour éliminer une requête HTTP supplémentaire.
Un développeur intègre un petit indicateur de chargement comme attribut src Base64 pour que l'image de remplacement soit disponible avant le chargement du bundle JavaScript.
Un ingénieur QA copie le Base64 d'une image de test pour le coller directement dans un payload JSON pour un test d'API.
Un constructeur de gabarits d'e-mail intègre un logo de signature sous forme d'URI de données Base64 car certains clients de messagerie bloquent les requêtes d'images externes.

Questions fréquentes

Pourquoi la sortie Base64 est-elle environ un tiers plus grande que mon fichier original ?

L'encodage Base64 représente chaque groupe de trois octets binaires en quatre caractères ASCII (un ratio de 4/3). Une image de 100 Ko en binaire devient environ 133 Ko sous forme de chaîne Base64. C'est inhérent au schéma d'encodage, pas une limitation de l'outil.

Le contenu de l'image est-il transmis à un serveur lors de l'encodage ?

Non. L'API FileReader lit le fichier binaire depuis votre disque local et passe le résultat directement à la fonction d'encodage JavaScript dans votre onglet de navigateur. Les données d'image ne quittent pas votre appareil.

Puis-je utiliser la sortie URI de données dans n'importe quel contexte HTML ou CSS ?

Oui. Une URI de données commençant par data:image/jpeg;base64, suivie de la chaîne encodée peut être utilisée comme attribut src d'une balise img ou comme valeur url() dans une propriété CSS background-image. Tous les navigateurs modernes prennent en charge les URI de données. Les URI de données très volumineuses peuvent ralentir le rendu de la page, donc l'intégration est généralement réservée aux petites images de quelques kilo-octets.

L'outil prend-il en charge les GIF animés ?

L'outil encode le contenu binaire complet de tout fichier fourni, y compris les GIF animés. L'URI de données résultante, utilisée comme src d'une balise img, jouera l'animation dans les navigateurs qui prennent en charge l'animation GIF.

Comment puis-je faire l'inverse et décoder une chaîne Base64 en image ?

Passez l'outil en mode décodage, collez votre chaîne Base64 (avec ou sans le préfixe data:), et l'outil la décodera et proposera l'image binaire en téléchargement tout en affichant un aperçu.

Outils liés

Tout reste local, explorez des outils complémentaires.

Tous les outils image