Encodeur et décodeur d'images Base64 : glissez une image pour copier son Data URI avec des extraits HTML et CSS, ou collez un Data URI pour l'afficher et le télécharger.
Encodeur d'images Base64
Encodeur et décodeur d'images Base64 : glissez une image pour copier son Data URI avec des extraits HTML et CSS, ou collez un Data URI pour l'afficher et le télécharger.
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.
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
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.
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.
Plus d’outils Images
Générateur d’icônes d’app — Transformez une image en toutes les tailles d’icône d’app pour iOS, macOS et Android, téléchargées dans un ZIP, dans votre navigateur.
Animation CSS de sprite sheet — Transformez une sprite sheet en animation CSS steps() prête à copier, avec un aperçu en direct.
SVG vers PNG — Rastérise un SVG en PNG ou JPG net à toute échelle, transparence conservée.