# Générateur de Data URI Convertit les fichiers en Data URI (Base64 ou pourcentage-encodé) pour intégrer images, polices et ressources directement dans HTML, CSS ou Markdown > Page canonique: https://elysiatools.com/fr/tools/data-uri-generator - **Catégorie:** Development - **Mots-clés:** data uri, base64, inline, intégrer, image, police, css, html, data url ## Présentation 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. ## Entrées - **Fichier** (file) - **Encodage** (select) - **Format de sortie** (select) - **Type MIME** (text): Auto-detected (e.g. image/png). Override only if needed. ## 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 - Sélectionnez ou déposez le fichier à convertir (image, police, document) dans la zone de saisie. - Choisissez le type d'encodage (Base64, URL-encodé ou brut) et le format de sortie souhaité (Data URI seul, balise HTML, CSS ou Markdown). - Copiez 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. ## Questions fréquentes ### 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. ## Outils associés - [Séquence d'Images en Vidéo](https://elysiatools.com/fr/tools/image-sequence-to-video): Convertir des images ou une archive ZIP de frames en vidéo avec tri naturel par nom - [Planche Contact PDF](https://elysiatools.com/fr/tools/pdf-photo-contact-sheet): Genere une planche contact avec miniatures, noms de fichiers et EXIF - [Feuille Storyboard PDF](https://elysiatools.com/fr/tools/pdf-storyboard-sheet): Genere des feuilles storyboard avec vignette et zone de description - [Outil d'Opacité de Filigrane](https://elysiatools.com/fr/tools/image-watermark-opacity): Ajoutez des filigranes avec opacité personnalisée aux images, supportant des filigranes de texte et d'image avec des contrôles avancés d'opacité - [Conversion d'Images en Lot](https://elysiatools.com/fr/tools/batch-convert): Convertir plusieurs images en différents formats avec paramètres de qualité - [Convertisseur de profondeur d’image vers PNG](https://elysiatools.com/fr/tools/image-to-bit-depth-png): Convertit les images vers des profondeurs PNG monochromes, indexées, grises, RGB ou RGBA exactes avec vérification. - [Fragments En-tête/Pied PDF](https://elysiatools.com/fr/tools/pdf-header-footer-snippets): Convertit HTML en PDF avec des fragments logo, titre et date - [De la palette d’image aux design tokens](https://elysiatools.com/fr/tools/image-to-design-tokens): Extrait les couleurs dominantes d’une image par k-means et les exporte en variables CSS / SCSS / config Tailwind / tokens JSON, avec noms et échelle de teintes ## Exemples - [Exemples de Traitement d'Images Web TypeScript](https://elysiatools.com/fr/samples/web-image-processing-typescript): Exemples de traitement d'images Web TypeScript incluant lecture/sauvegarde, redimensionnement et conversion de format - [Exemples de Traitement d'Images Web Rust](https://elysiatools.com/fr/samples/web-image-processing-rust): Exemples de traitement d'images Web Rust incluant lecture/écriture, redimensionnement et conversion de format - [Exemples PDF](https://elysiatools.com/fr/samples/pdf-samples): Exemples PDF generes par les outils du 2026-02-01 au 2026-02-10 - [Exemples de Communication Temps Réel WebRTC](https://elysiatools.com/fr/samples/webrtc-samples): Exemples complets WebRTC pour communication audio/vidéo P2P, canaux de données, partage d'écran et serveur de signalisation