Convertir une image en Base64
Convertir une image en chaîne Base64 et obtenir l’URL de données, le code HTML et le code CSS prêts à coller, directement dans le navigateur.
Essayer un autre outil
Une sélection pour compléter cet outilCet outil convertit une image en chaîne Base64 et la présente sous trois formes prêtes à copier : l’URL de données (data:image/png;base64,…), une balise HTML img et une propriété CSS background-image. Une image intégrée ainsi s’affiche sans fichier séparé ni requête supplémentaire, ce qui est pratique pour une petite icône dans une page, un courriel HTML ou un fichier unique. L’image est lue par le navigateur et n’est jamais envoyée.
Comment utiliser cet outil
- 01Déposer l’imageGlissez une image (PNG, JPG, SVG, WebP, GIF…), jusqu’à 10 Mo.
- 02Choisir la formeURL de données, code HTML ou code CSS : chacun se copie en un clic.
- 03Coller dans le codeCollez le résultat dans votre page, votre feuille de style ou votre courriel HTML.
Dans quels cas est-ce utile ?
- Développement webIntégrer de petites images à une feuille de style ou un composant.
- Courriels HTMLInsérer un logo ou une icône sans lien externe.
- Fichiers autonomesCréer une page HTML unique qui contient toutes ses images.
Exemples
- Une petite icôneUne icône PNG de 2 Ko donne une chaîne d’environ 2 700 caractères, à placer directement dans le CSS.
- Un logo dans une signatureCertaines messageries affichent mieux un petit logo intégré qu’une image externe, qu’elles bloquent souvent par défaut.
- Une photo de 1 MoElle donne une chaîne d’environ 1,4 million de caractères : pour une image de cette taille, un fichier séparé reste préférable.
Conseils pour un meilleur résultat
- Réserver aux petites imagesLe Base64 alourdit le contenu d’environ un tiers et empêche la mise en cache séparée de l’image : gardez-le pour les images de quelques kilo-octets.
- Compresser d’abordCompressez ou réduisez l’image avant la conversion : la chaîne sera d’autant plus courte.
- SVGUn SVG peut aussi être intégré tel quel en texte ; le Base64 reste pratique pour un usage en CSS.
Qu’est-ce qu’une URL de données ?
Une URL de données contient le fichier lui-même : data:, le type de fichier (par exemple image/png), la mention base64 puis les données encodées. Le navigateur l’affiche comme une image ordinaire, sans la télécharger depuis un serveur.
Le poids du Base64
Le Base64 représente 3 octets par 4 caractères : la chaîne est donc environ un tiers plus longue que le fichier. La longueur affichée permet de juger si l’intégration reste raisonnable.
Confidentialité
Le fichier est lu par le navigateur avec l’API FileReader. Il n’est ni envoyé ni conservé.
Questions fréquentes
Comment convertir une image en Base64 ?
Déposez l’image : l’URL de données et les codes HTML et CSS s’affichent aussitôt.
Comment afficher une image Base64 en HTML ?
Placez l’URL de données dans l’attribut src d’une balise img ; l’outil fournit le code complet.
Le Base64 rend-il l’image plus lourde ?
Oui, d’environ un tiers. Réservez-le aux petites images.
Quels formats sont acceptés ?
Les formats d’image que le navigateur sait lire : PNG, JPG, GIF, WebP, SVG et d’autres.
Comment revenir du Base64 à un fichier image ?
Collez l’URL de données dans la barre d’adresse du navigateur, puis enregistrez l’image affichée.
Mon image est-elle envoyée ?
Non, elle est lue dans le navigateur.