Décodeur Base64 d'images | Décoder et prévisualiser des images en ligne

Qu’est-ce qu’un décodeur d’images Base64 ?

Un décodeur d’images Base64 est un outil qui transforme une chaîne de texte encodée en Base64 en image. Base64 est une méthode permettant d’écrire des données binaires, comme les octets d’un fichier image, avec seulement 64 caractères de texte courants (lettres, chiffres, +, / et = pour le remplissage). Les navigateurs, les e-mails et de nombreuses API stockent les images de cette manière afin qu’une image puisse être transportée dans du texte brut plutôt que sous la forme d’un fichier séparé. Le décodeur inverse ce processus : il suffit de coller la chaîne pour que l’image d’origine apparaisse.

Le format d’URL de données

Sur le Web, une image Base64 est généralement écrite sous la forme d’une URL de données. Le modèle est le suivant :

Par exemple :

Chaque partie a une fonction :

• data: indique qu’il s’agit d’une URL de données et non d’une adresse Web normale.
• image/png est le type MIME, qui indique au navigateur le type de fichier.
• ;base64 précise que les données qui suivent la virgule sont encodées en Base64.
• Tout ce qui suit la virgule constitue l’image encodée.

Fonctionnement du décodeur

Le décodage se déroule en quatre étapes.

1. L’outil vérifie que la chaîne commence par data:. Une URL de données qui indique un type MIME autre qu’une image, comme data:text/plain, est immédiatement rejetée, car elle ne peut pas être affichée sous forme d’image.
2. Il retire les espaces, les tabulations et les sauts de ligne, car les longues chaînes Base64 sont parfois réparties sur plusieurs lignes. Une charge utile qui utilise le codage en pourcentage au lieu de Base64, également autorisé par la RFC 2397, est transmise sans modification.
3. Il décode le texte Base64 pour le reconvertir en octets bruts.
4. Il examine les premiers octets du résultat. Chaque format d’image courant commence par une séquence fixe d’octets, appelée signature ou « nombre magique ». Les fichiers PNG commencent par 89 50 4E 47, les fichiers JPEG par FF D8 FF, et ainsi de suite. Le décodeur compare ces signatures et attribue à l’image le type qu’elles identifient.

Les octets priment sur l’étiquette. Si une URL de données indique data:image/png alors que les octets commencent par FF D8 FF, le décodeur reconstruit l’URL sous la forme data:image/jpeg. Ainsi, la chaîne proposée par le bouton « Copier l’URL de l’image » ne décrit jamais incorrectement son propre contenu.

Si la chaîne ne possède pas le préfixe data:, le décodeur la traite comme des données Base64 brutes, les décode, puis lit la signature de la même manière. Si les octets ne correspondent à aucune signature d’image connue et ne ressemblent pas à du texte SVG, le décodeur indique que la chaîne ne semble pas être une image. Il ne devine pas le format et n’utilise pas de type par défaut.

Le SVG est traité différemment, car il s’agit d’un format texte (XML) et non d’un format binaire ; il ne possède donc pas de signature fixe d’octets. Le décodeur vérifie dans les 1 024 premiers octets du texte décodé la présence d’une balise <svg, d’une déclaration XML telle que <?xml version="1.0"?> suivie de cette balise, ou d’une déclaration de type de document SVG suivie de cette balise. Une marque d’ordre des octets au tout début, que certains éditeurs ajoutent aux fichiers UTF-8, est ignorée. Comme le SVG ne peut pas être identifié à partir d’une signature d’octets, une URL de données qui déclare image/svg+xml conserve le type déclaré.

Formule de calcul de la taille d’une image Base64

Base64 transforme chaque groupe de 3 octets de données binaires en 4 caractères de texte. La formule de calcul de la longueur encodée est la suivante :

Les symboles ⌈ ⌉ signifient « arrondir au nombre entier supérieur », car Base64 fonctionne toujours par groupes de 4 caractères et complète un groupe restant avec des signes =.

Pour les fichiers volumineux, cela correspond à une augmentation d’environ 33 % de la taille, puisque 4 ÷ 3 ≈ 1,33. Les petits fichiers peuvent afficher une augmentation proportionnelle plus importante, car l’arrondi au groupe suivant de 4 caractères a davantage d’incidence lorsque les données sont peu nombreuses.

Exemple détaillé

L’exemple PNG ci-dessus correspond, après décodage, à 85 octets de données d’image. En appliquant la formule :

La chaîne Base64 comporte bien 116 caractères, ce qui correspond au calcul. Il s’agit d’une augmentation de 36 % par rapport aux 85 octets d’origine (116 ÷ 85 ≈ 1,36), légèrement supérieure aux 33 % habituels, car le fichier est très petit.

Formats d’image pris en charge

Le décodeur lit la signature des octets des données décodées pour identifier le format. Il reconnaît les types suivants :

Comment décoder une image Base64

