Skip to content

Image en Base64 (et retour)

Encodez n'importe quelle image en URI de données, ou collez une URI et voyez l'image.

Les URI de données Base64 vous permettent d'intégrer une image dans le HTML, CSS ou JSON sans fichier séparé. Utile pour les petites icônes SVG, les signatures e-mail intégrées, les charges utiles JWT qui incluent un avatar, ou n'importe où une demande réseau serait plus de problèmes que cela ne vaut. L'outil ci-dessous code ou décode les images entièrement dans votre navigateur en utilisant le FileReader standard et atob/btoa API.

Everything happens locally — the FileReader API runs entirely in your browser. No upload, no analytics on the file contents.

How to use

  1. Choisissez une direction

    « Image → Base64 » code un fichier que vous déposez. « Base64 → Image » décode une URI de données que vous collez.

  2. Déposez ou collez

    Glissez un fichier sur la zone de dépôt (encodage) ou collez l'URI de données dans la zone de texte (décodage). Les fichiers jusqu'à 8 Mo sont acceptés.

  3. Copiez ou enregistrez le résultat

    La sortie codée est une URI de données complète prête à placer dans <img src="…">, CSS background-image: url(…) ou JSON. L'aperçu décodé s'affiche sous le champ de collage.

Frequently asked questions

L'image est-elle téléchargée quelque part ?
Non. La conversion s'effectue dans votre navigateur via l'API FileReader — les octets ne quittent jamais la page. Il n'y a également aucun événement d'analyse qui inclut le contenu du fichier.
Pourquoi l'URI de données est-elle plus grande que le fichier ?
Le codage Base64 gonfle les données binaires d'environ 33 % (tous les 3 octets deviennent 4 caractères). Pour une image de 100 Ko, attendez-vous à environ 133 Ko de texte. C'est le coût d'incorporer les données binaires dans un conteneur de texte.
Quand devrais-je intégrer une image plutôt que de la lier ?
Quand l'image est petite (< 10 Ko), utilisée une fois, et une demande HTTP séparée ralentirait le rendu critique. Exemples : héros-section SVG, logos d'e-mail intégrés, avatars incorporés JWT. Au-delà d'environ 10 Ko, un fichier séparé est généralement plus rapide au global car il peut être mis en cache séparément.
Quel est le type MIME pour SVG ?
`image/svg+xml`. Le codeur le lit à partir de l'attribut `type` du fichier, que le navigateur définit correctement pour les formats d'image standard.
Puis-je coder des fichiers non-image ?
Ce widget est uniquement pour les images par conception (et valide le préfixe d'URI de données au décodage). Pour l'arbitraire binaire → Base64, voir /code/base64/ qui traite directement le texte UTF-8.

About

Qu'est-ce qu'une URI de données ?

Un schéma d'URI défini dans RFC 2397 qui intègre la ressource en ligne. `data:image/png;base64,iVBORw0KGgo...` déclare le type MIME, dit que la charge utile est encodée en Base64 et inclut les octets après la virgule. Les navigateurs et la plupart des analyseurs l'acceptent n'importe où une URL http(s) serait attendue dans les contextes d'image.

Vitesse d'encodage

Le `readAsDataURL` de FileReader est asynchrone et utilise l'implémentation Base64 native du navigateur. Attendez moins de 100 ms même pour les fichiers de plusieurs Mo ; le goulot d'étranglement est la lecture du fichier du disque, pas l'encodage lui-même.

Sources & references

Authoritative references behind the math, constants, and tables on this page. Verified by Buğra Sözeri on the dates shown and re-checked at every deploy.