Image en Base64

Encodez vos images en data URI Base64

Un data URI Base64 transforme une image en simple chaîne de texte que vous pouvez coller directement dans votre HTML ou CSS. Le navigateur la décode à la volée, si bien que l'image s'affiche sans requête de fichier distincte : pratique pour les toutes petites icônes, les modèles d'e-mail et les pages autonomes en un seul fichier.

Cet outil lit votre fichier localement et produit le data: URI complet, ainsi que des extraits <img> et CSS background-image prêts à copier en un clic. Rien n'est envoyé : l'encodage se fait entièrement dans votre navigateur.

Quand intégrer (et quand éviter)

L'intégration supprime une requête HTTP, ce qui peut accélérer les petites images critiques. Mais le Base64 est environ 33 % plus volumineux que le fichier binaire et ne peut pas être mis en cache séparément : évitez-le pour les grandes photos ou les images réutilisées sur de nombreuses pages. En règle générale, intégrez les icônes de quelques kilo-octets et gardez les images plus grandes sous forme de fichiers classiques.

Comment utiliser le résultat

Le data URI conserve le type d'origine du fichier, par exemple data:image/png;base64, suivi des octets encodés, et la ligne d'état indique combien de kilo-octets de texte ont été produits. Utilisez les trois boutons de copie selon la destination : l'URI brut pour une valeur src ou href, la balise <img> pour le HTML (ajoutez ensuite un texte alt pertinent), ou la ligne CSS pour une feuille de style.

Précautions pratiques

• Une longue chaîne Base64 alourdit votre fichier HTML ou CSS et le rend plus lent à lire, et elle est téléchargée à nouveau avec chaque page qui la contient. Gzip ou Brotli récupèrent une partie de la surcharge, mais les données de l'image sont déjà compressées, donc le gain est limité.
• Si votre site utilise une Content Security Policy, img-src doit autoriser les URI data:.
• De nombreux clients de messagerie bloquent ou suppriment les data URI : testez avant de vous y fier dans des newsletters.
• Compressez ou redimensionnez d'abord l'image : une source plus petite produit une chaîne bien plus courte.

Bons candidats à l'intégration

Les petites icônes, les images de substitution minuscules, les indicateurs de chargement, les logos simples et les images des démos HTML en un seul fichier conviennent le mieux. Les photos, les bannières principales et toute image affichée sur de nombreuses pages sont à servir plutôt comme fichiers séparés afin que le navigateur puisse les mettre en cache. L'encodage se déroule dans votre navigateur et le texte que vous copiez ne quitte jamais votre appareil tant que vous ne le collez pas vous-même quelque part.