Image to Base64
Converter
Drop an image, get a Data URI you can paste straight into CSS or HTML. Everything happens in your browser — no uploads, no accounts, no waiting.
What it does
Turn any image into a self-contained string
When you select an image, the browser's FileReader API reads it into memory and encodes it as a Base64 ASCII string. We wrap that string in a Data URI — the format looks like data:image/png;base64,… — and give you three ready-to-paste formats: CSS url(), HTML src="", and a raw string for JSON or email payloads.
The encoded image is structurally identical to the original — no quality loss, no resizing. The only difference is the 33% size overhead that comes with Base64 encoding, which we explain in detail below. Every step runs locally; nothing is sent anywhere.
Real use cases
Who reaches for Base64 encoding — and why
CSS backgrounds & icons
Embedding a small repeating pattern or icon directly in your stylesheet removes an HTTP request that would otherwise delay CSS render completion. For icons under 2–3 KB this is almost always a net win.
Best for images under 10 KB
HTML email
Gmail, Outlook, and Apple Mail all block externally-linked images by default. Embedding them as Data URIs means your email renders immediately — no 'click to load images' prompt, no blank placeholders.
Most reliable approach for email
Offline-first & PWAs
When you bundle a logo or UI icon as Base64 in your JavaScript or CSS, it renders instantly even with no network connection. No cache miss, no placeholder flash — the asset is simply always there.
Critical for service worker apps
Single-file deliverables
Embedding images in a standalone HTML file lets you send a complete, self-contained document — no companion folder of assets needed. Useful for reports, email templates, and shareable demos.
Great for client-ready documents
Understanding the trade-off
The 33% overhead — what it means in practice
Base64 represents every 3 bytes of binary as 4 ASCII characters. That's a fixed 4/3 ratio — roughly 33% larger than the source file, regardless of format or content. Whether that overhead is worth it depends entirely on the image's size and how often it changes.
✓ When Base64 wins
- Image is under ~10 KB (the saved HTTP round-trip outweighs the size penalty)
- The image never changes independently of the parent file
- Reducing request count matters more than byte count (e.g. constrained HTTP/1.1 environments)
- The image must display without a network connection
- You're sending HTML email to recipients who block remote images
✗ When Base64 hurts
- Image is large (50 KB+ encoded adds ~17 KB to every page load, uncached)
- The image updates often — each change busts the entire parent file's cache
- You want the browser to cache the image independently with Cache-Control headers
- Multiple pages share the same image (individual files let the browser reuse cached copies)
- You're embedding a hero photo or other above-the-fold visual that blocks render
Format guide
Choosing the right image format before encoding
Base64 encoding works on any format — but the format you choose before encoding affects file size more than the encoding itself. Here's what to use and when.
Icons & logos with transparency
Lossless. Perfect for sharp edges and transparency. Larger than WebP for photos.
Icons, logos, illustrations
Can be Base64 encoded or inlined as raw XML. Raw inline SVG is smaller and lets CSS target SVG internals.
General web images
Best balance of quality and size for modern browsers. Preferred over JPG for new work.
Photographs
Lossy compression. Smallest for photos. Avoid for anything with sharp text, transparency, or flat color.
Simple animations
Legacy format. Limited to 256 colors. Use only for animated content where WebP animations aren't supported.
Edge cases worth knowing
A few things that trip people up
FAQ
Common questions
What is a Base64 Data URI?
It's a way to embed a file — like an image — directly in a URL string as text, rather than linking to it externally. The format is data:[mime type];base64,[encoded string]. You can drop this string anywhere a URL is expected: CSS url(), HTML src, or JSON.
Why does encoding increase file size by 33%?
Base64 maps every 3 bytes of binary to 4 ASCII characters. Since each ASCII character is 1 byte, you go from 3 bytes to 4 bytes — a 4/3 ratio. This overhead is fixed and applies regardless of the image content or format.
Is my image data private?
Yes. The FileReader API converts your image entirely in local browser memory. No file is transmitted over the network — not even partially. Closing the tab clears everything. This tool is safe to use with client assets, proprietary designs, or sensitive documents.
Can I use this output in React?
Yes. Use the HTML src="" format and paste it directly into your JSX: <img src="data:image/png;base64,…" alt="…" />. This works in any JSX context without any imports or configuration.
What's the practical size limit?
There's no hard browser limit for Data URIs in modern browsers, but performance degrades quickly past ~50 KB. For anything larger, a CDN-hosted image with Cache-Control headers will load faster and be cached independently.
Why won't my embedded image show in Outlook?
Outlook's desktop rendering engine (which uses Word's layout engine, not a real browser) has limited CSS and Base64 support. For best results in Outlook, use the HTML src attribute format rather than a CSS background-image Data URI.
Privacy note
Your files never leave your device. The conversion runs entirely in your browser using the native FileReader API. Kodivio does not log filenames, file contents, output strings, or any metadata about the images you convert. There are no cookies tied to conversions, and no analytics events are fired when you use this tool.