Les Data URLs Base64 expliquées (et comment en créer)
Une data URL est une façon d’intégrer un fichier directement dans une page, une feuille de style ou un e-mail — sans requête séparée. Les octets de l’image sont encodés en Base64 et transportés dans l’attribut src lui-même.
L’anatomie d’une data URL
Une data URL suit la forme data:<type média>;base64,<données>. Pour un PNG, cela donne data:image/png;base64,iVBORw0KGgo... Le préfixe dit deux choses au navigateur : la nature des données (son type MIME) et le fait qu’elles sont encodées en Base64. Le navigateur décode et affiche comme pour un fichier récupéré.
Pourquoi les navigateurs les acceptent nativement
Les navigateurs embarquent un décodeur natif pour les data URLs : une image ainsi intégrée fonctionne partout où fonctionne une balise <img>, sans plugin ni aller-retour supplémentaire. C’est le même principe en CSS avec background-image et url(), et en e-mail pour intégrer des images sans pièce jointe.
Le compromis central : pas de requête, mais plus d’octets
Comme Base64 ajoute environ 33%, une data URL est d’un tiers plus grande que le fichier d’origine, et elle compte dans la taille de votre HTML ou CSS. Pour de petits éléments réutilisables — icônes, logos, vignettes — c’est un prix acceptable. Pour des photos et des fichiers de plusieurs mégaoctets, c’est un gaspillage.
Quand les utiliser
Utilisez des data URLs pour une poignée de petits éléments qui doivent s’afficher instantanément ou voyager dans un seul fichier : signatures d’e-mail, outils à fichier unique, démos hors ligne, favicons. Pour des images grandes ou nombreuses, le cache des vrais fichiers gagne.
Les créer et les décoder
L’outil Image vers Base64 produit une data URL prête à coller depuis n’importe quel fichier PNG, JPG, WebP, GIF, BMP ou AVIF, et l’outil Base64 vers Image fait l’inverse : détecte le format et rend le fichier original. Les deux tournent dans votre navigateur, donc rien n’est téléversé.