1. Copiez la chaîne Base64, avec ou sans son préfixe data:image/..., depuis du HTML, du CSS, une réponse d’API ou un e-mail.
2. Collez-la dans le champ de saisie.
3. L’image est décodée automatiquement un instant après l’arrêt de la saisie, ou en appuyant sur le bouton de décodage.
4. L’image décodée apparaît dans la zone d’aperçu. Son URL de données peut être copiée avec le bouton « Copier l’URL de l’image ». L’image elle-même peut être enregistrée en faisant un clic droit dessus dans l’aperçu, puis en choisissant l’option d’enregistrement de l’image, puisqu’elle est affichée comme un élément image normal dans le navigateur.

Utilisations courantes des images Base64

• Intégration dans du HTML, du CSS ou du JavaScript : placer directement les données de l’image dans le code évite une requête distincte pour un fichier.
• Modèles d’e-mails : certains clients de messagerie bloquent par défaut les images liées à des ressources externes, tandis qu’une image Base64 intégrée continue de s’afficher.
• Outils HTML à fichier unique : une page entière, y compris ses images, peut être distribuée dans un seul fichier autonome.
• Réponses d’API : une image peut être transportée dans une charge utile JSON au lieu de nécessiter son propre point d’accès.
• Arrière-plans et icônes CSS : les petites icônes sont parfois écrites directement dans une feuille de style sous forme d’URL de données.

Compromis liés aux images Base64

L’encodage Base64 est pratique, mais il a un coût :

• Le texte encodé est environ un tiers plus volumineux que le fichier d’origine.
• Les navigateurs ne peuvent pas mettre en cache une image intégrée comme ils le font pour un fichier lié. Elle est donc téléchargée de nouveau chaque fois que la page ou la feuille de style qui l’entoure est téléchargée.
• Le navigateur doit décoder le texte Base64 avant de pouvoir afficher l’image, ce qui demande un peu de traitement supplémentaire.
• En raison de l’augmentation de taille et de l’absence de mise en cache, l’intégration Base64 convient aux petites images, comme les icônes et les logos simples. Les photos plus grandes sont généralement mieux servies sous forme de fichiers image ordinaires.

Foire aux questions

Qu’est-ce qu’un décodeur d’images Base64 ?

Il s’agit d’un outil qui reconvertit une chaîne de texte encodée en Base64 en image consultable, par exemple un fichier PNG, JPEG, GIF, WebP, BMP ou SVG.

Comment décoder une image Base64 ?

Collez la chaîne Base64, avec ou sans préfixe data:image/..., dans le décodeur. Celui-ci lit la chaîne, la décode et affiche l’image obtenue.

Une chaîne Base64 peut-elle être décodée sans le préfixe d’URL de données ?

Oui. Le décodeur la traite comme des données Base64 brutes, décode les octets et examine les premiers octets pour identifier le format à partir de sa signature, par exemple PNG, JPEG, GIF, WebP, BMP ou ICO. Le SVG est identifié en recherchant une balise <svg dans le texte décodé. Si aucun de ces éléments ne correspond, le décodeur indique que la chaîne ne semble pas être une image au lieu de deviner un format.

Pourquoi mon image Base64 ne se décode-t-elle pas ?

Trois causes couvrent la plupart des cas. La chaîne peut contenir des caractères qui ne font pas partie de l’alphabet Base64 standard, à savoir A–Z, a–z, 0–9, +, / et = ; la variante base64url utilisée dans certains jetons Web emploie à la place - et _, et n’est pas acceptée. La chaîne peut avoir été tronquée, ce qui laisse une longueur supérieure d’une unité à un multiple de quatre ; aucune chaîne Base64 valide ne possède cette longueur. Enfin, les octets peuvent simplement ne correspondre à aucun des formats d’image pris en charge. L’absence de remplissage = n’est pas un problème en soi, et les espaces ou les sauts de ligne sont supprimés avant le décodage.

L’encodage Base64 est-il une forme de sécurité ou de chiffrement ?

Non. Base64 est uniquement une méthode de représentation des octets sous forme de texte ; elle ne dissimule rien. N’importe qui peut décoder une chaîne Base64 en quelques secondes avec un outil gratuit. Elle ne doit donc jamais servir à protéger des images privées ou d’autres données.

Quelle est l’augmentation de taille d’une chaîne Base64 par rapport à l’image d’origine ?

Pour les fichiers volumineux, la taille augmente d’environ un tiers, puisque chaque groupe de 3 octets des données d’origine devient 4 caractères de texte. Une image de 100 KB devient environ 133 KB après encodage. Les petites images peuvent présenter une augmentation proportionnelle légèrement supérieure en raison des arrondis.

Historique

Base64 est issu de schémas d’encodage élaborés dans les années 1970 et 1980 pour transmettre des données binaires par l’intermédiaire de systèmes de messagerie qui ne géraient que le texte brut. Son usage pour les e-mails a été officialisé par la RFC 989 (1987), puis par la RFC 1421. L’intégration d’images dans les pages Web est devenue possible après la définition du schéma d’URL data: dans la RFC 2397 (1998). Cette pratique s’est répandue au milieu des années 2000, lorsque les développeurs ont cherché à réduire le nombre de requêtes HTTP distinctes, en particulier sur les connexions mobiles lentes.

Références

1. RFC 4648 : encodages de données Base16, Base32 et Base64
2. RFC 2397 : schéma d’URL « data »
3. MDN Web Docs : URL de données
4. Norme WHATWG de détection des types MIME