DevToolPal
FR

Convertisseur d'image en Base64

Convertissez des images PNG, JPG, GIF, WebP ou SVG en data URI Base64 pour CSS, HTML et Markdown, ou décodez du Base64 en image.

Traitement local, rien n'est envoyé

Options

Image

Déposez une image ici, choisissez un fichier ou collez une chaîne Base64 / data URI ci-dessous.

Base64

À quoi ça sert

Cet outil transforme une image en texte Base64 et en data URI prête à coller. Une data URI intègre l’image directement dans du HTML, du CSS, du Markdown, du JSON ou un e-mail : la page a besoin d’une requête HTTP de moins et l’extrait fonctionne sans héberger de fichier séparé. Il fonctionne aussi dans l’autre sens : collez du Base64 ou une data URI pour prévisualiser l’image et la télécharger.

Mode d’emploi

  1. Déposez une image sur la zone prévue, cliquez sur Choisir une image… ou sur Exemple pour charger un logo SVG.
  2. L’aperçu affiche l’image avec son type, sa taille de fichier, sa taille en Base64 et ses dimensions.
  3. Choisissez un format de Sortie :
    • Data URI : data:image/png;base64,…, pour les attributs src et le JSON.
    • Base64 seul : la chaîne brute, éventuellement coupée à 76 caractères pour un usage MIME ou de type PEM.
    • Arrière-plan CSS : une déclaration background-image: url("…"); complète.
    • HTML <img> : une balise image avec la data URI comme src.
    • Markdown : ![image](data:…).
  4. Copiez le résultat. Pour décoder, collez du Base64 ou une data URI dans le champ de saisie et cliquez sur Télécharger l’image.

Exemple

Un PNG de 2×1 pixels devient :

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAADUlEQVR4nGP4zwAE/wEHAAH/4iOeWQAAAABJRU5ErkJggg==

Utilisé en CSS :

.dot { background-image: url("data:image/png;base64,iVBORw0KGgo…"); }

Quand intégrer des images

L’intégration est utile pour de petites images souvent utilisées : icônes, petits arrière-plans, indicateurs de chargement et signatures d’e-mail. Elle convient mal aux photos et aux grands visuels : le Base64 ajoute environ un tiers à la taille, l’image ne peut pas être mise en cache séparément de la page ou de la feuille de style, et elle retarde l’analyse du reste du fichier. En règle générale, gardez les images intégrées sous quelques kilo-octets. Pour le SVG, une data URI encodée en pourcentage (data:image/svg+xml,…) est souvent plus légère que le Base64, et l’outil accepte les deux.

FAQ

› Mon image est-elle envoyée sur un serveur ?

Non. Le fichier est lu et encodé dans votre navigateur. Rien n'est envoyé à un serveur : vos captures d'écran privées et vos maquettes non publiées restent sur votre appareil.

› Quels formats d'image sont pris en charge ?

PNG, JPEG, GIF, WebP, AVIF, SVG, ICO et BMP. Le type est détecté à partir des octets du fichier, pas de son nom.

› Pourquoi le Base64 est-il plus lourd que le fichier ?

Base64 écrit chaque groupe de 3 octets sous forme de 4 caractères : le texte est donc environ 33 % plus volumineux que le fichier d'origine. N'intégrez que de petites images comme des icônes ; liez les plus grandes comme des fichiers normaux.

› Puis-je retransformer du Base64 en image ?

Oui. Collez une data URI ou une chaîne Base64 brute dans le champ de saisie. L'outil affiche un aperçu, détecte le type et vous permet de télécharger le fichier image.