Data URI Encoder / Decoder
Understand Data URI Encoder / Decoder
Une data URI transporte le contenu d'un fichier à l'intérieur de l'URL elle-même, si bien qu'une image, une police ou un SVG peut être intégré directement dans du HTML ou du CSS au lieu d'être téléchargé.
How it works
Le format est data:<type-mime>;base64,<charge utile> — par exemple data:image/svg+xml;base64,PHN2Zy4uLg==. Le texte que vous saisissez est encodé en UTF-8 puis en Base64 ; un fichier déposé sur l'outil est lu comme des octets bruts et son type MIME provient du fichier lui-même. Le Base64 ajoute environ un tiers à la taille, et c'est le compromis que vous acceptez contre une requête HTTP économisée.
When to use it
- Intégrer une petite icône ou un SVG dans du CSS pour qu'il s'affiche dès le premier rendu plutôt qu'après une seconde requête.
- Intégrer des images dans un e-mail HTML, où de nombreux clients bloquent par défaut les URL d'images externes.
- Construire une page HTML en un seul fichier ou un bookmarklet qui doit fonctionner sans serveur derrière lui.
- Extraire la charge utile d'une URL data: trouvée dans une feuille de style pour voir ce qu'elle contient réellement.
Watch out for
- Une data URI ne peut pas être mise en cache pour elle-même. Les octets voyagent dans chaque copie du document qui les référence, si bien qu'au-delà d'environ 5 Ko un fichier externe l'emporte généralement sur les visites répétées.
- Le décodage attend la forme ;base64,. Une data URI encodée en pourcent — data:image/svg+xml,%3Csvg... — est parfaitement valide et n'est pas prise en charge ici.
- Le décodage restitue la charge utile sous forme de texte, si bien qu'un PNG ou un WOFF revient en caractères illisibles. Pour le SVG et les autres formats textuels, vous récupérez la vraie source.
- Content-Security-Policy bloque les URL data: sauf si la directive les autorise, si bien qu'une page envoyant img-src 'self' n'affichera pas une image intégrée. Les navigateurs bloquent aussi la navigation de premier niveau vers une URL data:, ce qui interdit d'en prévisualiser une en la collant dans la barre d'adresse.
Frequently Asked Questions
Quand faut-il utiliser des data URI ?
Les data URI suppriment une requête HTTP pour les petites ressources. Bons usages : petites icônes et SVG en CSS (url("data:image/svg+xml,...")), images intégrées dans les e-mails HTML où les URL externes sont bloquées, applications HTML en un seul fichier, et polices intégrées au CSS sans requête réseau supplémentaire.
Quel est le surcoût de taille de l'encodage base64 ?
L'encodage base64 ajoute environ 33 % de taille. Un PNG de 30 Ko devient environ 40 Ko sous forme de data URI. Au-delà d'environ 5 Ko, l'augmentation de taille et l'impossibilité de mettre la ressource en cache séparément rendent généralement les fichiers externes plus efficaces que les data URI.
Puis-je utiliser des data URI pour des bundles JavaScript ?
Non — les navigateurs bloquent l'exécution de scripts depuis des URL data: dans de nombreux contextes, pour des raisons de sécurité (XSS). Les data URI conviennent aux images, aux polices, aux feuilles de style et aux SVG utilisés dans des attributs background-image ou src sur des éléments qui ne sont pas des scripts.
How to Use Data URI Encoder / Decoder
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.