How to Convert an Image to Base64
Base64 encoding turns binary image data into plain text, which means an image can be embedded directly inside an HTML file, a CSS rule, a JSON payload or an email — no separate file, no extra network request. This tool encodes any image to a data URL and hands you the ready-to-paste CSS or HTML, and it decodes Base64 back into a downloadable image just as easily.
Upload your image
Drop any image. Encoding happens instantly, inside your browser - nothing is uploaded to a server.
Choose the output format
A raw data URL, a CSS background-image rule, an HTML img tag, or the bare Base64 string with no prefix.
Copy or download
One click copies it to your clipboard, ready to paste straight into your code.
When You Should — and Should Not — Use Base64
The trade-off is simple and worth understanding. Base64 removes a network request — the image is already inside the file that referenced it, so the browser never has to go and fetch it. But the encoding is about 33% larger than the original binary, because it represents three bytes of data using four text characters. You are trading bandwidth for a round trip.
That trade is worth it for small assets: icons, tiny logos, a placeholder gradient, an SVG-like graphic of a few kilobytes. Below a few KB the request overhead genuinely dominates, and inlining is faster. It is a bad trade for anything substantial. A 500 KB hero photo inlined as Base64 becomes 665 KB of text sitting inside your HTML or CSS, which then cannot be cached separately — every page load re-downloads it, and the browser cannot start rendering until it has parsed all of it.
The other genuine use case is portability. Embedding an image in an email, a JSON API response, a database text column, or a single self-contained HTML file all require the image to be text, and Base64 is how that is done. If your goal is simply a smaller image for the web, encoding is the wrong tool — use our image compressor instead.
Common Situations This Tool Solves
Inlining a small icon in CSS
A 2 KB icon as a background-image data URL saves a network round trip that would otherwise cost more time than the bytes themselves.
A single self-contained HTML file
Documentation, an email template, or a page that must work with no external files - Base64 lets every image live inside the one file.
Sending an image through a JSON API
JSON is text and cannot carry binary. Base64 is the standard way to move image data through an API that only speaks text.
Decoding a Base64 string you were given
Found a data URL in someone's source, an API response or a database column, and need to see what it actually is? Paste it into the decode tab.
Frequently Asked Questions
How do I convert an image to Base64?
Upload it here and the Base64 data URL appears immediately, ready to copy. You can also get it pre-wrapped as a CSS background-image rule or an HTML img tag.
Why is the Base64 version bigger than my image?
Base64 represents three bytes of binary data using four text characters, so the encoded output is roughly 33 percent larger. That overhead is inherent to the encoding and unavoidable.
When should I use Base64 images?
For small assets - icons and tiny graphics of a few kilobytes - where saving a network request outweighs the size increase. Also whenever an image must travel through a text-only channel like JSON or email.
When should I not use Base64?
For anything large. A big inlined image cannot be cached separately, bloats your HTML or CSS, and delays rendering. Above roughly 5 to 10 KB, a normal image file linked in the usual way is faster.
What is a data URL?
A data URL is the full string starting with data:image/png;base64, followed by the encoded data. It can be used anywhere a normal image URL would go - in an img tag, a CSS rule, or an SVG.
How do I decode Base64 back to an image?
Switch to the Base64 to Image tab, paste your string - with or without the data URL prefix - and click Decode. You can preview it and download the real image file.
Does Base64 encoding compress the image?
No, quite the opposite - it makes the data larger. Base64 is an encoding, not a compression. If you want a smaller image, compress it first and then encode the result.
Is my image uploaded to encode it?
No. Everything happens inside your browser using the FileReader API - your image is never uploaded to any server, never stored, and never seen by anyone.
Can I use Base64 images in emails?
Sometimes. Support varies significantly across email clients, and some strip data URLs entirely or flag them as suspicious. Test carefully before relying on it for an email campaign.
Do Base64 images work in all browsers?
Yes. Data URLs have been universally supported for many years and work in every browser you are likely to care about.
Should I compress the image before encoding it?
Almost always, yes. Base64 adds 33 percent on top of whatever you feed it, so compressing first has a compounding benefit. Use our image compressor before you encode.
Is this Base64 converter really free?
Completely free, with no limits, no signup and no premium wall. Everything runs in your browser, so there are no server costs to pass on.
Last updated: July 11, 2026 · FlipMyFormat Base64 Converter
Written and maintained by the FlipMyFormat team