Why is the Base64 string larger than the original file?

Base64 encoding represents binary data using only 64 ASCII characters (A-Z, a-z, 0-9, +, /). Since each Base64 character encodes 6 bits of data but takes up 8 bits (1 byte) in text, the encoded output is approximately 33% larger than the original binary file. For example, a 30 KB PNG image becomes roughly 40 KB as a Base64 string. This overhead is the trade-off for being able to embed binary data directly in text formats like HTML, CSS, and JSON.

Is my image uploaded to any server?

No. This tool runs entirely in your browser using the JavaScript FileReader API. Your image file never leaves your device — all encoding is performed client-side. No data is sent to any server, making this tool completely private and safe for sensitive images. You can verify this by disconnecting from the internet and using the tool — it will still work.

What image formats are supported?

This tool supports all common web image formats: PNG, JPEG (JPG), GIF, WebP, SVG, BMP, and ICO. The encoder reads the file's binary data and converts it to Base64 regardless of the image content. The correct MIME type is automatically detected from the file extension and included in the Data URI (e.g., data:image/png;base64,... for PNG files).

Can I use Base64 images in emails?

Yes, but with caveats. Base64-encoded images can be embedded in HTML emails using the Data URI scheme in an img tag's src attribute. This eliminates the need for external image hosting and avoids images being blocked by email clients. However, some email clients (notably older versions of Outlook) may not render Data URI images. For maximum compatibility, keep Base64 images small (under 50 KB original size) and test across target email clients.

Is there a recommended size limit for Base64 images?

For practical use, keep Base64-encoded images under 20-30 KB (original file size). Larger images significantly increase HTML/CSS file size, cannot be cached separately by browsers, and slow down page rendering because the browser must decode the entire string before displaying. For images larger than 30 KB, it's generally better to use a regular image file served via HTTP — the browser can cache it, load it in parallel, and decode it more efficiently.

A Data URI (Uniform Resource Identifier) is a scheme that allows you to embed file data directly in a document instead of linking to an external file. The format is: data:[MIME-type];base64,[encoded-data]. For images, this looks like data:image/png;base64,iVBORw0KGgo... — you can use this string anywhere a URL is expected: in HTML img src attributes, CSS url() values, or JavaScript image sources. Data URIs are defined in RFC 2397.

Encodeur Image en Base64

Convertissez n'importe quelle image en chaîne Base64 codée. Obtenez le code prêt à l'emploi pour HTML <img>, CSS background-image et Markdown. 100 % côté client — vos fichiers ne quittent jamais votre navigateur.

100 % Côté Client Aucun Téléchargement Nécessaire Encodage Instantané Prêt pour Copier & Coller

Déposez votre image iciAppuyez pour choisir votre image

PNG, JPEG, GIF, WebP, SVG, BMP, ICO

Vos fichiers ne quittent jamais votre navigateur. Tout l'encodage se fait côté client — rien n'est téléchargé sur aucun serveur.

Comment Encoder une Image en Base64

Télécharger

Déposez ou sélectionnez votre image. Supporte PNG, JPEG, GIF, WebP, SVG, BMP et les formats ICO.

Encoder

Votre image est instantanément convertie en Base64 directement dans votre navigateur. Aucun téléchargement nécessaire — l'encodage se fait côté client.

Copier

Copiez l'extrait de code prêt à l'emploi pour HTML, CSS ou Markdown. Collez-le directement dans votre projet.

Qu'est-ce que le Codage d'Image Base64 ?

Base64 est un schéma de codage binaire-vers-texte qui convertit les données binaires en une chaîne de caractères ASCII. Lorsqu'il est appliqué à des images, il transforme les données brutes du fichier binaire en une représentation textuelle utilisant 64 caractères (A–Z, a–z, 0–9, +, /) plus le caractère de remplissage =.

La chaîne codée peut être intégrée directement dans HTML, CSS, JavaScript, JSON, XML et autres formats basés sur du texte en utilisant le schéma Data URI. Au lieu de référencer un fichier image externe via une URL, vous incluez l'intégralité des données d'image en ligne sous forme de chaîne data:image/png;base64,.... Le navigateur décode cette chaîne et affiche l'image sans effectuer de demande HTTP supplémentaire.

