Guides

Images Base64 et data URLs : bons usages et limites

Les data URLs aident pour de petits fichiers, mais elles changent taille, cache et performance.

Le principe

Une data URL place un petit fichier dans une chaîne URL. Pour une image, elle commence souvent par data:image/png;base64,.

Bon cas

Utilisez-la pour une icône minuscule, un test, un email simple ou un aperçu généré.

Le coût

Base64 transforme 3 octets en 4 caractères. Le HTML ou CSS grossit et le navigateur doit le lire avant de découvrir l’image.

Limites et sécurité

MDN documente des limites de longueur. Les navigateurs bloquent la navigation principale vers data: URLs pour limiter le phishing.

Règle pratique

Intégrez seulement les fichiers que vous accepteriez de coller dans le code source. Gardez les images normales comme fichiers séparés.

Sources techniques