Pour convertir une image en Base64, déposez un fichier PNG, JPG, WebP, GIF, SVG, AVIF, BMP ou ICO ci-dessus et cliquez sur « Convertir en Base64 ». Choisissez la sortie voulue (Data URI, Base64 brut, Balise <img> ou Fond CSS) puis copiez le résultat. Ce sont les octets d'origine qui sont encodés : la qualité ne change jamais.
Comment utiliser l'outil Image en Base64
- 1
Ajoutez une ou plusieurs images
Déposez des fichiers PNG, JPG, WebP, GIF, SVG, AVIF, BMP ou ICO dans la zone prévue, ou cliquez pour les sélectionner. Plusieurs fichiers peuvent être encodés à la fois.
- 2
Cliquez sur « Convertir en Base64 »
Les octets de chaque fichier sont lus dans votre navigateur et encodés en Base64 tels quels, sans recompresser l'image.
- 3
Choisissez la sortie
Basculez entre Data URI, Base64 brut, Balise <img> ou Fond CSS selon l'endroit où le code doit aller.
- 4
Copiez et collez
Utilisez le bouton de copie à côté de chaque résultat et vérifiez la taille affichée, pour savoir ce que la chaîne ajoutera à votre page ou à votre feuille de style.
Quand intégrer une image en Base64 dans du HTML ou du CSS ?
Le Base64 transforme des données binaires en texte. Placé dans un data URI, ce texte peut remplacer l'URL d'une image : l'image voyage alors à l'intérieur du fichier HTML, CSS ou JSON au lieu d'être téléchargée à part. C'est pratique pour intégrer une image en CSS (petites icônes, logos), pour les modèles d'e-mail HTML, les démos et prototypes en un seul fichier, ou les charges utiles d'API et fichiers de configuration qui n'acceptent que du texte.
Le prix à payer, c'est le poids. Une chaîne Base64 est environ 33 % plus lourde que le fichier binaire, et une image intégrée ne peut pas être mise en cache séparément par le navigateur : elle est retéléchargée à chaque fois avec le fichier qui la contient. Elle convient donc surtout aux petites images : une icône de 2 Ko devient environ 2,7 Ko de texte, ce qui est raisonnable, alors qu'une grande photo alourdirait la page et mérite d'être servie comme fichier normal.
Comme le convertisseur affiche la taille de chaque résultat, vous pouvez décider au cas par cas s'il vaut mieux intégrer l'image dans le HTML ou le CSS, ou la garder comme fichier ordinaire.
Data URI, Base64 brut, balise img ou CSS : quelle sortie copier ?
Un data URI en Base64 commence par data:, suivi du type de média du fichier comme image/png, puis de ;base64, et du texte encodé. Collez-le partout où une URL est attendue : l'attribut src d'une image, une valeur url() en CSS ou un champ JSON. Le Base64 brut est le texte encodé seul, sans ce préfixe, ce que demandent beaucoup d'API et de bibliothèques.
La sortie Balise <img> enveloppe le data URI dans un élément image HTML complet, à placer tel quel dans une page, et la sortie Fond CSS fournit une ligne background-image prête pour une feuille de style. Les quatre proviennent du même encodage : passer de l'une à l'autre ne retraite pas le fichier.
La conversion PNG en Base64 et JPG en Base64 fonctionne de la même façon. Encoder un SVG en Base64 est utile quand un outil refuse le code SVG en ligne ; le SVG encodé reste vectoriel et s'affiche net à toutes les tailles.
Encoder une image en Base64 sans la confier à un serveur
L'encodeur lit vos fichiers avec les API du navigateur et ne réencode jamais les pixels : la sortie Base64 se décode en un fichier identique à l'original. Rien n'est redimensionné, compressé ni converti au passage.
Rien n'est envoyé non plus. Les fichiers restent sur votre appareil, sont traités dans l'onglet et disparaissent quand vous le fermez. C'est important pour des logos, des maquettes non publiées ou des captures d'écran que vous préférez ne pas confier à un serveur tiers. L'outil est gratuit et sans inscription.
Conseils pour de meilleurs résultats
- N'intégrez que de petites images comme des icônes, logos et graphismes simples : le Base64 ajoute environ un tiers au poids.
- Compressez ou redimensionnez l'image avant de l'encoder, car la chaîne Base64 grossit avec chaque octet de l'original.
- Pour les icônes SVG, le Base64 évite les problèmes de guillemets quand le code casserait une chaîne CSS ou JSON.
- Prenez le Base64 brut quand une API demande seulement le contenu encodé, et le Data URI quand elle attend une URL.
- Les grandes images restent en général mieux servies comme fichiers liés, que le navigateur peut garder en cache d'une page à l'autre.
Questions fréquentes
Comment convertir une image en Base64 ?
Déposez l'image dans la zone ci-dessus et cliquez sur « Convertir en Base64 ». Choisissez ensuite Data URI, Base64 brut, Balise <img> ou Fond CSS, puis copiez le résultat. L'encodage se fait dans votre navigateur, et la sortie se décode exactement en fichier d'origine.
Qu'est-ce qu'un data URI en Base64 ?
C'est une chaîne qui contient toute l'image sous forme de texte : data:, le type de média comme image/png, ;base64, puis les octets encodés. Les navigateurs l'acceptent partout où une URL d'image est autorisée, l'image n'a donc plus besoin d'un fichier séparé.
La conversion en Base64 réduit-elle la qualité ?
Non. L'outil encode les octets d'origine du fichier sans rien recompresser : une fois décodée, l'image est strictement identique. Ce qui change, c'est le poids, puisque le texte Base64 est environ 33 % plus lourd que le fichier binaire.
Quels formats d'image puis-je convertir ?
Les fichiers PNG, JPG, WebP, GIF, SVG, AVIF, BMP et ICO sont pris en charge, et vous pouvez en ajouter plusieurs à la fois. Chaque résultat affiche sa taille, pour voir ce que son intégration ajouterait à votre code.
Faut-il utiliser des images Base64 sur mon site ?
Pour de petites icônes, des logos et des modèles d'e-mail, cela peut économiser une requête et tout garder dans un seul fichier. Pour des photos et des images plus grandes, c'est généralement contre-productif, car le texte est plus lourd et ne se met pas en cache séparément. Vérifiez la taille affichée avant d'intégrer.
Mes images sont-elles envoyées sur un serveur ?
Non. L'encodage Base64 s'exécute entièrement dans votre navigateur. Vos images ne sont jamais envoyées aux serveurs de Krawly et rien n'est stocké : vos logos et captures privés restent sur votre appareil. Fermer l'onglet efface les fichiers et les résultats.
Confidentiel par conception. Chaque convertisseur Krawly tourne dans votre navigateur grâce à JavaScript et WebAssembly. Vos fichiers ne sont ni envoyés, ni stockés, ni vus par personne : quand vous fermez l'onglet, ils disparaissent.