Un Data URI incorpore le contenu d'un fichier directement dans du HTML, du CSS ou du JS sous la forme data:[type];base64,[données], sans requête HTTP séparée. Au-delà de la performance, cette technique a un effet secondaire qui intéresse particulièrement les sites soumis au RGPD : elle évite une requête réseau vers un serveur tiers, donc une occasion de moins de laisser une trace exploitable pour du pistage.
Moins de requêtes, c'est aussi moins de traces
Chaque image chargée via une URL classique est une requête HTTP que le serveur (ou un CDN tiers) peut journaliser — adresse IP, user-agent, moment de la visite. En intégrant une petite image directement dans la page via un Data URI, on supprime cette requête et, avec elle, une source de collecte de données que les audits RGPD examinent de près, notamment pour les pixels de suivi déguisés en simples icônes.
Avantages
- Moins de requêtes HTTP — utile pour de petites icônes ou images de fond, et accessoirement moins de journaux tiers.
- Le fichier est « attaché » au document et ne peut pas se rompre si un chemin de CDN change.
- Pratique pour des aperçus qui doivent s'afficher immédiatement, avant que l'image réelle ne charge.
Limites
- Base64 augmente la taille des données d'environ un tiers par rapport au fichier binaire.
- Un gros Data URI alourdit le fichier HTML/CSS lui-même et ne peut pas être mis en cache séparément de la page.
- Pour des images volumineuses ou souvent réutilisées, un fichier séparé mis en cache reste presque toujours plus efficace sur les visites répétées.
SVG en tant que texte, et non en Base64
Contrairement aux formats matriciels, le SVG est du texte (XML), donc il n'a pas besoin d'être encodé en Base64 : il suffit d'échapper correctement les caractères spéciaux via percent-encoding (data:image/svg+xml,%3Csvg...). Cette variante reste plus légère et parfaitement lisible, donc éditable directement dans un fichier CSS versionné avec Git.