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

Qu’est-ce qu’un décodeur d’image base64 ?

Un décodeur d’image base64 est un outil qui retransforme une chaîne de texte encodée en base64 en image. Le base64 est une façon d’écrire des données binaires, comme les octets d’un fichier image, avec seulement 64 caractères de texte simples (lettres, chiffres, +, /, et = pour le bourrage). Les navigateurs, les courriels et de nombreuses API stockent les images ainsi, afin qu’une image puisse circuler dans du texte brut plutôt que sous forme de fichier séparé. Le décodeur inverse ce processus : on colle la chaîne, et l’image d’origine apparaît.

Le format d’URL de données

Sur le web, une image base64 s’écrit généralement sous la forme d’une URL de données. Le schéma d’URL data: a été défini en 1998. Le modèle est le suivant :

Par exemple :

Chaque partie a un rôle :

• data: indique qu’il s’agit d’une URL de données, et non d’une adresse web ordinaire.
• image/png est le type MIME, qui indique au navigateur de quel type de fichier il s’agit.
• ;base64 indique que les données situées après la virgule sont encodées en base64. Cet élément est facultatif. Sans lui, les données sont du texte brut ou encodé en pourcentage.
• Tout ce qui suit la virgule est l’image encodée elle-même.

Fonctionnement du décodeur

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

1. L’outil vérifie si la chaîne commence par data:. Si c’est le cas, il lit le type MIME dans ce préfixe.
2. Il supprime les espaces, les tabulations et les sauts de ligne, car les longues chaînes base64 sont parfois réparties sur plusieurs lignes. Cela suit la règle de décodage base64 tolérant utilisée par les navigateurs, dont la première étape consiste à retirer tous les espaces blancs.
3. Il décode le texte base64 pour retrouver les octets bruts.
4. Il examine les premiers octets du résultat. Tous les formats d’image courants commencent par une séquence d’octets fixe, 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 utilise la table des signatures d’image de la norme WHATWG MIME Sniffing. Il compare ces signatures pour confirmer le type d’image et, au besoin, le corriger.

Une URL data: dont le type n’est pas image/... est rejetée comme n’étant pas une image. Une URL data:image/... sans ;base64 est transmise telle quelle au navigateur.

Si la chaîne n’a pas de préfixe data:, le décodeur la traite comme des données base64 brutes, les décode et 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 de format et ne se rabat sur aucun type par défaut.

Le SVG est traité différemment, car c’est un format texte (XML) et non binaire ; il n’a donc pas de signature d’octets fixe. Le décodeur vérifie plutôt si le texte décodé commence par une balise <svg, ou par une déclaration XML qui en contient une.

Formule de la taille d’une image base64

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

Les symboles ⌈ ⌉ signifient « arrondir à l’entier supérieur », car le base64 travaille toujours par groupes de 4 caractères et complète le dernier groupe incomplet avec des signes =.

Pour les gros fichiers, le résultat est environ un tiers plus grand que l’original, puisque 4 ÷ 3 ≈ 1,33. Les petits fichiers peuvent afficher une augmentation en pourcentage plus forte, car l’arrondi au groupe de 4 caractères supérieur pèse davantage lorsqu’il y a peu de données au départ.

Exemple détaillé

L’image PNG de l’exemple ci-dessus se décode en 85 octets de données d’image. Avec la formule :

La chaîne base64 fait bien 116 caractères, ce qui concorde. Cela représente une augmentation de 36 % par rapport aux 85 octets d’origine (116 ÷ 85 ≈ 1,36), un peu au-dessus des 33 % en raison de la très petite taille du fichier.

Formats d’image pris en charge

Le décodeur lit la signature d’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 courriel.
2. Collez-la dans la zone de saisie.
3. L’image se décode 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 », et l’image elle-même peut être enregistrée par un clic droit dans l’aperçu, puis en choisissant d’enregistrer l’image, car elle s’affiche comme un élément image ordinaire dans le navigateur.

