Découvrez quand utiliser cet outil, ce qu'il prend en charge et comment les utilisateurs l'appliquent.
Points clés
Catégorie
Development
Types d’entrée
file, select, text
Type de sortie
text
Exemples associés
4
API disponible
Oui
Aperçu
Le Générateur de Data URI vous permet de convertir instantanément vos fichiers en chaînes Data URI encodées en Base64 ou en pourcentage. Intégrez directement vos images, polices et autres ressources dans vos fichiers HTML, CSS ou Markdown afin de réduire le nombre de requêtes HTTP et d'optimiser le chargement de vos pages web.
Quand l’utiliser
Lors de l'intégration de petites images ou d'icônes directement dans une feuille de style CSS ou un fichier HTML.
Pour incorporer des polices de caractères (comme le WOFF2) directement dans le CSS afin d'éviter les effets de texte non stylisé au chargement.
Pour concevoir des documents HTML ou des e-mails entièrement autonomes contenant toutes leurs ressources graphiques sans dépendances externes.
Fonctionnement
1Sélectionnez ou déposez le fichier à convertir (image, police, document) dans la zone de saisie.
2Choisissez le type d'encodage (Base64, URL-encodé ou brut) et le format de sortie souhaité (Data URI seul, balise HTML, CSS ou Markdown).
3Copiez le code généré directement dans votre presse-papiers pour l'insérer dans votre projet.
Cas d’usage
Intégration d'icônes SVG dans une feuille de style CSS via la propriété background-image.
Inclusion de polices web (WOFF2) dans un fichier CSS pour un rendu immédiat sans clignotement.
Création de signatures d'e-mail HTML contenant des logos intégrés sans hébergement externe.
Exemples
1. Intégration d'un logo SVG dans du CSS
Développeur Front-End
Contexte
Un développeur souhaite intégrer un logo SVG dans le fichier CSS d'un site web pour éviter une requête HTTP supplémentaire lors du chargement de la page d'accueil.
Problème
Convertir le fichier SVG en une chaîne utilisable directement dans la propriété background-image du CSS.
Utilisation
Charger le fichier logo.svg, sélectionner l'encodage 'URL-encodé' et choisir le format de sortie 'CSS background'.
Fichier: logo.svg, Encodage: url, Format de sortie: css
Résultat
Le développeur obtient un code CSS prêt à l'emploi du type background-image: url("data:image/svg+xml;utf8,...") qu'il colle directement dans sa feuille de style.
2. Intégration d'une police WOFF2 dans une feuille de style
Concepteur Web
Contexte
Un concepteur web veut s'assurer qu'une police de caractères personnalisée se charge instantanément sans provoquer de décalage de mise en page (CLS).
Problème
Convertir le fichier de police WOFF2 en Base64 pour l'intégrer directement dans la règle @font-face.
Utilisation
FAQ
Qu'est-ce qu'un Data URI ?
C'est un schéma d'URI qui permet d'inclure les données d'un fichier directement en ligne dans le code source d'un document web comme le HTML ou le CSS.
Quelle est la taille maximale de fichier acceptée ?
Le générateur accepte des fichiers d'une taille maximale de 10 Mo.
Quel encodage dois-je choisir pour un fichier SVG ?
Pour les fichiers SVG, l'encodage URL (pourcentage) est recommandé car il produit un code plus court et plus lisible que le Base64.
Puis-je forcer un type MIME spécifique ?
Oui, vous pouvez saisir un type MIME personnalisé dans le champ dédié pour remplacer la détection automatique du fichier.
L'utilisation de Data URI améliore-t-elle les performances ?
Oui, pour les petits fichiers, car cela élimine les requêtes HTTP supplémentaires, bien que cela augmente légèrement la taille du fichier HTML ou CSS hôte.