Le codage Base64 est défini dans RFC 4648 et le schéma Data URI dans RFC 2397. Tous deux sont largement pris en charge dans tous les navigateurs modernes, les clients de messagerie et les cadres de développement.

Quand Utiliser les Images Base64

Les images codées en Base64 sont idéales dans des scénarios spécifiques où l'élimination des dépendances de fichiers externes est plus importante que la taille du fichier :

Intégré dans HTML — Intégrez des petites icônes, logos ou images décoratives directement dans votre HTML. Élimine une demande HTTP supplémentaire, ce qui peut améliorer le temps de chargement perçu pour les minuscules images (moins de 2–5 Ko).
Arrière-plans CSS — Incluez les petits motifs d'arrière-plan, les sprites ou les icônes d'interface utilisateur directement dans votre feuille de style. Aucun fichier externe à gérer, et l'image se charge avec le CSS sans demande séparée.
Modèles de courrier électronique — Les e-mails HTML ne peuvent pas compter sur l'accessibilité d'un hébergement d'images externe. Intégrer des images en tant que Data URIs Base64 garantit qu'elles s'affichent même lorsque le client de messagerie du destinataire bloque les images distantes.
Applications à fichier unique — Lors de la création de fichiers HTML autonomes, de tableaux de bord ou de rapports qui doivent fonctionner hors ligne, Base64 vous permet de regrouper toutes les images dans un seul fichier.
Charges utiles API — Lors de l'envoi de données d'image via des API JSON, le codage Base64 convertit les données d'image binaires en une chaîne sûre pour JSON. Courant dans les API de téléchargement, les systèmes d'avatar et les pipelines de données.
Génération d'images dynamique — Les scripts côté serveur qui génèrent des images à la volée peuvent renvoyer des chaînes Base64 au lieu de gérer des fichiers temporaires.

Quand NE PAS Utiliser les Images Base64

Le codage Base64 n'est pas toujours le bon choix. Voici les situations où les fichiers image ordinaires sont meilleurs :

Grandes images (plus de 20–30 Ko) — Le codage Base64 ajoute environ 33 % à la taille du fichier. Une image de 100 Ko devient ~133 Ko de texte Base64 intégré dans votre HTML ou CSS. Cela augmente la taille du document, ralentit l'analyse et gaspille la bande passante.
Mise en cache du navigateur — Les fichiers image externes peuvent être mis en cache indépendamment par le navigateur. Les images Base64 intégrées dans HTML sont téléchargées à chaque fois que la page se charge. Intégré dans CSS, elles sont mises en cache avec la feuille de style mais ne peuvent pas être partagées entre les pages.
Performance de rendu — Le navigateur doit décoder la chaîne Base64 en binaire avant de l'afficher. Pour les grandes images, cette étape de décodage ajoute un délai mesurable par rapport au rendu d'un fichier binaire mis en cache directement.
SEO et accessibilité — Les moteurs de recherche ne peuvent pas indexer les images codées en Base64 pour la recherche d'images. Utilisez les balises <img> appropriées avec les URL src pour les images que vous souhaitez que apparaissent dans les résultats de recherche d'images.
Réseaux de Livraison de Contenu — Les CDN sont conçus pour servir les actifs statiques (y compris les images) à partir de serveurs périphériques proches de l'utilisateur. Les images intégrées en Base64 contournent complètement les avantages du CDN.

Surcharge de Taille Base64

Le codage Base64 augmente la taille du fichier d'environ 33 %. C'est une propriété inhérente de l'encodage : chaque 3 octets de données binaires deviennent 4 octets de texte Base64 (chaque caractère Base64 représente 6 bits, mais occupe 8 bits en texte). La formule exacte est :

Taille Base64 = ceil(taille originale / 3) × 4

Pour référence pratique :

