Image en data URI
Transformez une image en data URI complète, prête à coller dans un attribut src HTML ou une valeur CSS url().
Image en data URI convertit un fichier image en data URI : une seule ligne de texte qui contient à la fois le type de fichier et l’image encodée en Base64. Vous pouvez la coller directement dans un attribut src d’une balise img ou dans une valeur CSS url(), et l’image s’affiche sans fichier séparé. Le type MIME du préfixe est repris de votre fichier, et les octets de l’image ne sont pas modifiés.
Comment utiliser Image en data URI
- 1
Ouvrez une image
Déposez, choisissez ou collez n’importe quel fichier image, comme une icône, un logo ou un petit graphique.
- 2
Récupérez la data URI
La data URI complète, qui commence par data:image/, apparaît avec sa longueur et sa taille approximative.
- 3
Copiez-la
Cliquez sur Copier la data URI, ou utilisez Copier le HTML ou Copier le CSS pour un extrait prêt à l’emploi.
- 4
Collez-la dans votre page
Utilisez-la partout où une URL d’image classique fonctionne, comme une balise img ou un fond CSS.
Ce que fait l’outil
- Type MIME correct
- Le préfixe correspond à votre fichier, par exemple image/png, image/jpeg ou image/svg+xml.
- Octets d’origine
- Le fichier est encodé tel quel : la qualité et la taille ne changent pas à cause d’une recompression.
- Extraits prêts à copier
- Obtenez une balise img complète ou une règle background-image avec la data URI déjà intégrée.
- Confidentiel
- La data URI est créée dans votre navigateur : l’image n’est pas envoyée.
Questions
Qu’est-ce qu’une data URI ?
Une data URI est un lien qui contient le fichier lui-même au lieu de pointer vers lui. Pour une image, elle commence par data:image/png;base64, ou un préfixe similaire, et le navigateur l’affiche comme une URL d’image classique.
Comment utiliser une data URI en CSS ?
Cliquez sur Copier le CSS pour obtenir une règle background-image avec l’URI complète dans url(), puis collez-la dans votre feuille de style.
Quand faut-il éviter les data URI ?
Évitez-les pour les grandes images et pour les images utilisées sur de nombreuses pages. Le texte encodé est environ un tiers plus lourd que le fichier, et le navigateur ne peut pas le mettre en cache séparément.
Les images en data URI fonctionnent-elles dans les e-mails ?
Cela dépend. Beaucoup de logiciels de messagerie, dont certains webmails, n’affichent pas les images en data URI : testez votre e-mail ou utilisez une image hébergée en ligne.
Quels types d’image sont pris en charge ?
Toutes les images que votre navigateur sait ouvrir, comme JPG, PNG, GIF, WebP, AVIF et SVG. Les photos HEIC d’iPhone sont d’abord converties en PNG : leur data URI utilise donc image/png.