Image en base64

Comment ça marche

1. Ajoutez l’image. PNG, JPEG, GIF, WebP, AVIF, SVG, BMP et ICO fonctionnent.
2. Choisissez ce qui l’entoure — data URI nue, règle CSS ou balise img.
3. Copiez le résultat.
4. Regardez la note de taille. Inliner économise une requête, et cesse d’être rentable plus tôt qu’on ne croit.

Questions fréquentes

L’image est-elle réencodée ou compressée ?

Non. Les octets du fichier sont lus et encodés tels quels : un PNG optimisé le reste, un GIF animé reste animé. Un outil qui réencoderait « pour aider » changerait discrètement les couleurs d’une icône.

De combien cela grossit-il ?

D’environ un tiers. Le base64 transforme trois octets en quatre, plus le préfixe. C’est le prix d’une requête HTTP économisée.

Quand cela vaut-il vraiment le coup ?

Pour quelque chose de petit et immédiatement nécessaire — une icône, un pixel d’espacement, un minuscule logo dans un courriel. Au-delà de quelques kilo-octets, les octets ajoutés à chaque chargement coûtent plus que la requête économisée.

Puis-je inliner un SVG ainsi ?

Vous le pouvez, et souvent vous ne devriez pas : un SVG est du texte, il peut aller directement dans le HTML où le CSS peut le colorer. Le base64 sert quand il faut absolument une seule chaîne opaque.

Y a-t-il un envoi ?

Non. Tout se passe dans votre navigateur.