Convert images to Base64 data URIs — 100% in your browser
Processing uses browser-native Canvas and File APIs, so output can vary slightly between browsers. All processing runs locally in your browser.
An image file is a stream of binary bytes. Base64 re-encodes those bytes using only 64 printable characters (A–Z a–z 0–9 + /), so the result can live inside HTML, CSS or JSON where raw binary cannot. Every 3 input bytes become 4 characters (3×8 = 24 bits → 4×6 bits). Because the alphabet holds 64 symbols, the string grows by about 33% over the raw file. The data: URI simply prefixes the MIME type (data:image/png;base64,) so a browser can decode it back into a real image.
Bytes 0x48 0x69 0x21 are the text 'Hi!'. Split into 6-bit groups, each maps to one alphabet symbol: S, G, k, h. 'data:image/png;base64,…' tells the browser which decoder to run on the string.
A 200 KB PNG you want to ship without a separate network request.
Convert images to Base64 DataURL. Everything runs locally; nothing is uploaded.
FreeToolHub Image to Base64 is a free browser-based tool — convert images to Base64 DataURL. No signup, no upload; everything runs locally in your browser.
Convertissez des images en Data URL Base64. Prend en charge JPG, PNG, WebP, GIF, SVG. Copiez ou téléchargez. Gratuit, 100 % dans le navigateur.
Ce convertisseur encode les images en data URL Base64 — les chaînes auto-contenues comme data:image/png;base64,iVBOR... qui intègrent directement des images dans HTML, CSS et JSON sans requête de fichier séparée. Il accepte JPG, PNG, WebP, GIF et SVG, affiche la longueur encodée et la surcharge de taille par rapport au fichier original, et génère la data URL complète ou uniquement la charge utile Base64. Les extraits prêts pour CSS et HTML vous permettent de coller le bon wrapper pour background-image par rapport aux balises <img> sans modification manuelle.
Les développeurs web intègrent de petites icônes et logos en ligne pour éliminer les requêtes HTTP sur les pages critiques en termes de performance. Les concepteurs d'e-mails intègrent des images qui survivent aux clients qui bloquent l'hébergement externe. Les ingénieurs frontend intègrent des ressources dans les composants mono-fichier et les configurations JSON. Quiconque construit des générateurs PDF ou DOCX nécessitant des images en ligne convertit ici en premier. L'affichage de la surcharge de taille maintient les décisions honnêtes : l'encodage augmente la taille des fichiers d'environ 33 %, il guide donc le choix entre intégration et fichier par image.
(1) Téléversez ou déposez une image — JPG, PNG, WebP, GIF ou SVG. (2) L'outil lit le binaire, l'encode en Base64 et assemble la data URL avec le type MIME correct. (3) Lisez le panneau de sortie : data URL, Base64 brut, décompte d'octets pour l'original et l'encodé, et le pourcentage d'expansion. (4) Copiez comme data URL, comme syntaxe de fond CSS, comme balise <img>, ou téléchargez le texte. Tout est encodé localement — l'image n'est jamais téléversée, ce qui est le point pour les ressources non publiées.
L'intégration gagne pour les petites ressources critiques pour le rendu : icônes, logos et espaces réservés d'environ 5–10 Ko, où éliminer un aller-retour réseau compte plus que les octets économisés. C'est aussi la seule option lorsqu'un document doit être véritablement mono-fichier : rapports HTML autonomes, modèles d'e-mails pour les clients qui bloquent les images distantes, et charges utiles JSON intégrées. Les coûts sont réels au-delà de l'expansion de taille de 33 % : les images Base64 ne peuvent pas être mises en cache séparément, donc chaque chargement de page les réintègre ; elles ne peuvent pas être chargées paresseusement ; et de grandes chaînes intégrées gonflent CSS et HTML de manière à ralentir l'analyse. La meilleure pratique moderne s'appuie sur le multiplexage HTTP/2 et les CDNs, n'envisageant l'intégration que pour les quelques images critiques. SVG obtient un cas spécial — en tant que texte vectoriel, il est généralement préférable de l'intégrer comme balisage SVG brut plutôt que Base64, en le gardant stylisable et scriptable.
L'intégration Base64 brille pour les petites icônes, logos et images décoratives où une requête HTTP supplémentaire coûte plus cher que la surcharge de taille : e-mails HTML mono-fichier, démos autonomes et images de fond CSS. Pour les grandes photos ou tout ce qui est réutilisé sur de nombreuses pages, un fichier normal avec le cache du navigateur est presque toujours le meilleur choix.
Environ 33 % plus grand — Base64 encode chaque groupe de 3 octets de données binaires en 4 caractères texte. Un PNG de 100 Ko devient environ une chaîne de 133 Ko. Cette surcharge est la principale raison pour laquelle l'intégration est réservée aux petites ressources ; sur une photo de 1 Mo, elle gaspille la bande passante et gonfle votre HTML.
La sortie est une data URL — 'data:image/png;base64,...' — une image complète empaquetée en une seule chaîne. Vous pouvez la coller directement dans un <img src>, une url() CSS, un lien favicon ou une charge utile JSON. Les navigateurs la décodent sur place, sans requête réseau nécessaire.
Non. Le fichier est lu localement avec l'API FileReader du navigateur et encodé en mémoire. Rien ne quitte votre appareil, ce qui rend l'outil adapté aux ressources internes, captures d'écran sous NDA, ou toute image que vous ne téléverseriez pas vers un service tiers.
Les Data URL Base64 intègrent directement les données d'image dans HTML, CSS ou JSON sous forme de texte — pas de requête HTTP séparée nécessaire. Cela réduit les allers-retours serveur pour les petites images (icônes, logos), permet des e-mails HTML autonomes et simplifie les charges utiles API. Cependant, l'encodage Base64 augmente la taille du fichier de ~33 %, donc utilisez-le uniquement pour les images inférieures à 50 Ko.
JPG, PNG, WebP, GIF et SVG. L'outil génère une chaîne Data URL complète (data:image/png;base64,...) que vous pouvez coller directement dans les attributs src des balises HTML <img>, les propriétés background-image CSS ou les champs d'API JSON. Vous pouvez également télécharger la chaîne encodée comme fichier texte.
Base64 Data URLs embed image data directly in HTML, CSS, or JSON as text—no separate HTTP request needed. This reduces server round-trips for small images (icons, logos), enables self-contained HTML emails, and simplifies API payloads. However, Base64 encoding increases file size by ~33%, so use it only for images under 50KB.
JPG, PNG, WebP, GIF, and SVG. The tool outputs a complete Data URL string (data:image/png;base64,...) that you can paste directly into HTML <img> src attributes, CSS background-image properties, or JSON API fields. You can also download the encoded string as a text file.
What do you call a really smart cookie?
No signups, no data sold. Every tool is free to use — the free tier allows 5 downloads or saves per day, and the optional Pro plan ($7/mo, $59/yr) adds unlimited downloads, batch processing, white-label exports and an ad-free experience.
☕Support me on Ko-fi— support the free tier100% of proceeds go towards hosting & building more free tools.