Convertisseur et décodeur d'image en Base64

Le Base64 est une façon d'écrire des données binaires, comme un fichier image, avec seulement 64 caractères texte sûrs : lettres, chiffres, plus et barre oblique. Tous les trois octets du fichier deviennent quatre caractères de texte. Le contenu binaire peut ainsi transiter par des systèmes qui ne gèrent que du texte, comme JSON, les attributs HTML, les fichiers CSS et certains formats d'e-mail.

Une data URI enveloppe ce texte d'un court en-tête qui indique au navigateur ce qu'il contient, par exemple data:image/png;base64, suivi du fichier encodé. Les navigateurs l'affichent exactement comme un lien d'image normal.

Quand intégrer en ligne

Entre Base64 et fichier image lié, le compromis porte sur le poids et le cache. Le texte Base64 est environ un tiers plus lourd que le fichier d'origine et ne peut pas être mis en cache séparément par le navigateur. Un fichier normal est téléchargé une fois puis réutilisé. Le Base64 brille pour les très petites images, quand économiser une requête compte plus que quelques centaines d'octets.

Ajoutez une image dans l'onglet Image en Base64. L'outil la lit localement, détecte son vrai type à partir des octets et affiche la taille d'origine, la taille encodée et l'augmentation. En dessous, cinq extraits prêts à l'emploi avec boutons de copie. Les chaînes très longues sont raccourcies dans les champs pour la rapidité, mais le bouton de copie copie toujours le texte complet.

Vous pouvez aussi télécharger la data URI en fichier texte, pratique pour les chaînes très longues ou pour les envoyer à un collègue.

Formats courants

Le PNG en Base64 est le cas le plus fréquent, car icônes et logos sont généralement des PNG avec transparence. Le JPG en Base64 fonctionne de la même façon et convient aux petites photos comme les avatars. Les fichiers SVG sont aussi encodés ; pour le SVG, un texte simplement encodé en URL peut être encore plus léger, mais le Base64 reste l'option la plus compatible.

En HTML

Pour utiliser une image Base64 en HTML, collez l'extrait img dans votre page. Il inclut déjà un texte alternatif basé sur le nom du fichier ainsi que la largeur et la hauteur, ce qui évite les décalages de mise en page. Modifiez le texte alternatif pour qu'il décrive l'image aux lecteurs d'écran.

En CSS

Pour une image de fond Base64 en CSS, collez la règle background-image dans votre feuille de style. Cela convient aux petits motifs et icônes. Gardez les grandes photos en fichiers, car les intégrer ralentit le téléchargement et l'analyse de toute la feuille de style.

Markdown et JSON

L'extrait Markdown fonctionne dans de nombreux éditeurs et outils de documentation qui acceptent les data URI. Pour les API et le JSON, utilisez l'extrait Base64 seul, sans l'en-tête data:, sauf si la documentation de l'API demande une data URI complète.

Passez à l'onglet Base64 en image et collez une chaîne Base64 brute ou une data URI complète. L'outil supprime espaces et sauts de ligne, accepte les caractères compatibles URL, ajoute le remplissage manquant, décode le texte et vérifie les premiers octets pour reconnaître le vrai type d'image. Vous voyez alors l'image, ses dimensions et son poids, et un bouton de téléchargement avec la bonne extension.

Si le texte n'est pas du Base64 valide, est tronqué ou contient un autre type de fichier, un message clair explique le problème. Le décodeur est donc utile pour déboguer des réponses d'API, des champs de base de données et le code source d'e-mails.

En règle générale, intégrez les images de moins de quelques kilo-octets et gardez tout le reste en fichiers. L'outil vous avertit quand une image dépasse 100 Ko, car l'intégrer alourdirait votre HTML ou CSS. Pour les images plus grandes, compressez-les d'abord avec notre outil de compression ou convertissez-les en WebP.

Le Base64 est un encodage, pas un chiffrement. N'importe qui peut le décoder : ne le considérez jamais comme un moyen de cacher ou protéger une image.

