Convertir une image en base64 transforme un fichier binaire en une longue chaîne ASCII que vous pouvez coller directement dans du HTML, CSS, JSON ou une colonne de base de données. Cette chaîne devient une URI de données comme data:image/png;base64,iVBORw0KGgo..., et le navigateur l'affiche comme s'il chargeait un vrai fichier image. L'inconvénient que la plupart des convertisseurs ne mentionnent jamais : le base64 augmente la taille de chaque image d'environ 33 %, donc l'encapsulation est un outil à utiliser dans des cas spécifiques, pas par défaut.
Ce guide montre la syntaxe exacte, le préfixe MIME correct pour chaque format, comment encoder une image dans le navigateur et dans le code, et les calculs de mise en cache qui déterminent si l'encapsulation d'une image donnée est une bonne idée ou une erreur.
Qu'est-ce qu'un URI de données d'image Base64 ?#
Un URI de données permet d'intégrer le contenu d'un fichier directement dans un document, sans lien vers un fichier externe. Pour les images, le format est fixe et prévisible :
data:[<type MIME>][;base64],<données encodées>
Un exemple réel pour un PNG (tronqué) ressemble à ceci :
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJ...
Trois parties sont importantes :
data:indique au navigateur qu'il s'agit de données en ligne, non d'une URL à récupérer.image/png;base64est le type MIME suivi du drapeau d'encodage. C'est la partie que les gens se trompent souvent.- Tout ce qui suit la virgule correspond aux octets de l'image réelle encodés en base64.
Comme l'image entière réside dans la chaîne, le navigateur n'effectue pas de requête réseau séparée. Cette propriété unique est la raison d'être des URI de données, et la source de tous les compromis dans cet article.
Modèle mental rapide : le base64 n'est pas une compression. C'est l'inverse. C'est une façon de représenter des données binaires en utilisant uniquement des caractères textuels sûrs, et cette représentation est toujours plus volumineuse que l'original.
Le préfixe MIME par format d'image#
Utiliser le mauvais type MIME est la première raison pour laquelle une image intégrée s'affiche comme une icône cassée. Le préfixe doit correspondre aux octets réels du fichier, pas à l'extension de fichier que vous pensez avoir.
| Format d'image | Préfixe d'URI de données correct |
|---|---|
| PNG | data:image/png;base64, |
| JPEG | data:image/jpeg;base64, |
| GIF | data:image/gif;base64, |
| WebP | data:image/webp;base64, |
| SVG | data:image/svg+xml;base64, |
| ICO (favicon) | data:image/x-icon;base64, |
Notez que JPEG est image/jpeg, jamais image/jpg, même si l'extension de fichier est généralement .jpg. SVG est un cas particulier car c'est du texte, pas du binaire, donc vous pouvez souvent ignorer le base64 et utiliser l'encodage URL à la place (plus de détails ci-dessous).
Comment convertir une image en Base64#
Vous avez trois méthodes pratiques selon que vous souhaitiez une chaîne unique, une conversion côté navigateur dans votre propre application, ou une sortie lors de la construction. Voici la méthode la plus rapide d'abord, puis le code.
Étape 1 : Obtenir la chaîne avec un convertisseur sans installation#
Pour un usage unique rapide, vous n'avez pas besoin d'écrire de code. Déposez le fichier dans un encodeur et décodeur base64, ou utilisez le convertisseur dédié image vers base64 lorsque vous souhaitez que le préfixe complet data:image/... soit généré pour vous. Vous collez ou téléchargez, vous copiez le résultat, c'est terminé. C'est la bonne approche lorsque vous avez besoin de la chaîne une seule fois pour une règle CSS ou un modèle d'email.
La conversion s'effectue dans votre navigateur, donc l'image ne quitte jamais votre machine. Cela compte lorsque l'image est un actif privé, un logo client, ou tout ce que vous ne colleriez pas dans un outil en ligne aléatoire.
Étape 2 : Encoder dans le navigateur avec FileReader#
Lorsque vous devez convertir des images dans votre propre application web (par exemple, un utilisateur télécharge un avatar et vous souhaitez le prévisualiser avant envoi), l'API FileReader vous donne directement une URI de données :
function fileToDataURL(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result); // déjà une URI de données complète
reader.onerror = reject;
reader.readAsDataURL(file);
});
}
// utilisation
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async () => {
const dataURL = await fileToDataURL(input.files[0]);
document.querySelector('img').src = dataURL; // s'affiche instantanément
});
readAsDataURL renvoie la chaîne complète data:image/png;base64,..., préfixe inclus, vous pouvez donc l'affecter directement à un src d'img ou à une background-image. Pas de détection manuelle de MIME nécessaire.
Étape 3 : Encoder côté serveur ou lors de la construction#
Dans Node.js, vous lisez le fichier sous forme de buffer et appelez toString('base64'), puis construisez vous-même le préfixe :
import { readFileSync } from 'node:fs';
const bytes = readFileSync('logo.png');
const base64 = bytes.toString('base64');
const dataURI = `data:image/png;base64,${base64}`;
En Python, c'est presque identique :
import base64
with open("logo.png", "rb") as f:
encoded = base64.b64encode(f.read()).decode("ascii")
data_uri = f"data:image/png;base64,{encoded}"
Les outils de construction comme webpack et Vite automatisent cela. Vite, par exemple, intègre tout actif en dessous d'un seuil de taille (4 Ko par défaut) sous forme d'URI de données base64 automatiquement, et laisse les fichiers plus grands sous forme d'URL normales. Ce seuil par défaut existe précisément à cause du calcul de taille dans la section suivante.
Où vous utilisez réellement les images Base64#
La chaîne est inutile tant que vous ne la placez pas quelque part. Les trois emplacements courants :
En HTML, comme source d'une img :
<img src="data:image/png;base64,iVBORw0KGgo..." alt="Logo en ligne" />
En CSS, comme arrière-plan :
.icon {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxu...");
}
Dans du JSON ou une charge utile d'API, où vous ne pouvez pas envoyer de binaire brut, l'image est donc transportée comme un champ de chaîne :
{ "avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ..." }
Ce cas JSON est l'une des utilisations légitimes les plus fortes. Lorsqu'une API est uniquement en JSON et que vous devez transporter une image en ligne, le base64 est la réponse standard.
La pénalité de taille de 33% dont personne ne parle#
Voici ce que les pages de conversion d'images passent sous silence. Base64 encode 3 octets de données binaires en 4 caractères ASCII. Ce ratio est fixe : 4/3, soit une augmentation d'environ 33% avant même de compter le remplissage. Un PNG de 90 Ko devient environ 120 Ko de texte base64.
Ce surcoût ne disparaît pas. Il se retrouve dans votre fichier HTML ou CSS, ce qui signifie :
- Des charges utiles HTML ou CSS plus lourdes. Les octets encodés font désormais partie du document que le navigateur doit télécharger et analyser.
- Pas de streaming ni de rendu progressif. Une image liée peut s'afficher au fur et à mesure de son arrivée. Une image intégrée n'apparaît qu'après le téléchargement complet de sa chaîne de caractères dans le fichier parent.
- Gzip aide, mais pas assez. La compression récupère une partie de la perte car le texte base64 est répétitif, mais on revient rarement à la taille binaire d'origine, et le coût CPU du décodage de la chaîne est réel sur les appareils bas de gamme.
Attention : intégrer une grande image hero ou une photo est presque toujours une erreur. Une photo de 500 Ko devient environ 665 Ko de base64 inséré dans votre HTML, bloquant la fin de l'analyse de la page pendant son téléchargement. Gardez-la comme un fichier lié.
Si votre objectif est une image plus petite plutôt qu'une image intégrée, l'encodage n'est pas le bon levier. Réduisez d'abord le fichier avec un compresseur d'images gratuit, puis décidez si l'actif désormais plus petit mérite d'être intégré.
Quand intégrer en base64 vs quand lier#
La décision se résume à une question : éviter une requête HTTP permet-il d'économiser plus que les 33% de surcoût que cela vous coûte ? Utilisez ceci comme règle empirique.
| Intégrer en base64 quand | Lier comme un fichier normal quand |
|---|---|
| Petits éléments : petites icônes, espaceurs de 1px, SVG simples | Photos, images hero, tout ce qui dépasse ~5 Ko |
| L'image est critique et vous voulez zéro requête supplémentaire | L'image peut être chargée paresseusement ou apparaît sous la ligne de flottaison |
| Vous envoyez une image dans du JSON ou un corps d'email | L'image est réutilisée sur plusieurs pages (le cache gagne) |
| L'élément est à usage unique et propre à une page | L'élément bénéficie d'un CDN ou du cache navigateur |
Le point sur le cache est celui que les développeurs oublient le plus souvent. Une image liée est mise en cache une fois et réutilisée sur chaque page et chaque visite ultérieure. Une image intégrée est retéléchargée dans le document à chaque fois, sur chaque page, sans bénéfice de cache propre. Pour un logo présent sur tout le site, lier l'emporte nettement. Pour une icône unique sur une page d'atterrissage, l'intégration peut économiser une requête avec un coût négligeable.
Sur les connexions HTTP/2 et HTTP/3 modernes, la justification initiale de l'intégration (éviter le coût de nombreuses requêtes parallèles) est beaucoup plus faible qu'à l'époque du HTTP/1.1. Le multiplexage des requêtes a rendu les petits fichiers peu coûteux à récupérer. C'est une raison supplémentaire pour intégrer avec parcimonie aujourd'hui.
SVG : le format où l'on saute souvent le Base64#
Le SVG est du texte XML, pas du binaire, donc le Base64 est généralement un mauvais choix pour lui. Vous pouvez intégrer un SVG encodé en URL dans du CSS et éviter complètement le surcoût d'encodage :
.checkmark {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg"...%3E');
}
L'encodage URL d'un SVG le rend lisible et évite la pénalité de 33 % du Base64, car vous n'échappez que les quelques caractères qui posent problème dans une url() CSS. Réservez le Base64 aux formats binaires (PNG, JPEG, WebP) où il n'existe pas d'alternative lisible.
Décoder une image Base64 en fichier#
L'opération inverse est tout aussi courante. Si vous avez une URI de données et avez besoin du fichier d'origine, supprimez le préfixe et décodez le reste. Dans le navigateur :
function dataURLtoBlob(dataURL) {
const [meta, b64] = dataURL.split(',');
const mime = meta.match(/data:(.*?);base64/)[1];
const binary = atob(b64);
const bytes = new Uint8Array(binary.length);
for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
return new Blob([bytes], { type: mime });
}
Pour un décodage manuel rapide sans code, collez la chaîne (avec ou sans préfixe) dans le même outil de codec base64 et téléchargez l'image reconstituée. Si vous souhaitez un guide plus détaillé sur le va-et-vient des images via base64 et les URI de données, le tutoriel sur l'encodage et le décodage des images et URI de données en base64 couvre le cycle complet avec des exemples.
Erreurs courantes qui cassent les images inline#
Quelques erreurs expliquent presque tous les problèmes d'icônes cassées :
- Mauvais type MIME. Étiqueter un JPEG en
image/pngperturbe certains moteurs de rendu. Faites correspondre le préfixe aux octets réels. - Inclure des sauts de ligne. Certains outils coupent la sortie base64 tous les 76 caractères. Dans un attribut HTML ou une règle CSS, ces retours à la ligne peuvent casser la chaîne. Utilisez une seule ligne sans coupure.
- Oublier
;base64. Sans ce drapeau, le navigateur traite les données comme du texte brut ou du contenu encodé en URL, pas comme du binaire encodé. - Inliner des images gigantesques. Techniquement valide, pratiquement un problème de performance. Surveillez la taille de votre document.
- Coller des images privées dans des encodeurs en ligne non fiables. Préférez un convertisseur qui s'exécute côté client pour que le fichier ne soit jamais téléchargé.
Convertir une image en Base64, en pratique#
Pour résumer le processus de conversion d'une image en base64 de la bonne manière : choisissez le préfixe MIME correspondant au format, encodez avec un outil côté client ou FileReader, et prévoyez une augmentation de taille d'environ 33%. Intégrez uniquement les petites images à usage unique et critiques pour le rendu, et conservez les photos et images réutilisées sous forme de fichiers liés pour que le cache du navigateur fasse son travail. Les SVG préfèrent généralement l'encodage URL, pas le base64.
Lorsque vous avez besoin rapidement et en toute sécurité de la chaîne, l'encodeur et décodeur base64 gère les deux sens dans votre navigateur, et le convertisseur dédié image vers base64 construit l'URI de données data:image/... complète pour que vous puissiez la coller directement dans votre balisage.
Foire aux questions#
Comment convertir une image en base64 ?
Téléchargez ou collez le fichier dans un encodeur côté client, ou utilisez du code : dans le navigateur, appelez FileReader.readAsDataURL(file), et dans Node.js, lisez le fichier sous forme de buffer et appelez buffer.toString('base64'). Ajoutez ensuite le préfixe correct, comme data:image/png;base64,, pour obtenir une URI de données utilisable.
Pourquoi mon image base64 est-elle plus volumineuse que le fichier d'origine ? Base64 représente 3 octets de données binaires sous forme de 4 caractères texte, ce qui augmente la taille d'environ 33 % avant le remplissage. Il s'agit d'un encodage, pas d'un format de compression, donc la version encodée est toujours plus grande. Si vous avez besoin d'un fichier plus petit, compressez d'abord l'image, puis décidez si vous souhaitez l'intégrer.
Quel est le préfixe d'URI de données correct pour un JPEG ?
C'est data:image/jpeg;base64,, en utilisant image/jpeg et jamais image/jpg. L'extension de fichier sur le disque est généralement .jpg, mais le type MIME dans l'URI de données doit être jpeg. Un préfixe incorrect est la raison la plus courante pour laquelle une image intégrée s'affiche comme une icône cassée.
Dois-je intégrer les images en base64 pour des raisons de performance ? Uniquement pour les petits éléments critiques pour le rendu, comme les petites icônes. L'intégration évite une requête HTTP mais ajoute 33 % de surcharge à votre HTML ou CSS, empêche le navigateur de mettre en cache l'image séparément et la retélécharge à chaque page. Avec HTTP/2 et HTTP/3, l'avantage de réduire les requêtes est moindre qu'avant, donc privilégiez les liens pour les photos et les images réutilisées.
Ai-je besoin de base64 pour les images SVG ?
Généralement non. Le SVG est du texte, vous pouvez donc l'encoder en URL dans un url() CSS et éviter complètement le surcoût de 33 % du base64 tout en gardant le balisage lisible. Réservez le base64 pour les formats binaires comme PNG, JPEG et WebP où il n'existe pas d'alternative textuelle.
Est-il sûr d'utiliser un convertisseur image vers base64 en ligne ? Cela dépend si l'outil traite le fichier dans votre navigateur ou le télécharge sur un serveur. Pour les fichiers privés comme les logos clients, utilisez un convertisseur qui fonctionne côté client afin que l'image ne quitte jamais votre machine. Les outils base64 et image vers base64 de Molixa encodent localement dans le navigateur précisément pour cette raison.
