Image to Base64 - Data URI Encoder
Encode an image as a Base64 data URI you can paste straight into HTML, CSS or JSON, removing one HTTP request. Encoding runs in your browser, so nothing is uploaded.
The most secure online image to base64 tool for developers and designers.
When inlining an image actually helps
Base64 encoding turns binary data into plain text using 64 safe characters, which lets an image travel anywhere text can go. Wrapped as a data URI, it can sit directly in an img tag's src, a CSS background-image, a JSON payload or an email template, with no separate file and no network request for it.
The saving is the request itself, and that matters most for very small assets. A 1KB icon fetched over the network costs a DNS lookup, connection setup and round trip that can easily dwarf the transfer of the file, so inlining it is genuinely faster. Small UI icons, tracking pixels, tiny textures, and placeholder thumbnails shown while a real image loads are the classic cases.
The cost is size and caching. Base64 expands data by roughly 33 percent, because it represents three bytes with four characters. More importantly, an inlined image is part of whatever document contains it, so it cannot be cached separately: a logo inlined into your CSS is re-downloaded whenever that CSS changes, and an image inlined into an HTML page is downloaded again on every page that includes it, whereas a linked file would have been cached once and reused everywhere.
The practical rule most teams settle on is a size threshold in the low kilobytes: inline below it, link above it. Anything a user might reasonably see more than once, or anything of real size, belongs in its own cacheable file. Encoding here happens entirely in your browser, so internal assets and client work are never uploaded.
How to convert an image to Base64
- Upload the image. Smaller is better, given the 33 percent expansion.
- Copy the data URI. It comes complete with the
data:image/...;base64,prefix that browsers need. - Paste it where you need it. Into an
img src, a CSSbackground-image: url(...), or a JSON field.
Shrink the image before encoding rather than after, since Base64 inflates whatever you give it. Running it through the size reducer first, or converting to WebP, meaningfully shortens the resulting string. For simple icons, an inline SVG is usually smaller still than a Base64 raster and stays sharp at any size, so it is worth comparing.
Frequently asked questions
Why is the Base64 string bigger than the file?
Base64 represents every three bytes with four text characters, so encoded data is about 33 percent larger than the binary it came from.
When should I inline an image?
For very small assets where the network request costs more than the bytes: UI icons, tiny textures, tracking pixels and low-quality placeholders. Most teams set a threshold in the low kilobytes and link anything above it.
What is the downside of inlining?
It cannot be cached separately. An image inlined into CSS is re-downloaded whenever that CSS changes, and one inlined into HTML is downloaded again on every page, where a linked file would have been cached once and reused.
Where can I paste a data URI?
Anywhere text is accepted: an img src attribute, a CSS
background-image, a JSON payload or an email template.
How do I keep the string shorter?
Shrink the image before encoding, not after. Compressing it or converting to WebP first reduces the source bytes that the 33 percent expansion then applies to.
Are my images uploaded?
No. Encoding happens in your browser, so internal assets and client work stay local.
🔎 Verify it yourself: nothing uploads
Don’t take our word for it. Open your browser’s DevTools (F12 → Network tab), then run this tool on any image. You’ll see no upload request at all — your file never leaves this tab. You can even turn off Wi‑Fi once the page has loaded and keep working. Every tool on this site works the same way — all processing happens on your device.