How to Convert an Image to Base64
Drop your image above and the data URI appears immediately, but the encoded string on its own is rarely what you actually need — you need it wrapped in the right syntax for wherever it's going. Switch between the five output tabs and you get exactly that: the raw data URI, a CSS rule with the background properties already set, an HTML img tag with the alt text and dimensions filled in from the file itself, Markdown image syntax, and a JSON object for APIs and config files. Each is one tap from your clipboard. Just as useful is the size readout, because base64 encoding is not free: it turns every three bytes into four, adding roughly thirty-three per cent before you count the data URI prefix. That trade is worth making for a tiny icon where you save an entire HTTP round trip, and a bad deal for a photograph, where the inflated string sits inside your CSS or HTML blocking the parser and can never be cached separately. Anything over fifty kilobytes triggers a warning here for exactly that reason. Add several images and switch between them freely. Everything is encoded in your browser.
Add your image
Drag and drop, paste, or click to browse.
Pick the format
Data URI, CSS, HTML, Markdown or JSON.
Copy the snippet
One tap to the clipboard, or save it as a file.
What a Data URI Is
The file, written as text
A data URI packs an entire file into a string that starts with the MIME type and the base64 marker, then the encoded bytes. Anywhere a URL is accepted, a data URI works instead — no separate file, no network request.
Why it grows by a third
Base64 represents every three bytes of binary as four text characters, so the encoded form is about 133% of the original. That's the price of making binary data safe to embed in text.
Common Use Cases
Inline a CSS icon
Embed a small background image and save an HTTP request.
Single-file HTML
Build a self-contained page with no external assets.
HTML email
Some clients render inline images where hosted ones are blocked.
Send an image in JSON
APIs that only accept text need the image encoded.
Bookmarklets and snippets
Embed an icon directly in the code.
Offline documentation
Keep images inside the Markdown file itself.
Avoid a CORS problem
An inlined image has no cross-origin request to block.
Prototypes and demos
Share a working page without a hosting setup.
Tips & Best Practices
Keep it under a few kilobytes
The request you save is only worth it for genuinely small files. Past 50 KB you're making the page slower.
Compress and resize first
Encoding a 2 MB photo produces a 2.7 MB string. Shrink the image before encoding, not after.
Inline SVG markup instead of base64
For SVG icons, pasting the actual markup is smaller than base64 and lets you style it with CSS.
Remember it can't be cached separately
An inlined image is re-downloaded with every page that contains it, unlike a shared file.
Watch your CSS file size
Several inlined images can bloat a stylesheet, and CSS blocks rendering until it loads.
Check email client support
Inline images help in some clients and are stripped by others — always test before sending.
Troubleshooting
The string is enormous
That's proportional to the file. Resize and compress the image first — a 5 KB icon produces a manageable string, a 2 MB photo does not.
My CSS broke after pasting
The data URI must be inside quotes within url(). The CSS tab produces the correct syntax — copy that rather than the raw string.
The image doesn't show in email
Support varies by client. Some strip data URIs entirely; test in the clients your recipients actually use.
My page got slower
Inlined images can't be cached separately and block parsing. For anything but tiny assets, a normal image file is faster.
Frequently Asked Questions
How do I convert an image to Base64 for free?
Drop your image above and the data URI appears instantly, along with ready-made CSS, HTML, Markdown and JSON snippets — free, no signup.
Are my images uploaded to a server?
No. Encoding happens entirely in your browser, so your images never leave your device.
What is a data URI?
A string containing the MIME type and the base64-encoded file, usable anywhere a URL is accepted — no separate file needed.
Why is the encoded string larger?
Base64 turns every three bytes into four characters, so the result is about a third bigger than the original.
When should I inline an image?
For small icons, single-file HTML, email and JSON payloads. For anything over about 50 KB, a normal image file is faster.
Does it work with SVG?
Yes, though for SVG icons inlining the markup directly is usually smaller and lets you style it with CSS.
Can I use it in CSS?
Yes. The CSS tab gives you a complete rule with the url() syntax already correct.
Can I encode several images?
Yes. Add multiple files and switch between them to copy each snippet.
Does base64 compress the image?
No, the opposite — it makes the data larger. Compress the image before encoding if size matters.
Is there a file size limit?
No, but there's a warning above 50 KB because inlining files that large usually hurts performance.
Can I decode base64 back to an image?
Yes — our Base64 tool decodes strings back to their original form.
Does it work in HTML email?
Support varies between clients. Some render data URIs, others strip them, so always test first.
What formats are supported?
PNG, JPG, SVG, WebP, GIF and ICO, each encoded with the correct MIME type.
Can an inlined image be cached?
Not separately. It's re-downloaded with every page containing it, which is why small files are the only sensible candidates.
Does it keep transparency?
Yes. The file is encoded byte-for-byte, so nothing about the image changes.
Does it work offline?
Once the page has loaded it runs entirely in your browser, so it keeps working without a connection.
Does it work on phones?
Yes, in any modern browser on Windows, Mac, Android or iPhone with nothing to install.
Is this tool really free?
Completely free, forever — no account, no ads and no premium wall.
100% free · No signup · Processed in your browser · Never uploaded
Last updated: August 2026 · FlipMyFormat Image to Base64 Converter
Written and maintained by the FlipMyFormat team · Runs entirely in your browser