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

Click to upload file or drag and drop file here

Maximum file size: 10MB Supported formats: image/png, image/jpeg, image/gif, image/webp, image/avif, image/bmp, image/svg+xml, image/x-icon, image/tiff, audio/mpeg, audio/wav, audio/ogg, audio/flac, video/mp4, video/webm, font/woff, font/woff2, font/ttf, font/otf, application/pdf, text/css, text/javascript, text/plain, text/html, application/json, application/xml, */*

Points clés

Catégorie
Développement et Web
Types d’entrée
file, select, text
Type de sortie
text
Couverture des échantillons
4
API disponible
Yes

Vue d’ensemble

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.

Comment ça marche

  • •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.

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.
Comment l’utiliser
Charger le fichier logo.svg, sélectionner l'encodage 'URL-encodé' et choisir le format de sortie 'CSS background'.
Configuration d’exemple
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.
Comment l’utiliser
Charger le fichier custom-font.woff2, conserver l'encodage 'Base64' et sélectionner le format de sortie 'Data URI uniquement'.
Configuration d’exemple
Fichier: custom-font.woff2, Encodage: base64, Format de sortie: data-uri
Résultat
Une chaîne Data URI Base64 est générée, permettant d'écrire src: url(data:font/woff2;base64,...) format('woff2') directement dans le CSS.

Tester avec des échantillons

json, xml, html
Exemples PDF
Exemples PDF generes par les outils du 2026-02-01 au 2026-02-10
preferred input family image,pdf,text
image, pdf
Exemples de Communication Temps Réel WebRTC
Exemples complets WebRTC pour communication audio/vidéo P2P, canaux de données, partage d'écran et serveur de signalisation
preferred input family audio,video,text
audio, video
Exemples de Codes QR
Images de codes QR d'exemple pour tester les outils de lecture et de génération de codes QR
preferred input family image,text,json
image, text
Exemples XML
Exemples de format XML (eXtensible Markup Language) de structures simples à complexes
preferred input family image,text,xml
image, text

Hubs associés

Outils d encodage et de conversion audio
Comparez la conversion de formats audio, les changements de debit, la conversion de frequence d echantillonnage, les changements de codec et les exports dans un meme hub.
Outils de conversion de formats d image et d export anime
Comparez les convertisseurs d image pour JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 et les exports orientes animation dans un meme hub.
Outils d interchange JSON et de traduction de formats
Comparez les outils de conversion JSON pour CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN et d autres formats structures dans un meme hub.
Outils de conversion de casse, d’encodage et de normalisation de texte
Comparez les outils de conversion de casse, de largeur de caractères, d’encodage, de quoted-printable et de normalisation de texte dans un hub unique.

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.

Documentation de l'API

Point de terminaison de la requête

POST /fr/api/tools/data-uri-generator

Paramètres de la requête

Nom du paramètre Type Requis Description
file file (Téléchargement requis) Oui -
encoding select Non -
outputFormat select Non -
customMime text Non -

Les paramètres de type fichier doivent être téléchargés d'abord via POST /upload/data-uri-generator pour obtenir filePath, puis filePath doit être passé au champ de fichier correspondant.

Format de réponse

{
  "result": "Processed text content",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
Texte: Texte

Documentation de MCP

Ajoutez cet outil à votre configuration de serveur MCP: 

{
  "mcpServers": {
    "elysiatools-data-uri-generator": {
      "name": "data-uri-generator",
      "description": "Convertit les fichiers en Data URI (Base64 ou pourcentage-encodé) pour intégrer images, polices et ressources directement dans HTML, CSS ou Markdown",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=data-uri-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Vous pouvez chaîner plusieurs outils, par ex.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, max 20 outils.

Prend en charge les liens de fichiers URL ou la codification Base64 pour les paramètres de fichier.

Si vous rencontrez des problèmes, veuillez nous contacter à [email protected]