Encodez n'importe quel fichier ou texte localement avec l'encodeur multi-format pour construire des data URIs.
Ce qu'est une data URI
Une data URI intègre un fichier directement dans un attribut src ou href, par exemple data:image/png;base64,iVBORw0KGgo…. Le navigateur le décode localement, donc aucune requête HTTP séparée n'est nécessaire.
Le format est défini par RFC 2397, et la variante Base64 est le moyen le plus courant d'intégrer des fichiers binaires.
La forme complète comporte trois parties : le schéma data:, un type MIME facultatif et les données utiles. Avec ;base64, elles sont du texte Base64 ; sans ce marqueur, elles sont encodées en pourcentage.
J'ai utilisé une data URI pour la première fois quand j'ai dû envoyer à un collègue un seul fichier HTML avec un logo intégré. La démo restait autonome, sans question sur les fichiers image manquants.
Le texte brut n'a pas besoin de Base64. Une variante encodée en pourcentage est plus courte et lisible, mais les fichiers binaires restent tributaires de Base64.
Quand les data URIs aident
- Icônes et logos minuscules de moins de 2 Ko environ qui n'apparaissent qu'une fois par page
- Petites polices ou sprites où une requête supplémentaire coûte plus que les octets
- HTML autonome pour e-mails, démos ou fichiers hors ligne
- Cas où l'élément doit survivre dans un seul fichier
- Un favicon ou une petite icône SVG qui n'apparaît que sur une seule page
- Une image d'arrière-plan utilisée une seule fois dans une feuille de style
- Prototypes et démos pour lesquels un chemin serveur dédié ne vaut pas la peine
Quand les data URIs nuisent
- Grandes photos : elles alourdissent le HTML et bloquent l'analyse
- Éléments répétés : chaque occurrence réintègre les octets et n'est pas mise en cache
- Pages HTTP/2 : le parallélisme et le cache rendent les fichiers séparés bon marché
- Tout ce qui dépasse ~10 Ko où une URL normale gagne sur tous les critères
- Éléments derrière une politique de sécurité du contenu bloquant les sources data: — l'image échoue alors silencieusement
- Tout ce que vous mettez à jour souvent : chaque modification impose de reconstruire la page
- Clients e-mail : plusieurs acteurs courants suppriment les sources data: par sécurité
Avertissement: Base64 ajoute environ 33 % de surcoût. Une photo de 100 Ko devient un blob intégré de 133 Ko dans votre HTML — visible par chaque visiteur à chaque chargement de page.
Côte à côte
| Scénario | Data URI | Fichier externe |
|---|---|---|
| Icône sous 2 Ko, utilisée une fois | Bonne | OK |
| Grande photo | Mauvaise | Meilleure |
| Élément utilisé sur de nombreuses pages | Mauvaise | Meilleure (cache) |
| E-mail ou démo autonome | Meilleure | Non utilisable |
| Newsletter e-mail avec images | Peu fiable | Meilleure |
| Élément mis à jour fréquemment | Mauvaise | Meilleure (cache) |
Créer une data URI localement
L'encodeur fonctionne entièrement dans votre navigateur. Votre fichier ne quitte jamais votre appareil. Construisez l'URI avec l'encodeur multi-format et copiez le résultat directement dans votre balisage.
- Ouvrez l'encodeur multi-format dans votre navigateur.
- Déposez votre fichier image et encodez-le en Base64.
- Préfixez data:<type-mime>;base64, à la sortie.
- Collez le résultat dans votre attribut src ou href.
- Vérifiez la taille du résultat : si la chaîne Base64 est nettement plus lourde que le fichier d'origine, une URL normale gagne le plus souvent.
FAQ
Q.Les data URIs sont-elles mises en cache par le navigateur ?
A.Non. Les data URIs vivent dans le document, elles sont donc re-téléchargées à chaque chargement de page. Les fichiers externes peuvent être mis en cache et partagés entre pages.
Q.Quel est le surcoût de taille de Base64 ?
A.Environ 33 % plus le rembourrage. Un binaire de 1 Mo devient environ 1,33 Mo de texte. C'est le prix d'une représentation textuelle sûre des données binaires.
Q.Les data URIs sont-elles bonnes pour le SEO ?
A.Les moteurs de recherche peuvent les indexer, mais elles ajoutent du poids HTML et ne peuvent pas être optimisées ou mises en cache comme de vrais fichiers image. Utilisez-les avec parcimonie et gardez les images dans des fichiers séparés pour les pages de production.
Q.Puis-je utiliser une data URI en CSS ?
A.Oui, dans url() — par exemple background-image: url(data:image/svg+xml;base64,…). Les mêmes compromis s'appliquent et les chaînes longues rendent la feuille de style difficile à lire.
Q.Les data URIs fonctionnent-elles dans les e-mails ?
A.Pas de façon fiable. Plusieurs clients bloquent les sources data: par sécurité : une image peut s'afficher dans votre messagerie et ailleurs en lien cassé. Pour l'essentiel, hébergez l'image et liez-la.
Références
- RFC 2397 – Le schéma d'URL « data » : https://www.rfc-editor.org/rfc/rfc2397
- RFC 4648 – The Base16, Base32, and Base64 Data Encodings : https://www.rfc-editor.org/rfc/rfc4648
- MDN – Data URLs : https://developer.mozilla.org/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URLs
Construisez une data URI
Encodez des fichiers en Base64 dans votre navigateur et copiez le résultat.
Intégrez le petit, liez le reste
Pour une icône ponctuelle de moins de 2 Ko, une data URI convient. Pour les images qui se répètent ou pèsent des kilo-octets, un fichier normal gagne car le navigateur le met en cache.
Construisez l'URI localement avec l'encodeur multi-format et vérifiez la taille avant de la coller.
Un contrôle rapide avant d'insérer : la taille du fichier et la fréquence de chargement. Sous 2 Ko environ et utilisé une fois, intégrez. Au-delà, liez.