Mode d’emploi
- Faites glisser des images sur la zone de dépôt, cliquez dessus pour choisir des fichiers ou collez une image depuis le presse-papiers. Vous pouvez traiter plusieurs fichiers à la fois.
- Si besoin, choisissez un format cible (PNG, JPEG ou WebP) dans « Convertir en », ajustez la « Qualité » et indiquez une « Largeur max. » pour réduire l’image.
- Vérifiez les « Dimensions », la « Taille du fichier » et la « Taille Base64 » affichées pour chaque image.
- Avec « Copier » ou « Télécharger », récupérez la sortie dont vous avez besoin : data URI, Base64 brut, balise img HTML, background-image CSS ou Markdown.
Fonctionnement de la conversion d’image en Base64
Base64 transforme les octets d’un fichier image en texte brut composé de 64 caractères. Chaque groupe de 3 octets devient 4 caractères : le texte est donc environ 33 % plus volumineux que le fichier. Un data URI ajoute un court préfixe indiquant le type MIME, comme data:image/png;base64,, ce qui permet au navigateur d’afficher ce texte partout où il attend l’URL d’une image.
L’image est lue et encodée localement dans votre navigateur. Elle n’est envoyée nulle part : vos captures d’écran privées et vos maquettes non publiées restent sur votre appareil.
Quelle sortie copier ?
- Data URI pour les attributs
src, le JavaScript et les champs JSON qui attendent une URL. - Base64 brut pour les API qui ne veulent que les octets encodés, généralement accompagnés d’un champ distinct pour le type MIME ou le nom du fichier.
- Balise img HTML à coller directement dans une page ou un modèle.
- background-image CSS pour les icônes et les éléments décoratifs d’une feuille de style.
- Markdown pour la documentation et les notes. Certains moteurs de rendu, dont celui de GitHub, n’affichent pas les images en data URI.
Formats pris en charge en un coup d’œil
Les premiers caractères d’une chaîne Base64 révèlent le type de fichier, car ils encodent la signature du format.
| Format | Type MIME | Début du Base64 |
|---|---|---|
| PNG | image/png | iVBORw0KGgo |
| JPEG | image/jpeg | /9j/ |
| WebP | image/webp | UklGR |
| GIF | image/gif | R0lGOD |
| SVG | image/svg+xml | PHN2Zy ou PD94bWw |
| BMP | image/bmp | Qk |
| ICO | image/x-icon | AAABAA |
| AVIF | image/avif | variable |
| TIFF | image/tiff | SUkqAA ou TU0AKg |
Quand l’intégration d’une image est rentable
Les data URI économisent une requête réseau et rendent un fichier autonome. Ils conviennent aux petites icônes et aux logos de quelques kilo-octets, aux rapports HTML en un seul fichier, aux minuscules aperçus flous servant d’espaces réservés et aux images transmises dans du JSON. Ils sont à éviter pour les grandes photos : un tiers de taille en plus, aucune mise en cache séparée par le navigateur et un fichier HTML ou CSS alourdi, qui doit être téléchargé avant tout affichage, coûtent généralement plus cher que la requête économisée. Si votre site envoie une Content-Security-Policy, les images intégrées exigent aussi data: dans img-src.
Questions fréquentes
Mes images sont-elles envoyées à un serveur ?
Non. Le navigateur lit chaque fichier et l’encode sur votre appareil. Rien n’est envoyé à base64.is ni ailleurs.
Pourquoi le texte Base64 est-il plus volumineux que l’image ?
Base64 utilise 4 caractères pour 3 octets : le résultat est donc environ 33 % plus volumineux, sans compter le préfixe du data URI. Pour le raccourcir, définissez une largeur maximale ou convertissez l’image en WebP ou en JPEG avec une qualité plus faible.
Puis-je convertir plusieurs images à la fois ?
Oui. Sélectionnez ou déposez plusieurs fichiers. Chaque image dispose de son propre aperçu, de ses tailles et de ses sorties, chacune avec des boutons « Copier » et « Télécharger ».
Les images Base64 fonctionnent-elles dans les e-mails HTML ?
cid: sont plus fiables.