Convertisseur image en Base64

Base64 écrit des données binaires, par exemple un fichier JPG ou PNG, sous forme de chaîne de caractères de texte ordinaires. Chaque groupe de trois octets du fichier devient quatre caractères d’un alphabet de 64 : lettres majuscules et minuscules, chiffres, signe plus et barre oblique[1]. Une image écrite ainsi va directement dans le code d’une page, une feuille de style ou un champ JSON, sans fichier séparé sur le serveur.

La chaîne seule ne dit pas encore qu’il s’agit d’une image. C’est le rôle de l’URL data:, décrite dans le RFC 2397, qui place le type de fichier devant la chaîne, par exemple data:image/png;base64,. La chaîne proprement dite commence après la virgule[2]. La même URL fonctionne comme image en Markdown sous la forme ![description](data:image/png;base64,…). L’alphabet et le chemin inverse, de la chaîne au fichier, sont décrits dans le convertisseur Base64 en image.

Glissez un fichier sur le champ Image, ou cliquez dessus et choisissez une image. Le champ Base64 affiche aussitôt le résultat, sous la forme réglée dans la liste Format du résultat. Par défaut, c’est URL data:, la chaîne précédée du type de fichier, par exemple data:image/jpeg;base64,.

Vous pouvez changer la liste à tout moment sans ajouter l’image une seconde fois. Balise <img> pour HTML donne un élément prêt avec l’URL dans l’attribut src, Arrière-plan CSS (background-image) une déclaration pour une règle de feuille de style, et Chaîne Base64 seule ne garde que les caractères après la virgule. Le bouton Copier copie le résultat sous la forme choisie, et Télécharger l’enregistre en fichier texte, par exemple logo-base64.txt. Tout effacer vide le champ du résultat.

L’outil encode un fichier à la fois et prend le premier de plusieurs fichiers déposés. Un fichier qui n’est pas une image arrête l’encodage avec le message Seuls les fichiers image sont acceptés.

Le texte demande quatre caractères pour trois octets, donc la chaîne est plus longue que le fichier d’environ un tiers[1]. Vous pouvez calculer la longueur vous-même : divisez les octets par trois, arrondissez au supérieur et multipliez par quatre. Une icône de site de 2 678 octets donne 3 572 caractères, et une photo d’appareil de 1 405 512 octets en donne 1 874 016.

Une image intégrée fait partie du fichier qui la contient. Le navigateur télécharge l’image d’une feuille de style avec cette feuille, donc à chaque modification de la feuille il la télécharge de nouveau. La même image collée dans cinq pages HTML voyage avec chacune d’elles séparément. C’est pourquoi Base64 convient aux icônes et aux petits graphismes, tandis que la photo d’un article reste un fichier ordinaire.

La longueur est limitée par le navigateur : Chromium et Firefox acceptent des URL data: jusqu’à 512 Mo, et Safari jusqu’à 2048 Mo. Firefox a déplacé cette limite deux fois, de 256 Ko à 32 Mo dans la version 97 et à 512 Mo dans la version 136[3]. Les navigateurs bloquent en revanche l’ouverture d’URL data: dans la fenêtre principale, parce que des pages d’hameçonnage étaient diffusées de cette façon[3]. Une chaîne collée dans la barre d’adresse n’affichera donc pas l’image, alors que la même chaîne dans un attribut src l’affichera.

Gmail n’affiche pas les images écrites en URL data:, ni dans le navigateur, ni dans les applications iOS et Android. caniemail.com l’a vérifié en février 2020, puis de nouveau pour la version navigateur en mai 2024, avec le même résultat[4]. Outlook pour Windows, des versions 2007 à 2016, se comporte de la même manière.

Placez donc le logo d’une signature ou d’une newsletter sur un serveur, en fichier ordinaire, et utilisez son adresse. Le générateur de signature e-mail fonctionne ainsi : dans le champ Avatar / logo (URL de l’image), vous saisissez l’adresse d’une image, pas une chaîne Base64.

Chez les fournisseurs français, les résultats diffèrent. Le webmail d’Orange n’affichait pas ces images en février 2020, mais les affiche depuis le test de mars 2021, alors que les webmails de SFR et de La Poste remplacent l’attribut src par nosrc[4]. Free figure dans la base de caniemail sans résultat pour les images Base64 : avant un envoi vers des adresses Free, faites un test sur votre propre compte.