Usages courants des images base64

• Intégration dans du HTML, du CSS ou du JavaScript : placer les données de l’image directement dans le code évite une requête de fichier distincte.
• Modèles de courriel : certains clients de messagerie bloquent par défaut les images liées de l’extérieur, mais une image base64 intégrée s’affiche quand même.
• Outils HTML en un seul fichier : une page entière, images comprises, peut être livrée sous la forme d’un seul fichier autonome.
• Réponses d’API : une image peut circuler dans une charge utile JSON, sans avoir besoin de son propre point d’accès.
• Arrière-plans et icônes CSS : de petites icônes sont parfois écrites directement dans une feuille de style sous forme d’URL de données.

Compromis des images base64

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

• Le texte encodé est environ un tiers plus grand 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 la contient l’est.
• 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 la perte de mise en cache, l’intégration en base64 convient surtout aux petites images, comme les icônes ou 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’image base64 ?

C’est un outil qui reconvertit une chaîne de texte encodée en base64 en une image affichable, 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. Il lira la chaîne, la décodera et affichera l’image obtenue.

Peut-on décoder une chaîne base64 sans le préfixe de l’URL de données ?

Oui. Le décodeur la traite comme des données base64 brutes, décode les octets et lit les premiers octets pour identifier le format d’après sa signature, par exemple PNG, JPEG, GIF, WebP, BMP ou ICO. Le SVG est identifié en cherchant une balise <svg dans le texte décodé. Si aucun de ces cas 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 ?

Les causes les plus fréquentes sont une chaîne coupée en cours de route ou des caractères superflus qui ne font pas partie de l’alphabet base64. La variante compatible avec les URL, qui utilise - et _ à la place de + et de /, est également rejetée. L’absence du bourrage = à la fin ne pose généralement pas de problème. Copier la chaîne entière, y compris son préfixe data:image/... s’il y en a un, règle généralement le problème.

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

Non. Le base64 est seulement une façon de représenter des octets sous forme de texte ; il ne cache rien. N’importe qui peut décoder une chaîne base64 en quelques secondes avec un outil gratuit, il ne doit donc jamais servir à protéger des images privées ou d’autres données.

De combien une chaîne base64 est-elle plus grande que l’image d’origine ?

D’environ un tiers pour les gros fichiers, puisque chaque groupe de 3 octets des données d’origine devient 4 caractères de texte. Une image de 100 Ko devient environ 133 Ko une fois encodée. Les petites images peuvent afficher une augmentation en pourcentage un peu plus élevée en raison de l’arrondi.

Historique

Le base64 est né du courriel, qui ne transportait autrefois que du texte brut. Une spécification de courrier à confidentialité renforcée de 1987 décrivait la transformation de chaque groupe de 3 octets en 4 caractères imprimables tirés d’un jeu de 64 caractères. Le schéma d’URL data: de 1998 a ensuite permis d’intégrer des images base64 directement dans les pages web. La définition actuelle du base64 est la RFC 4648 (2006).

Références

1. IETF. RFC 4648: The Base16, Base32, and Base64 Data Encodings. RFC 4648 — 3 octets deviennent 4 caractères ; bourrage =.
2. IETF. RFC 2397: The "data" URL scheme. RFC 2397 — syntaxe des URL de données ; ;base64 est facultatif ; publiée en 1998.
3. WHATWG. Infra Standard. Forgiving-base64 decode — suppression des espaces blancs ; gestion du bourrage.
4. WHATWG. MIME Sniffing Standard. Matching an image type pattern — signatures d’octets des images.
5. MDN Web Docs. Base64. Base64 glossary entry — la sortie encodée est environ un tiers plus grande.
6. IETF. RFC 989: Privacy Enhancement for Internet Electronic Mail, Part I. RFC 989 — encodage de courriel de 1987 transformant 3 octets en 4 caractères imprimables.