Image en Base64 — Convertisseur Data URI et CSS
Convertisseur dans le navigateur entre images et Base64, data URI, extraits CSS et HTML
Traitement dans le navigateur · aucun envoi de fichier
Déposez une image à convertir en Base64
Une image, 5 Mo maximum. Le Base64 est plus volumineux que le fichier lui-même : il convient aux petites icônes et aux logos. L’image ne quitte pas votre navigateur.
De quoi s’agit-il
Cet outil réécrit les octets d’un fichier image sous forme de texte composé de lettres, de chiffres et de quelques symboles. Ce texte peut être placé directement dans du HTML ou du CSS comme data URI du type data:image/png;base64,.... Tout se passe dans votre navigateur, et le sens inverse, retransformer du Base64 en image, se trouve sur la même page.
Mode d’emploi
- Choisissez Image → Base64 et déposez ou sélectionnez une image : un fichier, 5 Mo maximum.
- Sous l’aperçu, consultez la taille d’origine, la taille du texte Base64, l’augmentation et le conseil de taille.
- Dans le champ voulu (Data URI, Chaîne Base64 seule, CSS background-image ou Balise HTML img), cliquez sur Copier. Les valeurs longues n’affichent que le début, mais tout est copié ; vous pouvez aussi télécharger un fichier texte.
- Pour le sens inverse, choisissez Base64 → Image et collez du Base64 ou une data URI. Un aperçu et le bouton Télécharger l’image apparaissent.
Fonctionnement
- Encodage : Base64 standard (RFC 4648), 3 octets pour 4 caractères, complété par
=jusqu’à un multiple de 4. Ce sont les octets du fichier qui sont convertis, pas une chaîne de texte, si bien que toute image se décode à l’identique. - Type MIME : lu dans les premiers octets du fichier (JPEG, PNG, GIF, WebP, SVG, etc.) et placé après
data:. Une extension erronée n’a aucune importance. - Balise HTML : width et height sont ajoutés quand la taille de l’image peut être lue.
- Conseil de taille : jusqu’à 10 Ko, l’intégration convient ; au-delà de 50 Ko, mieux vaut réfléchir ; au-delà de 500 Ko, mettez le fichier en ligne avec un lien.
- Décodage : le Base64 adapté aux URL (
-et_) et l’absence de remplissage=sont acceptés. Si le type déclaré diffère de l’image réelle, le type réel est utilisé et vous en êtes averti. Les data URI sans;base64ne sont pas lues.
Exemple
| Élément | Valeur |
|---|---|
| Original | icône de 2,1 Ko |
| Texte Base64 | environ 2,8 Ko (+33 %) |
| CSS | background-image: url("data:image/png;base64,..."); |
| HTML | <img src="data:image/png;base64,..." width="16" height="16" alt=""> |
Questions fréquentes
Mon image est-elle envoyée sur un serveur ?
Non. La lecture du fichier et l’encodage en Base64 se font dans votre navigateur, et le texte obtenu n’est enregistré nulle part.
Pourquoi le Base64 est-il plus volumineux ?
Le Base64 écrit 3 octets sous forme de 4 caractères, le texte est donc environ un tiers (33 %) plus lourd que le fichier. De plus, intégrée dans du HTML ou du CSS, l’image ne peut pas être mise en cache séparément et elle est retéléchargée à chaque chargement de page.
À partir de quelle taille vaut-il mieux éviter le Base64 ?
Il n’y a pas de règle fixe, mais on intègre généralement les petites icônes, logos et indicateurs de chargement d’environ 10 Ko, et on garde en fichier normal tout ce qui dépasse environ 50 Ko. L’outil classe les tailles en jusqu’à 10 Ko, jusqu’à 50 Ko, jusqu’à 500 Ko et au-delà, et vous indique votre catégorie. Les grandes images sont mieux en ligne, avec un lien.
À quoi servent les data URI ?
Dans le src d’une balise img, dans le url() d’un background-image CSS, dans une signature d’e-mail, un fichier Markdown ou une page HTML autonome dans laquelle l’image doit voyager avec le document. Aucun fichier image supplémentaire n’est nécessaire, mais certains clients de messagerie bloquent les images en data URI.
Le décodage indique que mes données ne sont pas valides.
Le préfixe data URI est facultatif, les espaces et retours à la ligne sont ignorés, et vous pouvez coller un extrait CSS ou HTML entier, la data URI qu’il contient est trouvée pour vous. Si cela échoue encore, le texte est sans doute tronqué ou contient des caractères parasites. Les données qui ne sont pas une image sont refusées.
Et les images de plus de 5 Mo ?
Plusieurs mégaoctets de Base64 ralentissent le navigateur et sont difficiles à coller où que ce soit, c’est pourquoi une seule image de 5 Mo maximum est acceptée. Réduisez d’abord les plus grandes avec le compresseur ou le redimensionneur d’images.