Confidentialité

L'encodage et le décodage ont lieu entièrement dans votre navigateur avec des fonctions intégrées. Rien n'est importé ni stocké, et l'outil est gratuit, illimité et n'utilise pas de crédits EnhancerPro.

Pourquoi ma chaîne est-elle si longue ?

Trois octets deviennent quatre caractères : une image de 30 Ko donne environ 40 000 caractères. C'est normal. Si c'est trop long pour votre usage, réduisez les dimensions de l'image ou compressez-la avant l'encodage.

Sauts de ligne et e-mail

Certains systèmes d'e-mail coupent le Base64 en lignes de 76 caractères. Le décodeur ignore automatiquement ces sauts de ligne : vous pouvez coller directement le texte coupé.

Favicons et icônes

Intégrer un favicon en data URI fonctionne dans la plupart des navigateurs, mais un vrai favicon.ico et des fichiers PNG sont plus fiables pour les favoris et les écrans d'accueil. Notre générateur de favicon crée le jeu complet.

Un logo dans une signature d'e-mail

Certains clients e-mail bloquent les images liées jusqu'à ce que le lecteur les autorise, mais la prise en charge des data URI intégrées varie aussi. Pour les signatures, un petit PNG lié hébergé sur votre site est généralement le choix le plus fiable, et le Base64 une solution de repli pour les systèmes qui exigent tout dans un seul bloc HTML. Gardez le logo sous quelques kilo-octets dans tous les cas.

Images d'attente et de chargement

Une version minuscule et floutée d'une photo encodée en Base64 peut s'afficher instantanément pendant le chargement de l'image complète. Réduisez l'image à environ 20 pixels de large, encodez-la et utilisez-la comme fond derrière la vraie image. Elle n'ajoute que quelques centaines d'octets à la page.

Stocker des images en JSON

Certaines API et fichiers de configuration acceptent les images sous forme de chaînes Base64. Utilisez l'extrait Base64 seul et vérifiez les limites de taille dans la documentation. Quand vous recevez de telles données, collez-les dans le décodeur pour confirmer le type et les dimensions de l'image avant de l'enregistrer.

Tests et prototypes

Quand vous partagez un prototype rapide en un seul fichier HTML, intégrer les petites images garantit que rien ne casse si le fichier est déplacé ou envoyé par e-mail. Pour tout ce qui part en production, remplacez les grandes images intégrées par des fichiers normaux pour que les navigateurs puissent les mettre en cache.

Vérifier ce que contient une chaîne

Un texte Base64 ne dit rien de son contenu. Les premiers caractères donnent souvent un indice, comme iVBOR pour le PNG ou /9j/ pour le JPEG, mais le décodeur est le moyen fiable de savoir. Il lit la vraie signature du fichier au lieu de se fier au type indiqué dans la data URI.

Liste de vérification des performances

Avant d'intégrer une image, posez-vous trois questions. Est-elle petite, idéalement moins de quelques kilo-octets ? N'est-elle utilisée que sur une page, si bien que le cache aiderait peu ? Une requête supplémentaire ralentirait-elle sensiblement le premier affichage ? Si la réponse est oui aux trois, le Base64 convient. Sinon, servez un fichier normal dans un format moderne comme le WebP, définissez sa largeur et sa hauteur et laissez le navigateur le mettre en cache pour chaque page qui l'utilise. Votre HTML reste léger et vos pages rapides.

Aller-retour

Encoder puis décoder une image redonne exactement les mêmes octets : le Base64 est sans perte. Le décodeur est donc un moyen rapide de vérifier qu'une chaîne copiée est complète. Si l'image décodée est tronquée ou ne s'affiche pas, une partie du texte s'est perdue lors de la copie, souvent à la fin où se trouvent les caractères de remplissage. Recopiez-la depuis la source et décodez de nouveau. L'outil confirmera quand elle est entière.