Convert an Image to Base64
Base64 turns an image into a string you can paste anywhere text goes: HTML, CSS, JSON, emails, config files. This encoder generates the string plus ready-made snippets for each context, free and offline-capable - encoding is pure local computation, and your image is never transmitted to produce it.
Loading the tool…
How it works
- Drop an image in, or paste one from the clipboard.
- Copy the flavour you need: raw Base64, a data URI, a CSS background-image rule, or an HTML img tag.
- Check the size readout - the tool shows the encoded size and flags when inlining is likely counterproductive.
Worth knowing
Base64 exists to smuggle binary through channels built for text. It maps every 3 bytes of image data onto 4 characters from a 64-symbol alphabet, producing a string that survives JSON parsers, XML documents, email bodies and source code untouched. Prefix it with a data URI header like data:image/png;base64, and browsers treat the string itself as the image - no file, no separate request. That is the entire trick, and it is genuinely useful in narrow circumstances.
The arithmetic that most encoder pages omit: the 3-to-4 mapping inflates size by a predictable one-third. A 30 KB icon becomes roughly 40 KB of text, before the surrounding markup. Worse costs are structural. Inlined images cannot be cached separately - the same logo pasted into ten pages downloads ten times, while a linked file downloads once. Inlined bytes join the document's critical path, and a data URI inside CSS is particularly costly because the stylesheet must be fully parsed before anything renders; a fat string sits directly between your user and first paint.
The rule of thumb this tool enforces with a visible warning: below roughly 32 KB encoded, inlining can win by eliminating a request - tiny icons, UI glyphs, single-use decorations, tracking pixels in emails. Above it, the cache loss and payload bloat almost always outweigh the saved round trip, and HTTP/2 multiplexing already erased most of the round-trip cost that made inlining attractive in the first place. Legitimate large-string cases do exist - embedding an image inside a JSON API payload, a self-contained HTML file, a canvas test fixture - and the encoder will happily produce them; it just will not pretend the string belongs in your stylesheet.
Decoding runs in reverse on the same page: paste any Base64 string or data URI and get the image back as a file, which is handy for inspecting what some other system embedded.
Base64 in CSS is the most expensive place to put it: browsers block rendering until the entire stylesheet is parsed, so a large data URI in a background-image rule delays first paint for the whole page - a cost a linked image never imposes. This tool warns at the ~32 KB threshold where inlining generally stops paying for itself; most encoder sites will happily hand you a 2 MB string with no comment.
What this tool will not do
- It will not compress the image - Base64 is an encoding, not compression, and output is reliably about 33% larger than the input file.
- It will not judge oversized inlining for you beyond a warning; if you need a 5 MB data URI for a legitimate embedding case, it will generate one.
- It does not produce URL-safe Base64 variants (the - and _ alphabet used in some APIs); output is standard Base64 as data URIs require.
When inlining as Base64 makes sense
| Encoded size | Verdict | Why |
|---|---|---|
| Under 5 KB | Good candidate | Request overhead exceeds the payload; icons and glyphs thrive inline |
| 5-32 KB | Case by case | Fine for single-use images; poor for anything reused across pages |
| Over 32 KB | Usually a mistake | Cache loss and render blocking outweigh the saved request |
| Email signatures | Test first | Gmail and Outlook handle embedded images inconsistently |
Questions people ask
What is a Base64 data URI and how do I use it?
It is a string of the form data:image/png;base64,iVBOR... that browsers render as an image directly, with no separate file. Paste it into an img src attribute or a CSS url() and the image displays from the string itself.
Why is my Base64 string bigger than the original image?
The encoding maps 3 bytes to 4 characters by design, adding almost exactly one third. Nothing is wrong and nothing can avoid it - Base64 trades size for the ability to travel through text-only channels.
Should I embed images in my website as Base64?
Only small ones - think icons under a few kilobytes that appear on a single page. Larger or reused images lose browser caching and bloat every page view, and HTTP/2 already made extra image requests cheap. When in doubt, link the file.
Does Base64 encoding reduce image quality?
No - it is a perfectly reversible re-spelling of the same bytes, not a compression step. Decoding returns a file identical to the original. Quality and pixels are untouched; only the representation changes.
How do I put a Base64 image in an email signature?
Copy the img-tag snippet and paste it into a signature editor that accepts HTML. Test before relying on it: Outlook desktop displays embedded images inconsistently and some webmail clients strip them, which is why many senders fall back to hosted images.
Can I convert a Base64 string back into an image file?
Yes - paste the string or full data URI into the decode side of this page and download the reconstructed file. It is the quickest way to see what image is hiding inside a JSON payload or a stylesheet you are debugging.
Usually the next step
More in Convert
This page processed nothing on any server — there is no server. The technical explanation.