Convertisseur d'image en Base64 et de SVG en data URI | We.Inc
Convertissez des images PNG, JPG, WebP, GIF ou SVG en data URI Base64 dans votre navigateur. Copiez-les en balise img, en arrière-plan CSS ou en JSON, obtenez une version SVG encodée en URL plus légère, et voyez si l'intégration en ligne en vaut la peine.
Le Base64 transforme les octets d'une image en texte pour qu'elle puisse être placée dans du HTML ou du CSS sous forme de data URI, par exemple src="data:image/png;base64,...". Le texte est environ un tiers plus lourd que le fichier. Déposez une image ci-dessous pour obtenir la data URI, des extraits img et CSS prêts à l'emploi, et un avis sur l'intérêt de l'intégrer en ligne.
Quand l'intégration en ligne aide et quand elle nuit
Image
L'intégrer ?
Pourquoi
Icône de moins de 4 kB
Généralement oui
Économise une requête pour un coût minime
Logo ou icône SVG
Oui, encodé en URL
Plus léger que le Base64 et toujours lisible
Image au-dessus de la ligne de flottaison, de 4 à 20 kB
Parfois
Seulement si elle n'apparaît que sur une page
Photo ou tout fichier de plus de 20 kB
Non
Alourdit chaque chargement et ne peut pas être mise en cache séparément
Déposez une ou plusieurs images. Chacune obtient sa data URI Base64 et, pour les fichiers SVG, une version encodée en URL généralement plus légère. Copiez-les en balise img, en arrière-plan CSS ou en valeur JSON. Vos fichiers ne quittent jamais votre appareil.
Déposez des images dans la zone ou cliquez pour les choisir. PNG, JPG, WebP, GIF, AVIF, ICO et SVG sont tous acceptés.
Le navigateur lit chaque fichier localement et l'encode. Rien n'est envoyé.
Comparez la taille d'origine à la taille encodée et lisez le verdict sur l'intérêt de l'intégrer en ligne.
Copiez le format dont vous avez besoin : data URI brute, balise img, background-image CSS ou JSON.
Compressez d'abord, encodez ensuite. Encoder une photo de 300 kB donne environ 400 kB de texte, ce qui est pire que le fichier de départ.
Pour le SVG, la forme encodée en URL se passe complètement du Base64. Elle est généralement plus légère et vous pouvez toujours lire et modifier le balisage.
Les data URI dans le CSS sont téléchargées avec la feuille de style, ce qui bloque l'affichage. Réservez-les aux petites icônes dont chaque page a besoin.
N'oubliez pas le texte alternatif. Une image intégrée en ligne a toujours besoin d'une description pour les lecteurs d'écran, ou de alt="" si elle est décorative.
Questions fréquentes
Pourquoi la version Base64 est-elle plus lourde que mon image ?
Le Base64 utilise quatre caractères de texte pour trois octets, donc le résultat est environ 33% plus lourd, plus quelques octets de remplissage et le préfixe data:. La compression Gzip ou Brotli de la page en récupère une partie, mais rarement la totalité.
Faut-il utiliser le Base64 pour le SVG ?
Généralement non. Le SVG est déjà du texte, il peut donc aller dans une data URI avec seulement quelques caractères échappés. Cette version est en général plus légère que le Base64 et reste lisible. N'utilisez le Base64 que si l'outil dans lequel vous collez refuse la forme encodée en URL.
Les data URI fonctionnent-elles dans les e-mails ?
La prise en charge est inégale. Plusieurs grands clients de messagerie bloquent ou suppriment les images en data URI, alors pour les newsletters, hébergez l'image et faites-y un lien, ou joignez-la avec un content ID.
Les data URI ont-elles une taille maximale ?
Les navigateurs actuels acceptent des data URI très longues dans les balises img et le CSS, bien au-delà de toute image raisonnable. La limite pratique est la performance : les grosses images intégrées ralentissent le fichier qui les contient. Certains anciens outils et clients de messagerie les tronquent bel et bien.
Comment une data URI est construite
Une data URI comporte trois parties : le schéma data:, le type de média comme image/png, et le contenu. Pour les images binaires, le contenu est en Base64 et le type est suivi de ;base64. Pour les formats texte comme le SVG, le contenu peut être le balisage lui-même avec une poignée de caractères encodés en pourcentage.
Les navigateurs traitent une data URI comme n'importe quelle autre source d'image. Elle est décodée en mémoire, donc sans requête supplémentaire, mais aussi sans entrée de cache séparée : l'image est retéléchargée à chaque fois que la page ou la feuille de style qui la contient l'est.
De meilleures options pour la plupart des images
Pour tout ce qui dépasse la taille d'une icône, un fichier normal servi en HTTP/2 ou HTTP/3 est presque toujours plus rapide. Plusieurs requêtes partagent une même connexion, l'image est mise en cache séparément, et le navigateur peut la charger en différé ou à la bonne taille avec srcset.
L'intégration en ligne reste utile pour les toutes petites icônes d'un seul composant, pour les images de substitution affichées pendant le chargement de la vraie image, et pour les fichiers HTML autonomes comme les rapports ou les démos hors ligne.
Assez petite pour être intégrée en ligne. Elle économise une requête et alourdit peu le fichier qui la contient.
Limite. Intégrez-la seulement si elle apparaît au-dessus de la ligne de flottaison sur une seule page ; sinon, un fichier normal se met mieux en cache.
Data URI
JSON
type inconnu
, {w} par {h} px
Fichier {file}, encodé {encoded} ({pct}% du fichier)
Encodage SVG
SVG encodé en URL ({size})
Base64 ({size})
Format de copie
... ({n} caractères ; utilisez Copier pour obtenir le texte complet)
Résultat pour {name}
Copier
{name} n'est pas une image, il a donc été ignoré.
Encoder des images
Déposez des images ici ou cliquez pour les choisir. Elles restent sur votre appareil.