Image vers Base64

L'encodage Base64 transforme les octets d'une image en texte, ce qui permet de l'insérer directement dans un attribut HTML, une règle CSS ou un champ JSON plutôt que dans un fichier séparé. Déposez ici une image PNG, JPG, WebP, BMP, TIFF ou AVIF pour obtenir une data URI prête à coller, du type data:image/png;base64,iVBORw0KGgo.... Collez une data URI dans le second champ pour retrouver l'image d'origine. L'encodage et le décodage tournent dans votre navigateur grâce à du Rust compilé en WebAssembly : l'image n'est jamais envoyée sur un serveur.

Convertir une image en Base64 : mode d'emploi

1. Déposez une image dans la zone prévue, cliquez pour parcourir vos fichiers, ou sélectionnez plusieurs images à la fois.
2. L'outil lit la signature du fichier pour identifier son vrai format (il ne se fie pas à l'extension) et construit la data URI avec le bon type MIME : image/png, image/jpeg, image/webp, image/bmp, image/tiff ou image/avif.
3. La data URI complète s'affiche avec sa taille, à côté de la taille du fichier d'origine. Le bouton de copie la place dans le presse-papiers.
4. Avec plusieurs fichiers, la première image est affichée et le bouton Download all (.zip) enregistre un fichier .txt par image, chacun contenant sa data URI.

Les octets de l'image sont encodés tels quels : pas de redimensionnement, pas de recompression, aucune perte de qualité. Décoder la chaîne redonne un fichier identique à celui que vous avez déposé.

À quoi ressemble une data URI

Une data URI se compose de trois parties : le préfixe data:, le type MIME suivi de ;base64, puis, après la virgule, les octets encodés. Le Base64 n'utilise que 64 caractères sûrs (lettres majuscules et minuscules, chiffres, + et /, avec = pour le remplissage), ce qui permet de le coller partout où du texte est accepté. La chaîne produite ici tient sur une seule ligne, sans retour à la ligne, prête pour HTML, CSS ou JSON.

Exemples à copier

• Image HTML : <img src="data:image/png;base64,iVBORw0KGgo..." width="24" height="24" alt="Logo">. Gardez les attributs width, height et alt comme pour une image classique.
• Fond CSS : .icone { background-image: url("data:image/png;base64,iVBORw0KGgo..."); }. Pratique pour de petites icônes décoratives intégrées à la feuille de style.
• Champ JSON : {"avatar": "data:image/webp;base64,UklGR..."}. Courant pour les API qui reçoivent les images sous forme de texte. Certaines API attendent uniquement la partie après la virgule : supprimez alors le préfixe data:...;base64,.

Quand intégrer une image en Base64

• Petites icônes et logos : une icône de quelques kilo-octets intégrée au HTML ou au CSS évite une requête supplémentaire, et le surcoût reste faible.
• Fichiers autonomes : un rapport HTML, un prototype, une page de documentation ou une démo qui doit fonctionner hors ligne, sans dossier d'images à côté.
• API et configuration : charges JSON ou YAML qui n'acceptent que du texte, jeux de données de test, champ de base de données stockant l'image en chaîne.
• Modèles d'e-mail : possible, mais le support est inégal. Plusieurs grands clients de messagerie bloquent ou suppriment les images en data URI : testez dans les clients de vos destinataires. Une image hébergée ou une pièce jointe CID est généralement plus fiable.

Quand éviter le Base64

Une image en Base64 pèse environ 33 % de plus que le fichier binaire, car chaque groupe de 3 octets devient 4 caractères. L'outil affiche les deux tailles pour mesurer ce coût avant de l'adopter. Évitez d'intégrer des photos, des visuels de bannière ou toute image de plus de quelques dizaines de kilo-octets : ils alourdissent le HTML ou le CSS, retardent l'affichage de toute la page et ne peuvent pas être mis en cache séparément par le navigateur. Une image réutilisée sur plusieurs pages reste plus efficace en fichier classique, téléchargé une seule fois. Vérifiez aussi votre politique de sécurité (CSP) : si img-src n'autorise pas data:, les images intégrées ne s'afficheront pas.

Pour raccourcir la chaîne, compressez ou redimensionnez d'abord l'image avec le compresseur d'images, ou convertissez-la en WebP ou AVIF avec le convertisseur d'images.

Décoder du Base64 en image

Collez une data URI complète ou seulement la chaîne Base64 brute dans le champ de décodage, puis cliquez sur Decode to Image. Tout ce qui précède la première virgule est ignoré, les deux formes fonctionnent donc. L'outil identifie le format à partir des octets décodés, affiche un aperçu avec le format et la taille, et propose le téléchargement avec la bonne extension. Si la chaîne collée est répartie sur plusieurs lignes, supprimez d'abord les retours à la ligne. Si les données décodées ne sont pas une image PNG, JPG, WebP, BMP, TIFF ou AVIF, un message d'erreur s'affiche plutôt qu'un fichier corrompu.

Confidentialité : l'image reste sur votre appareil

Beaucoup de convertisseurs en ligne téléversent l'image pour l'encoder. Ici, tout se passe dans l'onglet de votre navigateur : aucune requête n'envoie l'image ni la chaîne collée vers un serveur, ce que vous pouvez vérifier dans l'onglet Réseau des outils de développement. C'est important pour des captures d'écran de tableaux de bord, des documents scannés, des maquettes non publiées ou des chaînes Base64 copiées depuis des API ou des journaux internes. Vos données restent sous votre contrôle, sans transfert vers un tiers, ce qui simplifie aussi la conformité RGPD. Attention enfin : comme les octets d'origine sont conservés, les métadonnées EXIF d'une photo (modèle d'appareil, position GPS) se retrouvent aussi dans la chaîne Base64. Supprimez-les d'abord avec la visionneuse et suppression EXIF avant de publier une photo intégrée.

Questions fréquentes

La conversion en Base64 réduit-elle la qualité de l'image ?

Non. Le Base64 est un encodage, pas une compression. Les octets sont recopiés tels quels et le décodage redonne exactement le même fichier.

Pourquoi la chaîne Base64 est-elle plus lourde que l'image ?

Le Base64 représente 3 octets avec 4 caractères, la sortie est donc environ un tiers plus volumineuse que l'original, plus le court préfixe data:.

Peut-on convertir un SVG ou un GIF en Base64 ici ?

L'outil accepte PNG, JPG, WebP, BMP, TIFF et AVIF. Pour un SVG, rastérisez-le avec le convertisseur SVG vers PNG, ou encodez directement le texte du SVG avec l'encodeur et décodeur Base64.

Comment obtenir le Base64 sans le préfixe data URI ?

Copiez la sortie et supprimez tout jusqu'à la virgule qui suit base64, virgule comprise. Il reste la chaîne Base64 brute.

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

Non. L'encodage et le décodage s'exécutent localement en WebAssembly. Rien n'est transmis, journalisé ni stocké.