Comment utiliser : Image en Base64
- Dans Image → Base64, glissez-déposez ou sélectionnez une image. Celle-ci est lue localement — rien n'est mis en ligne.
- Copiez l'URI de données, ou l'arrière-plan CSS prêt à l'emploi, ou encore l'extrait de code <img>. Décochez la case « Préfixe data: » si vous avez besoin uniquement du code Base64 brut.
- Pour les fichiers SVG, optez pour l'encodage URL : il est généralement plus court que le Base64.
- Pour procéder dans l'autre sens, ouvrez « Base64 → Image », collez une chaîne de caractères et téléchargez le fichier décodé.
Qu'est-ce qu'un convertisseur d'image en Base64 ?
Base64 est un moyen d'écrire des données binaires en utilisant uniquement 64 caractères de texte sûrs (A–Z, a–z, 0–9, + et /). La conversion d’une image au format Base64 vous permet de l’intégrer directement dans du code HTML, CSS, JSON ou un modèle d’e-mail sous forme d’URI de données, au lieu de créer un lien vers un fichier séparé :
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…La partie avant la virgule indique le type MIME ; le reste correspond au fichier encodé. Les navigateurs le traitent exactement comme une URL d’image, ce qui permet de l’utiliser dans <img src>, CSS background-image, <link rel="icon"> et dans le code canvas.
La surcoût de taille de 33 %
Le codage Base64 stocke chaque bloc de 3 octets du fichier sous la forme de 4 caractères ; la chaîne encodée est donc environ 33 % plus volumineuse que l’original (auxquels s’ajoute le préfixe court data: ). Le compresseur Gzip ou Brotli sur votre serveur permet de récupérer une partie de cet espace, mais les inconvénients majeurs sont d’ordre structurel : une image intégrée est téléchargée à chaque fois qu’un fichier HTML ou CSS la contient, ne peut pas être mise en cache séparément et alourdit votre feuille de style — qui bloque le rendu.
Quand intégrer des images (et quand ne pas le faire)
- Convient bien : petites icônes, indicateurs de chargement et sprites d’interface utilisateur de moins de quelques Ko, images dans les signatures d’e-mails HTML lorsque les images externes sont bloquées, rapports HTML en fichier unique et échantillons de test dans le code.
- À éviter : les photos, les images de tête et tout ce qui dépasse environ 10 à 20 Ko. Servez-les sous forme de fichiers normaux avec mise en cache, compression et
loading="lazy". Réduisez-les d’abord à l’aide de l’Image Compressor.
SVG : l’encodage URL est préférable au Base64
Le format SVG est déjà du texte, vous n’avez donc absolument pas besoin de Base64. Une URI de données encodée en URL, telle que data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'… n’échappe que quelques caractères (<, >, #, %) et est généralement 20 à 30 % plus court que la version Base64 — tout en restant lisible et en se compressant mieux avec gzip. Cet outil propose les deux options pour les fichiers SVG. Si vous utilisez beaucoup le SVG dans le CSS, l’outil « SVG vers CSS » vous sera également utile.
Décodage d’une chaîne Base64 pour retrouver une image
Collez une URI de données complète ou une chaîne Base64 brute (base64url avec - et _ fonctionne également). L’outil détecte le format réel à partir des octets magiques du fichier — PNG, JPEG, GIF, WebP, AVIF, SVG, ICO ou BMP —, affiche un aperçu avec les dimensions et vous permet de télécharger le fichier avec l’extension appropriée. Pour les chaînes Base64 qui ne correspondent pas à une image, utilisez l’encodeur/décodeur Base64 général.
Aussi recherché comme : image au format base64, uri de données, de base64 à image, png vers base64, svg vers uri de données, img src base64, css : arrière-plan en base64, image du décodeur base64.
Outils complémentaires : Image en Base64
- Générateur de favicons — Créez un ensemble complet de favicons à partir d'un logo, d'une lettre ou d'un emoji : un fichier favicon.ico en plusieurs tailles, une icône Apple Touch, des icônes Android/PWA, un Webclip Webflow, le manifeste Web et les balises HTML à insérer.
- URL Encode / Decode — Percent-encode text for safe use in URLs, decode encoded strings back to readable text, and break any URL down into its parts and query parameters.
- Générateur de codes-barres — Créez des codes-barres scannables pour vos produits, vos stocks, vos expéditions et vos bibliothèques : les chiffres de contrôle sont calculés automatiquement, et vous pouvez télécharger un fichier SVG de haute qualité pour l'impression ou un fichier PNG pour vos documents.
- Lecteur de codes QR — Pointez votre appareil photo vers un code QR, ou importez une image ou une capture d'écran qui en contient un.
Questions fréquentes
Pourquoi la chaîne Base64 est-elle plus volumineuse que mon image ?
Comment utiliser une image au format Base64 dans le CSS ?
url(): background-image: url("data:image/png;base64,…");. L'extrait de code CSS ci-dessus est prêt à être copié-collé — il vous suffit de renommer le sélecteur.L’intégration d’images au format Base64 permet-elle d’améliorer la vitesse de chargement des pages ?
Peut-on convertir des images privées ici en toute sécurité ?
Pourquoi mon code Base64 copié-collé génère-t-il une erreur ?
url() les balises et les guillemets.