Mode d’emploi
- Choisissez « Texte » et saisissez votre texte, ou « Fichier » et sélectionnez le fichier à intégrer.
- Vérifiez ou saisissez le « Type MIME », par exemple image/png ou image/svg+xml, puis choisissez Base64 ou « Encodage-pourcent » dans « Encodage ».
- Copiez le data URI généré dans votre HTML, votre CSS ou votre JSON.
- Pour examiner un data URI existant, passez en mode « Analyser » et collez-le : son type MIME, son jeu de caractères, sa taille et un aperçu s’affichent, et vous pouvez télécharger le fichier intégré.
Syntaxe d’un data URI
Un data URI, défini par la RFC 2397, transporte un petit fichier à l’intérieur même de l’URL :
data:[<mediatype>][;base64],<data>
data:text/plain;charset=UTF-8,Hello%20world
data:image/png;base64,iVBORw0KGgo...Le type de média indique au navigateur comment interpréter les données ; s’il est omis, text/plain;charset=US-ASCII est utilisé par défaut. L’indicateur ;base64 signifie que la partie située après la virgule est en Base64. Sans lui, les données sont du texte brut dont les caractères spéciaux sont encodés en pourcent.
Base64 ou encodage-pourcent
Le Base64 est le bon choix pour les fichiers binaires comme les images PNG, JPEG et WebP, les polices et les PDF. Il ajoute toujours environ 33 %. Pour les formats texte, l’encodage-pourcent est souvent plus compact, car la plupart des caractères restent inchangés et seuls quelques-uns, comme <, >, #, % et les guillemets doubles, doivent être échappés. Il convient donc bien aux icônes SVG, et son résultat lisible se compresse aussi mieux avec gzip ou Brotli. En revanche, chaque octet d’un texte non ASCII devient trois caractères : pour un texte en chinois ou en cyrillique, le Base64 est généralement plus court. En cas de doute, essayez les deux options et gardez le résultat le plus court.
/* SVG encodé en pourcent dans du CSS : guillemets simples à l’intérieur, # écrit %23 */
.dot { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23f60'/%3E%3C/svg%3E"); }Quand l’intégration en ligne est rentable
Un data URI économise une requête HTTP, mais les données font alors partie du document qui les contient :
- Pas de mise en cache séparée. Une image intégrée dans du HTML est téléchargée à nouveau avec chaque page. Une image intégrée dans une feuille de style est mise en cache avec ce fichier, mais la modifier invalide toute la feuille de style.
- Premier affichage plus lent. Les gros data URI dans le CSS retardent le rendu, car le navigateur doit d’abord télécharger et analyser l’intégralité de la feuille de style.
- Surcoût de taille. Le Base64 ajoute un tiers, que la compression du HTML ou du CSS ne récupère qu’en partie.
Avec HTTP/2 et HTTP/3, les requêtes supplémentaires coûtent peu : n’intégrez donc que de petites ressources de quelques kilo-octets, comme des icônes, de minuscules images de substitution ou un arrière-plan critique, et servez tout le reste sous forme de fichiers normaux. Les sites dotés d’une Content Security Policy doivent autoriser data: dans img-src ou font-src pour que les images et les polices intégrées se chargent.
Questions fréquentes
Les data URI ont-ils une taille maximale ?
La RFC 2397 ne fixe aucune limite, et les navigateurs modernes acceptent des data URI de plusieurs mégaoctets dans les images et les feuilles de style. Les gros data URI restent une mauvaise idée : ils alourdissent la page, ne peuvent pas être mis en cache séparément et sont plus longs à analyser.
Pourquoi un data URI ne s’ouvre-t-il pas quand je clique sur un lien qui y mène ?
Pour se protéger contre l’hameçonnage, la plupart des navigateurs empêchent les pages web de faire naviguer la fenêtre principale vers une URL data:. Utilisez les data URI dans des images, du CSS ou des liens de téléchargement, ou collez l’URI dans le mode « Analyser » de cet outil pour l’afficher et télécharger son contenu.
Comment utiliser un data URI en HTML et en CSS ?
<img src="data:image/png;base64,..."> en HTML, ou background-image: url("data:image/svg+xml,...") en CSS. En CSS, mettez la valeur entre guillemets, surtout pour un SVG encodé en pourcent.Faut-il préciser un jeu de caractères ?
text/plain ou text/html qui contiennent des caractères non ASCII, oui : ajoutez ;charset=UTF-8 après le type de média, sinon la valeur par défaut US-ASCII risque de les altérer. Les types binaires comme image/png n’ont pas besoin de jeu de caractères.