De l'image vers le Base64

Comment ça marche

Le Base64 est un encodage qui écrit un fichier binaire avec de simples caractères de texte. Une image convertie dans ce format peut être incrustée directement dans votre fichier HTML ou CSS : plus besoin d'une requête séparée pour la charger. Le prix à payer est la taille : le Base64 grossit la donnée d'environ un tiers. La méthode convient donc aux petites icônes et aux motifs répétés, pas aux grandes photos. Sélectionnez vos images dans la zone de dépôt, choisissez le format de sortie — data URI prêt à l'emploi, ligne CSS background-image, balise HTML img, ou Base64 brut sans préfixe — puis cliquez sur le bouton : chaque image donne un fichier texte à télécharger, et la ligne de résultat indique la taille de la sortie. Plusieurs images passent en une seule fois, chacune produisant son propre fichier. Tout se passe dans votre navigateur : l'image n'est téléversée sur aucun serveur, ce qui rend l'outil utilisable même avec un logo interne ou une maquette confidentielle.

Cet outil est aussi connu sous le nom de image en base64, convertir image base64, image to base64, css base64.

Qu'est-ce que Base64 ?

Le Base64 est une méthode qui écrit une donnée binaire avec un alphabet sûr de 64 caractères : lettres, chiffres et deux signes de ponctuation seulement. Il a été conçu pour faire passer des fichiers par des canaux qui ne transportent que du texte — protocoles d'e-mail, fichiers HTML et CSS, corps JSON. Encoder n'est pas chiffrer : la donnée n'est pas cachée, seule sa forme change, et sa taille augmente d'environ un tiers au passage.

Qu'est-ce que Data URI ?

Le data URI est un type d'URL particulier qui commence par « data: » et transporte le fichier lui-même à l'intérieur de l'adresse : sur le modèle data:image/png;base64,…, on trouve d'abord le type du fichier, puis son contenu encodé en Base64. Quand le navigateur rencontre cette adresse, il décode l'image directement depuis l'adresse, sans toucher au réseau. Une petite icône peut ainsi être incrustée dans le HTML ou le CSS sans requête de fichier séparée.

Base64 et data URI, est-ce la même chose ?

Ce n'est pas la même chose, mais l'un contient l'autre : le Base64 est l'encodage lui-même, le data URI est l'enveloppe qui met ce code dans le moule d'adresse que le navigateur comprend. Le Base64 brut se donne à une API ou se pose dans un fichier de configuration ; le data URI se colle directement dans un attribut src ou dans un url() CSS. Cet outil produit les deux formes : choisissez le type de sortie selon l'endroit où vous allez l'utiliser.

Quand l'utiliser ?

Incruster une icône, un logo ou un motif de fond de quelques kilooctets réduit le nombre de requêtes de la page et accélère le premier affichage. C'est utile aussi dans les gabarits d'e-mail, car certains clients de messagerie bloquent les images externes.

À l'inverse, incruster de grandes images gonfle le fichier HTML et empêche le cache du navigateur de jouer son rôle : la donnée est retéléchargée à chaque affichage de la page.

• Adapté : petite icône, logo, motif, gabarit d'e-mail
• Inadapté : photo, grande image de couverture, contenu qui change souvent

La différence entre les formats de sortie

Le data URI est une adresse complète qui porte l'information de format en tête ; il se colle tel quel dans un src ou un url(). Les options CSS et HTML placent cette adresse dans une ligne prête à l'emploi.

Le Base64 brut, lui, n'est que la donnée encodée ; il sert quand vous l'envoyez à une API ou le posez dans un fichier de configuration.

Questions fréquentes

L'image en Base64 est-elle plus lourde ?

Oui, l'encodage grossit la donnée d'environ un tiers. C'est pourquoi il vaut mieux le réserver aux petites images.

Comment utiliser la sortie ?

Avec l'option CSS, collez la ligne produite dans votre feuille de style ; avec l'option HTML, collez la balise dans votre page. C'est tout.

Mon fichier est-il téléversé quelque part ?

Non. L'encodage se fait dans votre navigateur ; l'image n'est envoyée à aucun serveur.