Qu'est-ce qu'un Data URI d'image Base64 ?

Un Data URI intègre une image directement dans une chaîne comme data:image/png;base64,XXXX. Les octets de l'image sont encodés en Base64, vous pouvez donc placer l'image entière dans un src HTML ou un url() CSS sans fichier ni requête distincts.

Quels formats d'image puis-je encoder ?

Toute image que votre navigateur peut lire — PNG, JPEG, WebP, GIF, SVG, BMP, AVIF et ICO fonctionnent. Le décodeur lit le type MIME du Data URI et propose une extension de téléchargement adaptée.

Dois-je intégrer les images en Base64 ?

L'intégration convient aux petites ressources très réutilisées comme les icônes ou les images d'e-mail, où éviter une requête aide. Pour les images plus grandes, c'est généralement néfaste, car le Base64 ajoute environ un tiers à la taille et les données ne peuvent pas être mises en cache seules.

Puis-je décoder un Data URI en fichier image ?

Oui. Passez à Base64 → Image, collez la chaîne data:image/…;base64, et l'outil prévisualise l'image et vous permet de la télécharger avec la bonne extension de fichier.

Mes images sont-elles envoyées quand je les encode ?

Non. L'encodeur lit le fichier avec le FileReader du navigateur et construit le Data URI sur votre appareil. Rien n'est envoyé à ArrayKit ni à aucun serveur.

Pourquoi la chaîne Base64 est-elle plus grande que mon image ?

Le Base64 représente trois octets avec quatre caractères, donc le texte encodé est environ 33% plus grand que le binaire d'origine, plus le court préfixe data:…;base64,. Ce surcoût est normal et attendu.

Encodeur / décodeur d’images Base64

Convertissez des images en Data URIs Base64 avec des extraits HTML et CSS, ou décodez un Data URI en image téléchargeable.

L'encodeur / décodeur d'images Base64 fonctionne entièrement dans votre navigateur. Les images que vous déposez et les Data URIs que vous collez sont traités sur votre appareil et ne sont jamais envoyés à ArrayKit.

Ouvrir l'encodeur / décodeur Base64

À propos de Encodeur / décodeur d’images Base64

L'encodeur d'images Base64 transforme n'importe quelle image en un Data URI Base64 que vous collez directement dans du HTML ou du CSS. Déposez un PNG, JPEG, WebP, SVG ou GIF et il affiche aussitôt le Data URI ainsi que des extraits prêts pour la production — une balise <img> avec un texte alternatif modifiable et une règle CSS background-image —, chacun avec copie en un clic. Il indique aussi le type MIME, la taille du fichier, les dimensions en pixels et la longueur de la chaîne, pour que vous sachiez exactement ce que vous intégrez. Passez en mode décodage pour coller un Data URI, prévisualiser l'image et la télécharger avec la bonne extension de fichier. Il est conçu pour les développeurs front-end, les auteurs d'e-mails et de modèles, et toute personne qui intègre de petites icônes pour économiser une requête. Tout fonctionne localement dans votre navigateur, vos images restent donc sur votre appareil.

Fonctionnalités

Glissez-déposez ou cliquez pour encoder PNG, JPEG, WebP, SVG et GIF en un Data URI Base64
Copie en un clic du Data URI brut, d'une balise HTML <img> prête et d'une règle CSS background-image
Texte alternatif modifiable qui s'insère directement dans l'extrait <img> généré pour l'accessibilité
Affiche le type MIME, la taille du fichier, les dimensions en pixels et la longueur du Data URI d'un coup d'œil
Le mode décodage colle un Data URI pour prévisualiser l'image et la télécharger avec la bonne extension
Avertit quand une image est trop grande pour être intégrée efficacement en Base64
Gère le SVG et le GIF autant que les photos matricielles, avec des extensions de téléchargement adaptées
Fonctionne entièrement dans votre navigateur, les images ne sont donc jamais envoyées à un serveur

Comment utiliser Encodeur / décodeur d’images Base64