Une icône 1 Ko devient ~1,33 Ko en Base64 — surcharge négligeable
Une miniature 10 Ko devient ~13,3 Ko — toujours raisonnable pour une utilisation en ligne
Une photo de 100 Ko devient ~133 Ko — envisagez d'utiliser un fichier ordinaire à la place
Une image de 1 Mo devient ~1,33 Mo — utilisez définitivement un fichier externe

La zone idéale pour les images Base64 est inférieure à 10–20 Ko de taille de fichier d'origine. À cette portée, éliminer une demande HTTP compense souvent l'augmentation de taille, surtout sur les connexions à latence élevée.

Questions Fréquemment Posées

Pourquoi la chaîne Base64 est-elle plus grande que le fichier d'origine ?

Le codage Base64 représente les données binaires en utilisant uniquement 64 caractères ASCII (A–Z, a–z, 0–9, +, /). Puisque chaque caractère Base64 encode 6 bits de données mais occupe 8 bits (1 octet) en texte, la sortie encodée est environ 33 % plus grande que le fichier binaire d'origine. Par exemple, une image PNG de 30 Ko devient approximativement 40 Ko sous forme de chaîne Base64. Cette surcharge est le compromis pour pouvoir intégrer des données binaires directement dans des formats textuels comme HTML, CSS et JSON.

Mon image est-elle téléchargée sur un serveur ?

Non. Cet outil s'exécute entièrement dans votre navigateur en utilisant l'API JavaScript FileReader. Votre fichier image ne quitte jamais votre appareil — tout l'encodage se fait côté client. Aucune donnée n'est envoyée à aucun serveur, rendant cet outil complètement privé et sûr pour les images sensibles. Vous pouvez vérifier cela en vous déconnectant d'Internet et en utilisant l'outil — il fonctionnera toujours.

Quels formats d'image sont pris en charge ?

Cet outil supporte tous les formats d'image web courants : PNG, JPEG (JPG), GIF, WebP, SVG, BMP et ICO. L'encodeur lit les données binaires du fichier et les convertit en Base64 indépendamment du contenu de l'image. Le type MIME correct est automatiquement détecté à partir de l'extension du fichier et inclus dans le Data URI (par ex., data:image/png;base64,... pour les fichiers PNG).

Puis-je utiliser les images Base64 dans les e-mails ?

Oui, mais avec des mises en garde. Les images codées en Base64 peuvent être intégrées dans les e-mails HTML en utilisant le schéma Data URI dans l'attribut src d'une balise <img>. Cela élimine le besoin d'un hébergement d'images externe et évite que les images ne soient bloquées par les clients de messagerie. Cependant, certains clients de messagerie (notamment les versions plus anciennes d'Outlook) peuvent ne pas afficher les images Data URI. Pour une compatibilité maximale, conservez les images Base64 petites (moins de 50 Ko de taille originale) et testez sur les clients de messagerie cibles.

Y a-t-il une limite de taille recommandée pour les images Base64 ?

Pour une utilisation pratique, conservez les images codées en Base64 en dessous de 20–30 Ko (taille de fichier d'origine). Les images plus grandes augmentent considérablement la taille du fichier HTML/CSS, ne peuvent pas être mises en cache séparément par les navigateurs et ralentissent le rendu des pages car le navigateur doit décoder l'intégralité de la chaîne avant d'afficher. Pour les images plus grandes que 30 Ko, il est généralement préférable d'utiliser un fichier image ordinaire servi via HTTP — le navigateur peut le mettre en cache, le charger en parallèle et le décoder plus efficacement.

Qu'est-ce qu'un Data URI ?

Un Data URI (Uniform Resource Identifier) est un schéma qui vous permet d'intégrer les données de fichier directement dans un document au lieu de créer un lien vers un fichier externe. Le format est : data:[type-MIME];base64,[données-codées]. Pour les images, cela ressemble à data:image/png;base64,iVBORw0KGgo... — vous pouvez utiliser cette chaîne partout où une URL est attendue : dans les attributs src HTML <img>, les valeurs CSS url() ou les sources d'image JavaScript. Les Data URIs sont définis dans RFC 2397.

Outils Associés

Base64 en Image JPG en PNG PNG en JPG Compresser Image