Qu’est-ce qu’un data URI
C’est une façon d’intégrer un fichier dans le code lui-même au lieu de le lier : data:image/png;base64,iVBORw0….
Le navigateur le lit comme une URL, il fonctionne donc partout où irait l’adresse d’une image : le src d’une
<img>, un url() CSS ou un champ JSON.
Quand c’est intéressant (et quand ça ne l’est pas)
Le Base64 pèse 33 % de plus que le fichier d’origine et ne peut pas être mis en cache séparément : si l’image est dans le CSS, elle est retéléchargée à chaque modification du CSS. C’est intéressant pour :
- Les petites icônes et décorations, de moins de quelques Ko, utilisées sur toutes les pages.
- Les e-mails HTML et les documents en un seul fichier, où l’on ne peut pas lier de ressources externes.
- Les aperçus minuscules (LQIP) affichés pendant le chargement de la vraie image.
- Les tests et prototypes qui doivent fonctionner hors ligne.
Pour les photos et toute image volumineuse, un fichier normal est préférable, avec loading="lazy" et en WebP ou AVIF.
SVG : mieux sans Base64
Un SVG est du texte : il peut aller dans le data URI presque tel quel, en échappant seulement quelques caractères. Cette version « URL-encoded » est nettement plus légère que le Base64 et reste lisible. Quand vous convertissez un SVG, l’outil vous laisse choisir.
Confidentialité
La conversion utilise l’API FileReader du navigateur : l’image n’est envoyée à aucun serveur. Le bouton
d’essai télécharge un placeholder du générateur ximg.es, comme https://ximg.es/64x64/2563eb/fff,
et le convertit comme s’il s’agissait du vôtre.