Qu'est-ce que Générateur de Data URI ?

Le Générateur de Data URI convertit des fichiers en Data URI encodés en base64, intégrables directement dans du HTML, CSS ou JavaScript. Élimine les requêtes HTTP supplémentaires pour les petites ressources comme les icônes et les polices.

Glissez un fichier jusqu'à 20 Mo et l'outil détecte le type MIME, encode les octets en base64 et fournit trois extraits prêts à coller : la data URI brute, la règle CSS background-image et la balise HTML img. Les images sont accompagnées d'un aperçu en direct pour repérer une sortie blanche ou corrompue avant de la mettre en production. Vous pouvez aussi coller du texte pour encoder une chaîne SVG ou JSON, réduire les grandes images avant l'encodage pour garder une URI compacte, corriger le type MIME s'il a été mal détecté, encoder plusieurs fichiers d'un coup, récupérer un fichier distant directement depuis son URL, ou passer en mode décodage pour coller une data URI et retrouver le fichier d'origine.

Comment utiliser

1. Importez un fichier via le sélecteur, ou passez en mode texte et collez une chaîne (SVG, JSON, CSS) à encoder.
2. L'outil l'encode en base64 et génère la Data URI complète avec le type MIME approprié.
3. Copiez la Data URI pour l'utiliser dans les attributs img src, les CSS background-image ou le code JavaScript.

Quand l'utiliser

• Intégrer un petit logo ou icône dans une démo HTML mono-fichier sans hébergement.
• Embarquer des images dans un mail pour qu'elles s'affichent même si le chargement distant est bloqué.
• Coller une police ou un SVG dans un CSS pour supprimer une requête bloquante au rendu.

Résultat

Convertissez un favicon.png de 2 Ko en Data URI et collez-le directement dans votre HTML — une requête réseau de moins à chaque chargement de page.

FAQ

Pourquoi la data URI encodée pèse environ 33 % de plus que le fichier ?

Base64 représente 3 octets binaires par 4 caractères ASCII, soit 33 % d'augmentation. Gzip dans la réponse HTTP en récupère l'essentiel, mais le fichier HTML ou CSS sur le disque reste plus lourd que la ressource originale.

Quelle est la taille raisonnable pour une data URI ?

Environ 10 Ko avant encodage pour un usage inline. Au-delà, le navigateur traite toujours, mais on perd le cache (le contenu est réanalysé à chaque page) et les HTML ou CSS deviennent pénibles à modifier. Pour des ressources plus lourdes, mieux vaut héberger normalement.

Peut-on utiliser une data URI comme image de fond CSS ?

Oui, l'outil fournit la règle CSS prête à l'emploi. On enveloppe la URI dans url() à l'intérieur de background-image. Le navigateur la décode au premier rendu, l'icône reste inline et on évite une requête réseau qui retarderait l'affichage initial.

Le navigateur met-il en cache une data URI comme une image normale ?

Non. La data URI fait partie du document parent, elle n'est mise en cache qu'avec lui. La même image référencée dans vingt pages est rédécode vingt fois. Pour des ressources partagées entre pages, une URL hébergée classique reste plus rapide au global.

Les data URIs fonctionnent-elles dans les e-mails HTML ?

Gmail et Apple Mail les affichent. Outlook (version Windows bureau) les supprime. Pour une compatibilité large, joindre l'image comme partie référencée par CID est plus fiable que d'inclure une data URI dans le corps HTML.

Outils similaires