Générateur de Data URI
Convertissez n'importe quel fichier ou texte en data URI avec le bon type MIME, en Base64 ou encodé en pourcentage, avec extraits <img> et fond CSS prêts à l'emploi. En local.
Qu'est-ce que Générateur de Data URI ?
Une data URI intègre un fichier directement dans du HTML, du CSS ou du JSON sous la forme data:<mime>;base64,<data>, sans requête séparée. Cet outil convertit n'importe quel fichier (images, polices, SVG, PDF…) ou du texte saisi en data URI, détecte le type MIME, vous laisse choisir Base64 ou l'encodage en pourcentage et fournit des extraits HTML et CSS correspondants.
Comment utiliser Générateur de Data URI
- Choisissez Fichier et déposez un fichier, ou choisissez Texte et saisissez le contenu.
- Vérifiez ou modifiez le Type MIME.
- Laissez l'Encodage Base64 activé pour les fichiers binaires ; désactivez-le pour encoder en pourcentage le texte et le SVG (souvent plus court).
- Copiez la Data URI ou l'extrait HTML / CSS.
Exemple
Text: Hello, World! (Base64 on)
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==
Quand utiliser Générateur de Data URI
Utilisez les data URI pour de petites ressources : icônes, minuscules SVG, images placeholders, polices dans des démos en un seul fichier ou des modèles d'e-mails, et jeux de données de test. Évitez-les pour des fichiers de plus de quelques kilo-octets sur des sites web : Base64 ajoute environ 33 % à la taille et les données intégrées ne peuvent pas être mises en cache séparément de la page ou de la feuille de style.
Comment fonctionne Générateur de Data URI
Le fichier est lu sous forme d'octets dans le navigateur. Le type MIME provient du navigateur ou de l'extension du fichier. Avec Base64, les octets sont encodés avec l'alphabet standard (RFC 4648) et écrits sous la forme data:<mime>;base64,… (RFC 2397). Sans Base64, le contenu est décodé en UTF-8 et échappé avec encodeURIComponent, et ;charset=utf-8 est ajouté pour les types texte. Un aperçu est affiché pour les images, ainsi que la taille du résultat.
Cas d'utilisation courants
- Intégrer une petite icône SVG dans un background-image CSS
- Intégrer des images dans un rapport HTML en un seul fichier
- Placer une minuscule image dans un jeu de données d'API JSON
- Créer une image de signature d'e-mail autonome
Questions Fréquentes
Pourquoi la data URI est-elle plus grande que mon fichier ?
Base64 encode chaque groupe de 3 octets en 4 caractères : le résultat est donc environ 33 % plus grand. L'encodage en pourcentage du texte ou du SVG est souvent plus court.
Mon fichier est-il téléversé ?
Non. Le fichier est lu et encodé entièrement dans votre navigateur.
Quelle est la limite de taille ?
L'outil accepte des fichiers jusqu'à 20 Mo, mais les navigateurs et clients de messagerie gèrent mal les grandes data URI ; gardez-les petites.