Convertisseur de Data URI | Conversion bidirectionnelle entre fichier et Base64

Transformez toute image, police ou PDF en Data URI Base64 au schéma data:, et décodez les Data URIs existants en fichiers téléchargeables. L'outil affiche le type MIME, la taille du fichier et la longueur Base64, et prévisualise les images en ligne.

💡 À propos de cet outil

Intégrer une petite icône ou un logo sous forme de Data URI dans votre HTML ou CSS supprime une requête HTTP, ce qui économise un aller-retour au chargement de la page. C'est l'astuce classique pour background-image en CSS, les e-mails HTML et les démonstrations en un seul fichier où l'on ne veut pas de ressources externes. Le revers, c'est l'inspection : quand on tombe sur un bloc data: dans la feuille de style d'autrui, on a souvent besoin de savoir ce que c'est vraiment ou de récupérer l'image d'origine.

Ce convertisseur couvre les deux sens via un changement d'onglet. Le côté encodage accepte le glisser-déposer et indique aussitôt la longueur Base64 obtenue, pour juger si la ressource reste assez petite. Le côté décodage analyse un Data URI collé, expose le MIME et la taille décodée, prévisualise les images et exporte les octets sous forme de fichier correctement nommé en un clic.

🧐 Questions fréquentes

Q. Quels types de fichiers sont pris en charge ? Tout ce que le navigateur sait lire : images, polices, PDF, texte brut, etc. Le format Data URI lui-même ne dépend pas du type.

Q. De combien la taille augmente-t-elle avec Base64 ? Base64 gonfle les données binaires d'environ 4/3. La longueur Base64 affichée montre ce surcoût, raison pour laquelle l'intégration convient aux petites ressources de quelques Ko plutôt qu'aux gros fichiers.

Q. Peut-il lire un Data URI sans ;base64 ? Oui. Les formes encodées en pourcentage comme data:text/plain,Hello sont également analysées, et le type MIME est affiché.

Q. Quel nom reçoit le fichier décodé ? L'extension est déduite du type MIME, ce qui donne des noms comme decoded-file.png. Quand le type est inconnu, l'outil retombe sur .bin.

📚 Bonnes pratiques avec les Data URIs

Le schéma Data URI est défini par le RFC 2397 selon la forme data:[<mediatype>][;base64],<data>. Un point souvent négligé : un Data URI ne peut pas être mis en cache séparément du document qui le contient, contrairement à un fichier externe. Intégrer une icône SVG de 2 Ko est donc un gain, tandis qu'une grande image partagée sur plusieurs pages perd l'avantage du cache. Un usage répandu consiste à convertir un SVG en Data URI pour s'en servir comme fond CSS sans fichier supplémentaire, gardant le composant autonome.

Toute la lecture et la conversion des fichiers se déroulent entièrement dans votre navigateur ; rien n'est envoyé à un serveur.