Image vers Base64
Transformez une image en URI de données Base64 que vous pouvez intégrer directement dans du HTML ou du CSS.
Comment utiliser Image vers Base64
- Choisissez une image depuis votre appareil.
- Copiez l'URI de données Base64, ou l'extrait CSS prêt à l'emploi.
- Collez-le dans votre HTML, CSS ou JSON.
À propos de Image vers Base64
Cet outil encode une image en URI de données Base64 — une longue chaîne de texte commençant par data:image/...;base64, qui contient l'intégralité du fichier sous forme de texte. Comme il s'agit uniquement de texte, vous pouvez le coller directement dans un <img src>, un background-image CSS, une feuille de style ou une charge JSON, et l'image se charge sans fichier séparé ni requête réseau supplémentaire. L'outil construit également pour vous la ligne CSS background-image correspondante, afin que vous puissiez l'insérer directement.
L'encodage se fait dans votre navigateur grâce au FileReader intégré, si bien que l'image n'est jamais envoyée en ligne. L'outil affiche la longueur de la chaîne obtenue, ce qui compte car le Base64 rend un fichier environ un tiers plus volumineux que l'original — excellent pour les petites icônes et logos, moins pour les grandes photos. En règle générale, l'intégration en ligne vaut la peine pour des images de quelques kilo-octets.
Pour faire l'inverse et retransformer une URI de données en image visible et téléchargeable, utilisez Base64 vers image. Si le fichier est volumineux, réduisez-le d'abord avec compresser une image ou le redimensionneur d'images afin que la chaîne encodée reste gérable. Pour encoder du texte ordinaire plutôt que des images, voyez encodage Base64.
Questions fréquentes
À quoi sert une URI de données Base64 ?
Elle permet d'intégrer une image directement dans du HTML, du CSS ou du JSON sous forme de texte, si bien qu'elle se charge sans fichier séparé ni requête réseau. C'est surtout utile pour les petites icônes, logos et images d'e-mails.
Le Base64 rend-il l'image plus volumineuse ?
Oui, un peu. L'encodage Base64 augmente la taille d'environ un tiers, car il représente des données binaires uniquement avec des caractères texte. C'est pourquoi il convient surtout aux petites images.
Mon image est-elle envoyée en ligne pour l'encoder ?
Non. L'encodage se fait dans votre navigateur avec l'API FileReader. Le fichier ne quitte jamais votre appareil.
Puis-je utiliser le résultat comme arrière-plan CSS ?
Oui. L'outil construit pour vous la ligne background-image — il suffit de la copier dans votre feuille de style. Vous pouvez aussi coller l'URI de données brute dans une balise img.
Quels formats puis-je encoder ?
Toute image que votre navigateur peut lire, y compris PNG, JPEG, WebP, GIF et SVG. L'URI de données conserve le format d'origine et, pour le PNG, sa transparence.