Image en Base64
Copiez une data URI prête pour votre CSS ou votre HTML
Image
Résultat
Aucune image pour l’instant
Déposez une image et la sortie Base64 apparaîtra ici.
Le Base64 alourdit les données d’environ 33 %. À réserver aux petites images.
Intégrer une petite image en data URI supprime une requête réseau, ce qui compte pour une icône présente sur toutes les pages. Au-delà de quelques kilo-octets, le jeu n’en vaut plus la chandelle : le Base64 alourdit les données d’environ un tiers et empêche une mise en cache séparée.
Mode d’emploi
- 1 Déposez une image — les petites icônes conviennent le mieux.
- 2 Choisissez si vous voulez la data URI complète ou seulement la charge utile Base64.
- 3 Copiez le résultat et collez-le dans votre CSS ou votre HTML.
Questions fréquentes
Quand faut-il intégrer une image en ligne ?
En dessous d’environ 4 Ko, et seulement pour des images utilisées sur presque toutes les pages. Au-delà, le surcoût de taille et la perte de mise en cache séparée l’emportent sur la requête économisée.
Pourquoi le fichier grossit-il ?
Le Base64 représente trois octets binaires par quatre caractères ASCII, soit une augmentation fixe de 33 %, plus un peu pour le préfixe de l’URI. C’est le prix à payer pour loger des données binaires dans un fichier texte.
Une data URI est-elle mise en cache ?
Uniquement dans le fichier qui la contient. Changez une icône intégrée et toute la feuille de style doit être retéléchargée — ce qui explique pourquoi intégrer de grandes images se retourne contre vous.