Dans cet article
Que sont les data URIs ?
Un data URI (Uniform Resource Identifier) est un schema qui permet d'integrer le contenu d'un fichier directement dans une chaine URL au lieu de lier vers un fichier externe. Defini par la RFC 2397, les data URIs encodent le contenu en ligne en utilisant le format data:[mediatype][;base64],data. Cela elimine la necessite d'une requete HTTP separee pour recuperer la ressource.
Les data URIs sont couramment utilises pour integrer de petites images, polices, SVGs et autres ressources directement dans le HTML ou CSS. Au lieu de referencer un fichier externe avec une URL, le contenu entier du fichier est encode (generalement en base64) et place en ligne. Cela peut reduire les requetes HTTP et simplifier le deploiement pour les petites ressources.
Comment creer des data URIs
Un generateur de data URI convertit le contenu d'un fichier ou du texte au format data URI. Le processus implique l'identification du type MIME et l'encodage du contenu.
- Saisie de texte — entrez du texte directement et specifiez le type MIME (text/plain, text/html, text/css, application/json). Le texte peut etre encode en URL ou en base64
- Telechargement de fichier — telechargez n'importe quel fichier (images, polices, SVGs, documents) et le generateur determine automatiquement le type MIME et encode le contenu en base64
- Selection du type MIME — le type de media indique au navigateur comment interpreter les donnees. Les types courants incluent image/png, image/svg+xml, text/css et application/javascript
Essayez gratuitement — sans inscription
Generer un data URI →Quand utiliser les data URIs
Les data URIs sont les plus benefiques pour les petites ressources frequemment utilisees ou l'elimination d'une requete HTTP ameliore les performances.
- Images d'arriere-plan CSS — integrez de petites icones ou motifs directement dans le CSS pour eviter des requetes supplementaires. Ideal pour les images de moins de 2-4 Ko
- SVGs en ligne dans le CSS — integrez des icones SVG comme data URIs dans les proprietes background-image quand le SVG ne peut pas etre place directement dans le HTML
- Templates HTML d'emails — integrez les images directement dans le HTML d'email car de nombreux clients email bloquent les images externes par defaut
Questions frequemment posees
Y a-t-il une limite de taille pour les data URIs ?
Il n'y a pas de limite stricte dans la specification, mais des limites pratiques existent. La plupart des navigateurs modernes gerent les data URIs jusqu'a plusieurs megaoctets, mais Internet Explorer (ancien) les limitait a 32 Ko. L'encodage base64 augmente la taille des donnees d'environ 33%. Pour les ressources de plus de 5-10 Ko, les fichiers externes avec mise en cache appropriee sont generalement plus efficaces.
Les data URIs affectent-ils les performances ?
Pour les petites ressources, les data URIs ameliorent les performances en eliminant les requetes HTTP. Cependant, les donnees encodees en base64 sont environ 33% plus grandes que le fichier original, et les data URIs ne peuvent pas etre mis en cache independamment par le navigateur. Pour les gros fichiers, les fichiers externes avec en-tetes de cache sont plus performants.
Les data URIs sont-ils securises ?
Les data URIs ont des implications de securite. La plupart des navigateurs bloquent l'execution JavaScript dans les data URIs. Cependant, les data URIs peuvent contourner les regles de Content Security Policy (CSP) si elles ne sont pas configurees correctement. Lors de l'acceptation de data URIs generes par les utilisateurs, validez toujours le type MIME.