Le Base64 : comment intégrer des images et des fichiers binaires directement dans du texte

Le Base64 est un système d’encodage qui permet de transformer n’importe quelles données binaires (images, sons, polices, PDF, etc.) en une chaîne de caractères composée uniquement des lettres A-Z, a-z, des chiffres 0-9 et des symboles + et /. Cet encodage a été créé à l’origine pour transmettre des pièces jointes dans les emails, car à l’époque les corps de message ne supportaient que du texte ASCII. Aujourd’hui, il reste très utile dès qu’on veut inclure des données binaires dans un format qui n’accepte que du texte pur.

Le principe est simple : on prend les données binaires par groupes de 3 octets (24 bits), on les divise en 4 groupes de 6 bits, puis chaque groupe de 6 bits est converti en un caractère parmi les 64 possibles de la table Base64. Si les derniers octets ne remplissent pas un groupe complet, on ajoute des caractères = en fin de chaîne pour indiquer le remplissage. Le résultat est environ 33 % plus volumineux que les données d’origine, mais totalement transportable dans du texte.

Dans un fichier XML, il est fréquent d’avoir besoin d’insérer une image ou un fichier binaire sans créer de référence externe. Grâce au Base64, on peut placer directement les données dans un nœud ou un attribut. Par exemple, un fichier SVG ou un document XML personnalisé peut contenir une balise <image> dont le contenu est la chaîne Base64 de l’image PNG ou JPEG. Cela rend le fichier XML totalement autonome : plus besoin de joindre l’image séparément.

En HTML, l’application la plus connue du Base64 est l’intégration directe d’images via les data URI . Au lieu d’écrire <img src="photo.jpg">, on peut écrire <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...">. Le navigateur décode immédiatement la chaîne et affiche l’image sans requête supplémentaire au serveur. C’est particulièrement pratique pour les petites icônes, les logos, ou pour créer des pages HTML uniques (par exemple des signatures email ou des fichiers exportés).

Voici un exemple concret : l’image ci-dessous est une petite icône de 64×64 pixels entièrement intégrée en Base64 dans ce fichier HTML, sans aucun fichier externe :

Le code utilisé dans la page HTML prend la forme suivante.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHe...==" alt="Icône intégrée en Base64">

En résumé, le Base64 reste un outil simple et efficace pour rendre des documents texte (XML, HTML, JSON, CSS, etc.) autonomes en intégrant directement des ressources binaires, au prix d’une légère augmentation de taille.

Convertisseur d'octets en Base64

Entrez des valeurs entre 0 et 255 (séparées par espaces, virgules ou retours à la ligne)