Intégrer vite les petits fichiers
Icônes, SVG de remplacement, pixels et textes courts peuvent être embarqués directement.
Outil développeur gratuit
Générateur de Data URI Ressources inline pour HTML et CSS
Générateur de Data URI gratuit pour les développeurs frontend. Importez PNG, JPEG, SVG, polices ou collez du texte, puis créez des Data URI Base64 ou encodées URL pour HTML img src, CSS background-image et ressources inline.
AD
Générateur de Data URI Problèmes résolus par
Le générateur de Data URI aide à intégrer de petites ressources frontend avec le bon MIME, le bon encodage et le bon extrait.
Éviter les erreurs MIME
Vérifiez ou modifiez le type MIME avant de copier un extrait de production.
Garder les ressources privées
Les fichiers sont lus dans le navigateur sans envoi serveur.
Générateur de Data URI Fonctionnalités de
Le générateur de Data URI réunit import, collage, Base64, URL encodé, aperçu et extraits prêts à copier.
Fichier ou texte
Ajoutez PNG, JPEG, WebP, SVG, texte, JSON, CSS, WOFF ou WOFF2.
Choix automatique
URL encodé pour SVG et texte, Base64 pour binaire, images et polices.
MIME modifiable
Remplacez le type si le navigateur ne le fournit pas correctement.
Trois sorties
Copiez Data URI, CSS background-image ou HTML img src.
Aperçu et statistiques
Contrôlez aperçu, taille source et longueur de sortie.
Flux local
Générez et copiez sans téléverser de fichier.
Comment utiliser Générateur de Data URI
Convertissez une petite image, un SVG, une police ou du texte en extraits HTML et CSS.
01
Ajoutez la ressource
Collez du texte ou importez un PNG, JPEG, SVG, une police ou un fichier texte.
- Traitement local, sans envoi
02
Vérifiez le MIME
Confirmez image/png, image/jpeg, image/svg+xml, text/plain, font/woff2 ou autre.
- Traitement local, sans envoi
03
Choisissez l’encodage
Gardez Auto ou forcez Base64 / URL encodé selon le projet.
- Traitement local, sans envoi
04
Copiez l’extrait
Utilisez la Data URI, CSS background-image ou HTML img src dans votre code.
- Traitement local, sans envoi
Générateur de Data URI Flux de travail
Des flux pratiques pour icônes, SVG, polices et petits textes.
Importer de petits assets
Déposez PNG, JPEG, SVG, WOFF2 ou texte pour préparer une sortie inline.
Choisir l’encodage
Utilisez Auto ou imposez le format attendu par HTML, CSS ou un prototype.
Copier les snippets
Copiez CSS background-image, HTML img src ou Data URI simple.
Générateur de Data URI Cas d’utilisation de
Utile quand une petite ressource doit vivre dans HTML ou CSS plutôt que dans une requête séparée.
Icônes SVG inline
Encodez un petit SVG et collez-le dans CSS ou HTML.
Prototypes en un fichier
Emballez images et textes dans un prototype HTML unique.
Docs et e-mails
Préparez de petites Data URI pour exemples et tests contrôlés.
Générateur de Data URI FAQ de
Questions sur MIME, encodage et traitement local.
Le générateur envoie-t-il mes fichiers ?
Non, les fichiers sont lus par les API du navigateur et traités localement.
Quand utiliser Base64 ?
Pour PNG, JPEG, WebP, polices et autres ressources binaires.
Quand utiliser URL encodé ?
Pour SVG, CSS, JSON et texte, c’est souvent plus lisible.
Convient-il aux gros fichiers ?
Non, les Data URI sont meilleures pour les petits assets.
Commencer avec Générateur de Data URI
Importez ou collez une ressource, choisissez Base64 ou URL encodé, puis copiez les Data URI pour HTML et CSS.
Gratuit pour toujours - générateur de Data URI dans le navigateur.