Base64 en image

Voyez l’image cachée dans une chaîne Base64

Les images sont souvent intégrées sous forme de texte Base64 : dans le HTML et le CSS en URI data:image/png;base64,..., dans les réponses JSON d’API, dans le code source des e-mails et dans les bases de données. Pour un humain, ce sont des milliers de caractères aléatoires. Cet outil décode la chaîne et vous montre l’image réelle.

Collez seulement la partie Base64 (tout ce qui suit base64,), envoyez et l’image apparaît pour que vous la vérifiiez ou la téléchargiez.

C’est surtout un outil de développement et de débogage : confirmer qu’une API renvoie la bonne image, récupérer une image intégrée dans une feuille de style ou vérifier ce que contient un e-mail suspect.

Comment utiliser Base64 en image

1. Copiez la chaîne Base64 ou l’URI data:image/...;base64, complète.
2. Collez-la dans le champ de contenu.
3. Envoyez pour la décoder.
4. Regardez l’image, puis faites un clic droit ou un appui long pour l’enregistrer.

Exemples

Un PNG de 1×1 pixel dans la couleur pervenche de la marque

Entrée :

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mPonL4bAAOIAdw0rRDJAAAAAElFTkSuQmCC

Collez-le sans préfixe et un seul pixel #8997BB apparaît. Les données PNG commencent toujours par iVBOR, les JPEG par /9j/ et les GIF par R0lGOD, un moyen pratique de reconnaître ce que vous avez.

Usages courants

• Prévisualiser des images renvoyées par des API en Base64.
• Extraire des icônes ou des arrière-plans intégrés dans du CSS ou du HTML.
• Vérifier les images intégrées dans le code source d’e-mails.
• Récupérer des images stockées sous forme de texte dans des bases de données ou des exports JSON.
• Tester votre propre code de conversion d’image en Base64.
• Vérifier quelle image est intégrée dans un fichier CSS, un e-mail ou une réponse d’API sans l’enregistrer d’abord.

Conseils et points à connaître

• Si rien n’apparaît, la chaîne est peut-être tronquée, contient des retours à la ligne ou des espaces, ou n’est tout simplement pas une image.
• Le type MIME de l’URI de données (image/png, image/jpeg, image/svg+xml) indique au navigateur comment l’afficher.
• Pour le sens inverse, utilisez image en Base64. Pour du texte en Base64, utilisez le décodeur Base64.
• Allégez l’image enregistrée avec l’optimiseur d’images.

Cas particuliers et limites

• L’aperçu est marqué comme PNG. Les navigateurs affichent quand même correctement les données JPEG, GIF et WebP, mais les données SVG ne s’affichent pas.
• Le menu de téléchargement enregistre les mêmes données sous le nom que vous choisissez. Choisir JPG ne convertit pas un PNG ; seule l’extension change. Si vous devez changer de format, utilisez un éditeur d’images.
• Les chaînes très longues, de plusieurs mégaoctets de texte, peuvent ralentir la page.
• Les chaînes copiées depuis du JSON peuvent contenir des barres obliques échappées (\/). Remplacez-les par / avant de les coller.

Questions fréquentes

Qu’est-ce qu’une image en Base64 ?

C’est un fichier image encodé en texte avec Base64, pour pouvoir l’intégrer directement dans du HTML, du CSS, du JSON ou un e-mail.

Dois-je inclure le préfixe data:image ?

Non, laissez-le de côté. L’outil ajoute son propre préfixe data:image/png;base64, : si vous collez une URI de données complète, le préfixe est doublé et l’image n’apparaît pas.

Pourquoi mon image Base64 ne s’affiche-t-elle pas ?

La chaîne est peut-être incomplète, contient des caractères non valides ou encode autre chose qu’une image.

Comment enregistrer l’image décodée ?

Utilisez le menu de téléchargement au-dessus de l’aperçu, ou faites un clic droit (appui long sur mobile) sur l’image et enregistrez-la.

Outils associés

• Image en Base64: Convertissez une image en chaîne Base64.
• Décodeur Base64: Décodez du Base64 et retrouvez le texte d’origine.
• Encodeur Base64: Encodez n’importe quelle chaîne de texte en Base64.
• Optimiseur d’images: Compressez et optimisez vos images pour les alléger sans perdre en qualité.
• Vérificateur de type MIME: Obtenez les informations d’un fichier, comme son type MIME ou sa date de dernière modification.