Générateur de data URI : texte ou fichiers en URL data:

Comment créer une data URI

Choisissez un mode. Depuis du texte (par défaut) encode ce que vous saisissez ou collez. Depuis un fichier prend un fichier de n’importe quel type, déposé, collé ou choisi. Analyser fait l’inverse et décortique une URI.
En mode Depuis du texte, réglez le Type MIME (par exemple text/css ou application/json), un Jeu de caractères et l’Encodage : Base64 ou encodé en URL. En mode Depuis un fichier, le type MIME est rempli d’après le fichier et reste modifiable.
Choisissez le Format de sortie : Data URI, url() CSS, <a> HTML avec un nom de téléchargement, ou Markdown. <img> HTML apparaît pour les images et @font-face pour les polices.
Appuyez sur Copier la sortie. Télécharger le fichier enregistre le contenu lui-même, et Enregistrer en .txt stocke le texte de sortie.

Sous les boutons, Données indique la taille des données, Longueur de l’URI la taille du résultat, et Surcoût la différence en pourcentage.

La syntaxe des data URI

Une data URI fait tenir un fichier entier dans une URL :

data:[<media type>][;charset=<charset>][;base64],<data>

Partie	Exemple	Remarques
type de média	`image/png`, `text/css`	facultatif ; vide, il vaut `text/plain;charset=US-ASCII`
paramètres	`;charset=utf-8`	pour les types texte ; d’autres paires `;key=value` sont autorisées
`;base64`	`;base64`	les données sont en Base64 ; sans lui, elles sont encodées en pourcent
données	après la virgule	le contenu

Quelques exemples :

Data URI	Contient
`data:,Hello%2C%20World%21`	le texte `Hello, World!`, type implicite
`data:text/plain;charset=utf-8;base64,SGVsbG8sIFdvcmxkIQ==`	le même texte, en Base64
`data:text/css,body%7Bcolor:%23333%7D`	une règle CSS, encodée en URL
`data:application/json;base64,eyJvayI6dHJ1ZX0=`	`{"ok":true}`

La virgule est obligatoire, même quand les données sont vides : data:, est une URI valide et vide.

Base64 ou encodage URL

Les deux encodages produisent une URI valide ; ils diffèrent par la taille et la lisibilité.

Contenu	URI en Base64	URI encodée en URL
`Hello, World!` en `text/plain;charset=utf-8`	57 car.	45 car.
`body{color:#333}` en `text/css`	45 car.	36 car.
`{"ok":true}` en `application/json`	45 car.	41 car.
`<h1>Héllo</h1>` en `text/html;charset=utf-8`	56 car.	56 car.

Le texte ASCII simple est plus court encodé en URL, et reste lisible dans la source. Chaque octet non ASCII coûte trois caractères (é devient %C3%A9) : un texte dans d’autres écritures favorise donc vite le Base64. Pour les images, polices, PDF et autres fichiers binaires, utilisez le Base64 ; le générateur vous avertit si vous choisissez l’encodage URL pour des données binaires.

L’encodage URL est ici prudent : les lettres, les chiffres et - . _ ~ ! $ * + , ; = : @ / ? restent tels quels, tout le reste est échappé, y compris #, %, les guillemets, les parenthèses et les espaces. Un # brut terminerait l’URI, car les navigateurs le lisent comme le début d’un fragment. Pour le SVG, il existe une troisième option, plus courte, sur SVG en data URI.

Où les data URI fonctionnent

Images dans <img src>, background-image en CSS, <link rel="icon"> et le poster d’une vidéo.
Polices dans le src de @font-face, pratique pour une petite police d’icônes. Le générateur construit la règle pour vous quand le type MIME est une police.
Téléchargements via <a href="data:..." download="report.csv">, pour des fichiers générés dans une page sans serveur.
Feuilles de style et scripts chargés avec <link href> ou <script src>, quand la Content Security Policy de la page autorise data: pour eux.
Fixtures de test et payloads JSON qui ont besoin d’un petit fichier intégré.

Elles ne fonctionnent pas partout. Chrome et Firefox bloquent la navigation de l’onglet entier vers une URL data: initiée par la page : un lien vers data:text/html,... ne fait donc rien quand on clique dessus. Une Content Security Policy doit lister data: dans img-src, font-src ou la directive concernée. Beaucoup de webmails, dont Gmail, suppriment complètement les images en data URI ; voir Base64 dans les e-mails.

Taille et performances

Le Base64 rend les données binaires environ 33 % plus volumineuses, et l’URI est répétée dans chaque page ou feuille de style qui la contient, sans entrée de cache propre. Le compromis est bon pour de petits fichiers de quelques kilo-octets, mauvais pour des photos. Performances des data URI détaille les chiffres. Pour les images en particulier, Image en Base64 peut redimensionner et convertir avant l’encodage.

Construire une data URI dans le code

Du texte encodé en URL en JavaScript :

const uri = "data:text/plain;charset=utf-8," + encodeURIComponent("Prices: 5 € & up");
// data:text/plain;charset=utf-8,Prices%3A%205%20%E2%82%AC%20%26%20up

Du JSON en Base64 en Python :

import base64, json

obj = {"name": "Ada", "langs": ["en", "fr"]}
uri = "data:application/json;base64," + base64.b64encode(json.dumps(obj).encode()).decode()
# data:application/json;base64,eyJuYW1lIjogIkFkYSIsICJsYW5ncyI6IFsiZW4iLCAiZnIiXX0=

Plus de détails dans Base64 en JavaScript et Base64 en Python. Pour inspecter une data URI trouvée quelque part, utilisez l’analyseur de data URI.

FAQ

Quelle est la différence entre une data URI et une data URL ?

Aucune en pratique. La RFC 2397 parle du schéma d’URL « data », et les navigateurs comme le standard Fetch disent data URL ; data URI est le nom plus ancien, tout aussi courant, de la même syntaxe data:.

Quand utiliser l'encodage URL plutôt que le Base64 ?

Pour du texte court, surtout en ASCII, comme du CSS, du JSON ou du SVG, l’encodage URL est souvent plus court et reste lisible. Pour les fichiers binaires, le Base64 est toujours plus compact, car l’encodage pourcent transforme la plupart des octets en trois caractères.

Faut-il ;charset=utf-8 dans une data URI ?

Pour du texte contenant le moindre caractère non ASCII, oui. Sans lui, une data URI text/plain est par défaut en US-ASCII, et é ou € peuvent ressortir en deux ou trois caractères erronés. Les images et autres types binaires ne prennent pas de charset.

Pourquoi cliquer sur mon lien data: n'ouvre-t-il rien ?

Chrome et Firefox empêchent les pages d’ouvrir tout l’onglet sur une URL data:, car ce procédé était très utilisé pour le phishing. Les images, feuilles de style, polices et téléchargements avec <a download> fonctionnent toujours.

Les data URI ont-elles une taille maximale ?

Les limites varient selon les navigateurs et sont généreuses pour les images, mais les URI très longues ralentissent les pages et certains outils les tronquent. Le générateur vous avertit au-delà de 2 Mo ; pour un fichier aussi gros, mettez plutôt un lien.