Convertir une image en Base64

Transformez une image en URI de données Base64 pour du CSS, du HTML ou du JSON, ou collez une chaîne Base64 pour récupérer le fichier image.

Déposez vos fichiers ici

.jpg, .jpeg, .png, .gif, .webp, .svg, .bmp, .avif, .ico, .txt · jusqu’à 10 Mo

Choisissez des fichiers

Image vers Base64Base64 vers image

Plus de réglages

SortieCouper les lignes tous les 76 caractères

Comment convertir une image en Base64

1
Déposez une image ou collez une chaîne Base64
Ajoutez jusqu’à vingt images à encoder, ou changez de sens et collez une chaîne que vous avez déjà. Un fichier .txt contenant la chaîne fonctionne aussi.
2
Choisissez le sens de conversion
En encodage, vous obtenez une URI de données ou la charge utile Base64 brute. En décodage, vous obtenez un fichier image téléchargeable avec la bonne extension.
3
Copiez la chaîne ou téléchargez le fichier
Copiez le résultat directement dans votre feuille de style, ou enregistrez l’image décodée. Un lot d’images revient sous forme de fichier ZIP, avec un fichier texte par image et un JSON combiné.

Ce que fait vraiment Base64

Base64 ne compresse ni ne convertit quoi que ce soit. Il réécrit les mêmes octets en n’utilisant que 64 caractères qui survivent au copier-coller dans du texte. Trois octets deviennent quatre caractères, ce qui explique pourquoi le résultat est toujours environ un tiers plus volumineux que le fichier. L’objectif n’est pas la taille mais l’emplacement : une URI de données peut vivre directement dans une feuille de style, un attribut HTML ou un champ JSON, là où un lien vers un fichier séparé serait gênant ou impossible.

URI de données ou charge utile brute

Une URI de données est la chaîne complète qui commence par data:image/png;base64, et c’est ce que le navigateur attend dans un arrière-plan CSS ou un attribut src d’image. La charge utile brute est tout ce qui vient après la virgule, ce que demande en général un champ d’API ou une colonne de base de données, car le type y est enregistré séparément. Les deux viennent des mêmes octets, vous pouvez donc passer de l’un à l’autre sans ré-encoder quoi que ce soit.

Le type vient des octets

Le type MIME inscrit dans l’URI de données est lu à partir des douze premiers octets du fichier plutôt qu’à partir de son nom. Un PNG renommé en .jpg sort donc quand même en data:image/png. C’est important, car un navigateur refuse d’afficher une URI de données dont le type déclaré ne correspond pas au contenu. Dans ce cas, c’est la page qui semble cassée, pas le fichier. SVG fait exception, car c’est du texte : il est reconnu par sa balise d’ouverture plutôt que par une signature binaire.

Décoder pour revenir à un fichier

Collez n’importe quoi : une URI de données complète, une charge utile seule ou une chaîne avec des retours à la ligne. Les espaces sont supprimés, l’alphabet est vérifié avant le décodage pour qu’un collage tronqué échoue immédiatement au lieu de produire un fichier corrompu, et les octets obtenus sont comparés à la même table de signatures pour choisir l’extension. Si les octets ne correspondent à aucun format connu, la liste des formats s’ouvre pour que vous indiquiez ce que cela doit être.

Rien n’est envoyé nulle part

L’encodage utilise le FileReader intégré au navigateur et le décodage utilise sa fonction atob. Il n’y a ni bibliothèque externe, ni envoi, ni serveur. Tout ce que vous collez dans la zone reste dans l’onglet, ce qui est important quand la chaîne vient d’un document privé plutôt que d’un simple logo.

Questions fréquentes

Pourquoi convertir une image en Base64 ?

Pour l’intégrer directement au lieu d’y faire un lien. Une petite icône intégrée dans du CSS économise une requête HTTP, une image incluse dans une charge JSON peut passer par une API qui ne transporte que du texte, et un modèle de courriel peut embarquer ses propres visuels sans que des références externes soient bloquées.

De combien la taille augmente-t-elle ?

D’environ 33 à 37 %. Base64 consomme quatre caractères pour trois octets, plus un court préfixe pour l’URI de données. Une photo de 100 Ko devient une chaîne d’environ 133 Ko, ce qui rend l’intégration intéressante pour les icônes et rarement pour les photographies.

Quelle différence entre une URI de données et du Base64 brut ?

Une URI de données est l’ensemble data:image/png;base64, suivi de la charge utile, et les navigateurs peuvent l’utiliser directement comme source d’image. Du Base64 brut, c’est uniquement la charge utile, sans information de type, ce que la plupart des APIs et champs de base de données attendent.

Y a-t-il une limite de longueur pour ces chaînes dans les navigateurs ?

Les navigateurs modernes gèrent des URI de données de plusieurs mégaoctets dans le CSS et le HTML, mais les éditeurs, terminaux et outils de diff deviennent inutilisables bien avant. Cet outil accepte des fichiers jusqu’à 10 Mo, ce qui produit une chaîne d’environ 13,3 Mo, et décode des chaînes jusqu’à 14 Mo de contenu.

Comment décoder une chaîne sans préfixe data: ?

Collez-la et laissez le type d’image sur automatique. Les octets décodés sont comparés à la même table de signatures utilisée pour l’encodage, de sorte qu’un PNG est reconnu par son en-tête 89 50 4E 47 quel que soit le préfixe. Si la détection échoue, choisissez vous-même le type dans la liste.

Est-il prudent de coller ici le Base64 de quelqu’un d’autre ?

La chaîne est décodée en octets et affichée comme un aperçu d’image dans votre onglet. Elle n’est jamais envoyée, jamais exécutée et jamais stockée. Le décodage n’est que du calcul, mais les octets obtenus ne sont pas plus fiables que leur source. Traitez donc un résultat inattendu avec la même prudence que tout fichier téléchargé.

Pourquoi le décodage échoue-t-il parfois ?

Presque toujours parce que la chaîne est incomplète. Un collage interrompu, une ligne perdue en copiant depuis un terminal ou une variante compatible URL qui utilise tiret et soulignement au lieu de plus et slash feront tous échouer la vérification de l’alphabet. Re-copier la chaîne depuis la source d’origine règle généralement le problème.