Mode d’emploi
- Déposez un PNG sur la zone de dépôt, cliquez pour en choisir un ou collez une capture d’écran depuis le presse-papiers.
- Laissez « Conserver l’original » pour encoder les octets du PNG tels quels, ou définissez une « Largeur max. » pour réduire une grande image.
- Comparez la « Taille du fichier » et la « Taille Base64 » affichées pour l’image.
- Copiez ou téléchargez la sortie : data URI, Base64 brut, balise img, CSS ou Markdown.
PNG et Base64
PNG (Portable Network Graphics, type MIME image/png) est un format matriciel sans perte doté d’un canal alpha complet, ce qui en fait le choix habituel pour les icônes, les logos, les schémas et les captures d’écran. Tout fichier PNG commence par la même signature de 8 octets ; tout data URI PNG commence donc de la même façon : data:image/png;base64,iVBORw0KGgo....
Base64 ne touche pas aux pixels. Le décodage de la chaîne restitue un fichier identique octet pour octet, avec les mêmes couleurs et les mêmes zones transparentes.
Bons usages des data URI PNG
- Petites icônes d’interface et logos qui nécessitent un fond transparent.
- Captures d’écran dans des rapports HTML autonomes, des rapports de bogue ou une documentation exportée.
- Graphiques et QR codes générés sur un serveur et renvoyés dans une réponse JSON.
- Images créées avec
canvas.toDataURL(), qui produit déjà par défaut des data URI PNG.
Pour les photos, c’est une autre histoire. PNG les stocke sans perte et les fichiers deviennent lourds ; le JPEG ou le WebP produiront une chaîne bien plus courte.
Réduire le PNG avant l’encodage
Chaque octet retiré du PNG économise environ 1,33 caractère de Base64. Passez d’abord le fichier dans un optimiseur comme oxipng ou zopflipng (sans perte) ou pngquant (qui réduit la palette). Vérifiez aussi la taille en pixels : une icône exportée à trois fois sa taille d’affichage peut généralement être réduite avec l’option « Largeur max. ».
La conversion en WebP conserve la transparence et donne souvent un fichier bien plus petit. La conversion en JPEG supprime la transparence : les zones transparentes deviennent une couleur unie. Réencoder en PNG dans le navigateur n’optimise pas la compression, si bien que le résultat peut être plus volumineux qu’un original bien optimisé ; comparez les tailles avant de copier.
Utiliser la sortie
<img src="data:image/png;base64,iVBORw0KGgo..." width="24" height="24" alt="Settings">
.icon-settings {
background: url("data:image/png;base64,iVBORw0KGgo...") no-repeat center / 24px 24px;
}
# Ligne de commande : GNU coreutils / macOS
base64 -w 0 icon.png
base64 -i icon.pngQuestions fréquentes
Base64 conserve-t-il la transparence du PNG ?
Oui. Base64 encode les octets du fichier sans les modifier : le canal alpha est donc conservé. La transparence n’est perdue que si vous convertissez l’image en JPEG.
Pourquoi toutes les chaînes Base64 de PNG commencent-elles par iVBORw0KGgo ?
Ces caractères sont la forme Base64 de la signature des fichiers PNG. Si une chaîne censée représenter un PNG commence autrement, il s’agit d’un autre format ou elle est endommagée.
Puis-je coller directement une capture d’écran ?
data:image/png.Jusqu’à quelle taille intégrer un PNG en Base64 ?
Une règle empirique courante est de quelques kilo-octets, jusqu’à environ 10 Ko. Les images plus grandes gagnent à être servies comme fichiers séparés, que le navigateur peut mettre en cache et charger en parallèle.