appuyez sur ⌘K pour changer d’outil
IMAGE

Convertisseur Image → Data URI

Convertit un fichier image en Data URI encodé en base64.

local
image-datauri

🖥 Images are encoded locally in your browser — never uploaded.

§01 À PROPOS DE CET OUTIL

Présentation

Un Data URI intègre le contenu d’un fichier directement dans une URL, sous la forme data:<type-mime>;base64,<données>. Cet outil convertit n’importe quelle image dans cette forme pour l’inclure dans un <img src>, une background-image CSS ou une charge utile JSON. Le fichier est lu par FileReader.readAsDataURL dans votre navigateur ; rien n’est téléversé. Après conversion, vous obtenez le nom du fichier, la taille d’origine, la taille encodée, un aperçu rendu et l’URI complète prête à copier.

Utilisation

  1. Cliquez sur Choose image et sélectionnez un fichier. La conversion a lieu immédiatement.
  2. Vérifiez la ligne d’information (nom, Ko source, Ko du Data URI) et l’aperçu pour confirmer que la bonne image a été encodée.
  3. Appuyez sur Copy pour placer le Data URI complet dans votre presse-papiers.

Exemples

  • Un PNG de favicon de 1 Ko devient une chaîne commençant par data:image/png;base64,iVBORw0KGgo… que vous pouvez coller dans <link rel="icon" href="…">.
  • Intégrer une petite icône de flèche dans du CSS : background-image: url("data:image/svg+xml;base64,…") pour éliminer une requête.

Remarques

Les Data URI ne sont pas mis en cache séparément du document qui les contient, et des chaînes très longues peuvent ralentir les éditeurs et les diffs. Réservez cette technique aux éléments de quelques kilooctets.

FAQ
Mon image est-elle envoyée à un serveur ?
Non. Le fichier est lu avec l'API FileReader du navigateur et encodé localement. Rien n'est téléversé.
Pourquoi le Data URI est-il plus volumineux que le fichier d'origine ?
Le Base64 représente chaque groupe de 3 octets de données binaires par 4 caractères ASCII : la chaîne encodée est donc environ 33 % plus grande que le fichier source. L'outil affiche les deux tailles pour comparer, par exemple « logo.png · 4.2 KB · Data URI 5.6 KB ».
Quand faut-il intégrer des images en Data URI ?
Pour de petits éléments (icônes, logos minuscules, solutions de repli SVG en ligne) où l'économie d'une requête HTTP l'emporte sur le surcoût de taille. Les grandes images sont généralement mieux servies comme fichiers séparés, car les Data URI alourdissent le HTML/CSS et ne peuvent pas être mis en cache indépendamment.