Convert an image to a Base64 data URL
A data URL lets you embed an image directly inside a stylesheet, an HTML file, an email template or a JSON payload, with no separate file to host. Drop an image here to get the encoded string, ready-made CSS or HTML around it, and a .txt file you can keep.
How to use the Image to Base64
- Add the image — an icon, a logo, a small illustration.
- Choose the output style: a plain data URL, or a ready-to-paste CSS, HTML or Markdown snippet.
- Select the text in the box and copy it, or download the .txt file.
- Paste it where you need it. No hosting and no extra HTTP request.
What a data URL is
A data URL carries the file itself inside the URL string instead of pointing at one. The shape is data:image/png;base64,iVBORw0KGgo… — a MIME type, the word base64, a comma, and then the file's bytes re-expressed in the 64-character alphabet A–Z, a–z, 0–9, plus and slash. Anywhere a browser accepts an image URL, it accepts this: the src of an img tag, a CSS background-image, an SVG image element, a favicon link, the body of an email template.
The 33% tax
Base64 encodes three bytes as four characters, so the encoded text is always one third larger than the file — plus a few characters for the prefix. A 9 KB icon becomes about 12 KB of text. That overhead partly disappears again when your server sends the page with gzip or Brotli compression, but not entirely, because already-compressed image data does not compress a second time. Budget for the full third when deciding whether something is small enough to inline.
When inlining is the right call
| Good fit | Poor fit |
|---|---|
| Icons and logos under about 5 KB | Photographs and hero images |
| Single-file HTML you email or archive | Anything used on more than a couple of pages |
| Images inside an email template | Images that change often |
| Placeholders shown while a real image loads | Anything you want the browser to cache separately |
The decisive factor is usually caching. A linked image file is downloaded once and reused across every page of your site; an inlined one is re-sent inside every page that contains it and can never be cached on its own. Inlining also makes the HTML or CSS file bigger, and that file is on the critical rendering path, so a large data URL can delay the first paint of the page.
Practical notes
- Content Security Policy. A strict CSP that omits
data:from img-src will block data URLs. Add it explicitly if you use them. - Email. Several desktop mail clients, Outlook among them, are unreliable with inlined images; a hosted URL or a CID attachment is safer.
- SVG. For SVG specifically, URL-encoding the markup rather than Base64-encoding it is usually smaller and stays readable.
- Privacy. The encoding happens here in your browser, so an image you are embedding in an internal document is never uploaded anywhere.
Frequently asked questions
How much bigger does the image get?
About 33% larger as text, plus a short prefix. Gzip or Brotli on your server claws back only a little, because image data is already compressed.
Is there a size limit?
Browsers handle large data URLs, but editors and build tools slow down badly above a few hundred kilobytes. This tool stops at 20 MB per file, and inlining anything over about 10 KB is rarely a good idea.
Can I use a data URL as a favicon?
Yes: a link tag with rel="icon" and a data URL href works in current browsers, though a real favicon.ico is still the more compatible choice.
Does the image get re-compressed?
No. The exact bytes of your file are encoded, so the data URL decodes back to a byte-identical copy of the original.
Privacy
This tool runs entirely inside your browser using WebAssembly and the Canvas/File APIs. Your files are never uploaded to ToolFlint or any third party; you can verify this in your browser's network tab or by switching to airplane mode after the page loads. Read how we process files.
Last updated 2026-09-23.