Image vers Base64

Déposez une image dans la zone ci-dessus, cliquez pour parcourir, collez depuis votre presse-papiers ou chargez-la via une URL. L'outil convertit instantanément l'image en chaîne Base64 et affiche un data URI prêt à copier en CSS, HTML ou Markdown. Tout se passe dans votre navigateur — l'image n'est jamais envoyée sur un serveur, ce qui le rend sûr pour les images privées ou sensibles.

Passez à l'onglet Base64 → Image et collez un data URI (data:image/png;base64,…) ou une chaîne Base64 brute. L'outil décode l'image, la prévisualise et vous permet de la télécharger en tant que fichier. Il détecte automatiquement le format, donc PNG, JPG, SVG, WebP et GIF fonctionnent tous. Le décodage complet s'effectue localement dans votre navigateur — aucune requête serveur n'est effectuée et votre chaîne Base64 n'est jamais transmise nulle part.

Utilisez le data URI Base64 comme valeur de l'attribut src d'une balise img : collez la chaîne encodée dans src="data:image/png;base64,…". Cliquez sur « Copier <img> » ci-dessus pour obtenir une balise image complète, prête à coller, sans requête de fichier séparée — idéale pour les emails, les pages monofichier et les icônes en ligne. Cela supprime un aller-retour HTTP supplémentaire et fonctionne même lorsque le fichier image d'origine n'est pas disponible.

Référencez le data URI dans url() — par exemple background-image: url("data:image/png;base64,…"). Cliquez sur « Copier CSS » ci-dessus pour obtenir la règle background-image complète. Intégrer de petits arrière-plans et icônes de cette façon supprime une requête HTTP et est courant pour les icônes de systèmes de design, les spinners de chargement et les éléments décoratifs rarement modifiés. Cela rend également les démos HTML monofichier entièrement autonomes.

Dans le navigateur, lisez le fichier avec l'API FileReader : const reader = new FileReader(); reader.onload = () => console.log(reader.result); reader.readAsDataURL(file). reader.result est l'URI complète data:image/...;base64. En React ou Next.js, appelez cela dans un useEffect ou un gestionnaire onChange sur un élément input. Ce convertisseur utilise exactement cette approche, entièrement côté client. Vous pouvez utiliser le résultat ici pour vérifier rapidement votre propre implémentation JavaScript sans configurer un serveur local.

Ouvrez le fichier en mode binaire et encodez-le : import base64; data = base64.b64encode(open('image.png', 'rb').read()).decode(); uri = f'data:image/png;base64,{data}'. Avec PIL/Pillow, vous pouvez d'abord sauvegarder une image dans un buffer BytesIO, puis encoder les octets du buffer en Base64. Utilisez cet outil en ligne pour vérifier que votre résultat Python correspond à ce que vous attendez avant de l'intégrer en production.

Un data URI intègre les octets d'une image directement dans votre HTML, CSS, JSON ou email sous forme de texte, de sorte que l'image se charge avec le document plutôt que comme une requête HTTP séparée. C'est idéal pour les petites icônes, les logos dans les emails HTML, les démonstrations monofichier et le stockage de petites images dans des bases de données ou des fichiers de configuration. Les développeurs l'utilisent également pour éviter les restrictions CORS lors du chargement d'images dans des opérations canvas. Les favicons sont souvent intégrés en tant que data URIs dans l'en-tête HTML pour éliminer un aller-retour réseau supplémentaire au premier chargement.

Généralement non. L'encodage Base64 augmente la taille des données d'environ 33 % par rapport au binaire d'origine, et les images intégrées ne peuvent pas être mises en cache séparément par le navigateur ni chargées en différé avec loading="lazy". Réservez le Base64 aux petites ressources rarement modifiées comme les favicons, les petits logos ou les sprites d'icônes de moins de ~10 Ko. Pour les grandes photos, les images hero ou les ressources réutilisées sur de nombreuses pages, conservez-les en fichiers image classiques servis avec des en-têtes HTTP de mise en cache appropriés.

Oui, complètement sûr. L'encodage et le décodage s'exécutent entièrement dans votre navigateur via les API FileReader et Canvas — vos images ne quittent jamais votre appareil et rien n'est envoyé à un serveur. C'est un avantage de confidentialité essentiel par rapport à des outils comme <strong>base64.guru</strong> et <strong>base64encoder.io</strong>, qui envoient vos images sur leurs serveurs pour traitement. Sur UtiloKit, les images privées, confidentielles ou non publiées restent sur votre machine tout au long de la conversion. Vous pouvez même vous déconnecter d'Internet après avoir chargé la page et l'outil continue de fonctionner.

Tout format que votre navigateur peut lire fonctionne pour l'encodage, notamment PNG, JPEG/JPG, SVG, WebP, GIF, AVIF, BMP et ICO. Le décodage prend en charge tous les types MIME data:image/* standard et prévisualise le résultat avant le téléchargement. Les fichiers SVG bénéficient d'un traitement spécial — leur Base64 peut également être intégré directement en CSS sans encodage via url('data:image/svg+xml,…') avec encodage URL, mais le Base64 est plus universel et fonctionne dans tous les navigateurs et clients email.

Oui. Utilisez le bouton « Copier Markdown » pour , ou « Copier <img> » pour les emails HTML. Notez que certains clients email (notamment Outlook et l'application mobile Gmail) suppriment ou bloquent les images Base64, testez donc avant d'envoyer à un large public. Pour les campagnes de newsletters, il est plus sûr d'héberger les images sur un CDN et de les lier. Pour les emails transactionnels à destinataire unique, le Base64 fonctionne de manière fiable dans la plupart des clients.

Base64.guru et base64encoder.io traitent tous deux vos images côté serveur — vos fichiers sont envoyés sur leur infrastructure. Le convertisseur Image en Base64 d'UtiloKit fonctionne à 100 % dans votre navigateur : sans envoi, sans serveur, sans données stockées nulle part. UtiloKit fournit également des snippets CSS, HTML et Markdown prêts à coller, prend en charge la conversion bidirectionnelle (encodage et décodage), et fonctionne hors ligne une fois la page chargée. Il est également entièrement gratuit, sans limite de taille de fichier ni de nombre de conversions.

Entièrement gratuit, sans inscription, sans filigrane et sans limite de taille de fichier ni de nombre d'images. Contrairement à browserling.com, qui plafonne les conversions d'images gratuites et exige un abonnement payant pour les fichiers dépassant une certaine taille, UtiloKit n'impose aucune restriction. Étant côté client, il n'y a aucun frais par image ou de bande passante — convertissez autant d'images que vous le souhaitez, dans la limite de la mémoire de votre navigateur.

Oui. L'outil est entièrement responsive et fonctionne sur tous les navigateurs mobiles, notamment Safari sur iPhone et Chrome sur Android. Vous pouvez appuyer pour sélectionner des images depuis votre pellicule ou l'application Fichiers, ou coller une URL pour charger une image distante. Le résultat est copié dans votre presse-papiers afin que vous puissiez le coller directement dans Notion, un éditeur de code ou une autre application. Aucun téléchargement d'application nécessaire — ouvrez simplement la page dans votre navigateur mobile et elle fonctionne exactement comme la version bureau.