Gardez l'onglet Image → Base64 sélectionné et déposez une image dans la zone de dépôt
Copiez le Data URI Base64, la balise HTML <img> ou la règle CSS background-image
Saisissez éventuellement un texte alternatif pour l'inclure dans l'extrait <img>
Passez à Base64 → Image, collez un Data URI, puis prévisualisez et téléchargez l'image

Exemple

Entrée

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB…

Sortie

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB…" alt="logo" />

Un PNG devient une balise <img> en ligne qui se charge sans requête réseau supplémentaire.

Erreurs courantes et dépannage

Coller un Data URI affiche 'The Data URI payload is not valid Base64.' — Copiez toute la chaîne commençant par data:image/… et incluant ';base64,', et supprimez les guillemets ou retours à la ligne ajoutés par votre éditeur.
L'image décodée ne s'affiche pas. — Vérifiez que le type MIME correspond aux données — un contenu PNG étiqueté image/jpeg ne s'affiche pas. Réencodez le fichier d'origine pour obtenir un Data URI correct.
Mon fichier HTML ou CSS a beaucoup grossi après l'intégration d'une image. — Le Base64 ajoute environ 33% de surcoût et les images intégrées ne sont pas mises en cache séparément. N'intégrez que de petites icônes et liez les images plus grandes comme des fichiers normaux.
Un Data URI de SVG provenant d'un autre outil semble différent. — Certains outils encodent les SVG en pourcentage plutôt qu'en Base64. Cet encodeur utilise toujours Base64 ; les deux sont des Data URIs valides mais ne sont pas interchangeables octet par octet.

Foire aux questions

Qu'est-ce qu'un Data URI d'image Base64 ?: Un Data URI intègre une image directement dans une chaîne comme data:image/png;base64,XXXX. Les octets de l'image sont encodés en Base64, vous pouvez donc placer l'image entière dans un src HTML ou un url() CSS sans fichier ni requête distincts.
Quels formats d'image puis-je encoder ?: Toute image que votre navigateur peut lire — PNG, JPEG, WebP, GIF, SVG, BMP, AVIF et ICO fonctionnent. Le décodeur lit le type MIME du Data URI et propose une extension de téléchargement adaptée.
Dois-je intégrer les images en Base64 ?: L'intégration convient aux petites ressources très réutilisées comme les icônes ou les images d'e-mail, où éviter une requête aide. Pour les images plus grandes, c'est généralement néfaste, car le Base64 ajoute environ un tiers à la taille et les données ne peuvent pas être mises en cache seules.
Puis-je décoder un Data URI en fichier image ?: Oui. Passez à Base64 → Image, collez la chaîne data:image/…;base64, et l'outil prévisualise l'image et vous permet de la télécharger avec la bonne extension de fichier.
Mes images sont-elles envoyées quand je les encode ?: Non. L'encodeur lit le fichier avec le FileReader du navigateur et construit le Data URI sur votre appareil. Rien n'est envoyé à ArrayKit ni à aucun serveur.
Pourquoi la chaîne Base64 est-elle plus grande que mon image ?: Le Base64 représente trois octets avec quatre caractères, donc le texte encodé est environ 33% plus grand que le binaire d'origine, plus le court préfixe data:…;base64,. Ce surcoût est normal et attendu.

Outils associés

Encoder / Décoder Base64 — Encodage et décodage Base64 sûrs en UTF-8.
Convertisseur de format d’image — Convertit les images entre PNG, JPEG et WebP entièrement dans votre navigateur.
Optimiseur d’images — Réencode et réduit les images (JPEG/WebP/PNG), avec redimensionnement optionnel.
Optimiseur SVG — Minifie le SVG : supprime commentaires, métadonnées et résidus d’éditeur, et réduit les espaces.
Visionneuse et nettoyeur EXIF — Affichez et supprimez les métadonnées EXIF (GPS inclus) des photos ; rien n’est envoyé.
Encoder / Décoder URL — Encode et décode des composants d’URL.
Générateur de code QR — Génère un code QR à partir d’un texte ou d’une URL ; téléchargez-le en PNG ou SVG.