How to Convert an Image to Base64
Choose a local image file to create a Base64 data URI. Preview the result and copy the complete URI or payload required by your destination. The file is read locally rather than uploaded to an image service.
Understanding Data URIs
A data URI combines a media type, an encoding marker and the data. For an image it commonly begins with data:image/...;base64,. Keep the correct type so the destination knows how to interpret the decoded bytes.
Base64 Size Overhead for Images
Base64 needs roughly four characters for every three input bytes, plus the URI prefix. It is larger than the original binary before any transport compression. Compare the actual file and output sizes before embedding.
When to Embed Images as Base64
Small inline assets can avoid a separate request, but large embedded images increase document size and cannot be independently cached like separate files. Use ordinary image files when reuse and caching matter.
Decode Base64 Back to an Image
Switch to decode mode and paste a supported image data URI to preview the image. A text payload is not an image merely because it is Base64. Check the media type and complete data before decoding.
More examples and technical details
What a Data URI Actually Is
Encoding an image to Base64 turns the raw bytes of a file into a long string of plain text made up of letters, numbers, and a couple of symbols. That string can then be dropped straight into a page as a data URI, which is a way of writing the whole file inline instead of pointing to a separate address. The shape of a data URI is fixed:
For a small PNG it looks like data:image/png;base64,iVBORw0KGgo... followed by a few hundred more characters. The browser sees that prefix, understands it is being handed an image encoded as Base64, decodes it back into bytes, and renders it exactly as if it had downloaded a real file. No separate request goes out to a server, because the image is already sitting right there in your HTML or CSS.
The Honest Tradeoff
Inlining an image sounds like a free win, and for the right case it is, but it comes with real costs that are easy to overlook. The upside is that you remove one HTTP request. For a tiny icon that would otherwise need its own round trip to the server, cutting that request can genuinely make a page feel snappier, especially over a slow connection.
The downsides stack up quickly for anything larger. Base64 encoding inflates the data by roughly 33 percent, so your 9KB image becomes about 12KB of text. That encoded blob cannot be cached on its own the way a real image file can, so every page that includes it re-downloads the whole thing instead of reusing one cached copy. And it bloats the HTML or CSS file it lives in, which is often a file that blocks the page from rendering until it finishes loading. For anything but very small images, embedding is a net loss.
When to Use It, and When Not To
The good cases are all small and specific. A tiny icon referenced from CSS, a single-file HTML email where external images are often blocked anyway, an inline SVG, or a 1-pixel spacer that is not worth a whole request: these are exactly what data URIs were made for. The rule of thumb is that if the file is under a couple of kilobytes and you want to avoid one request, inlining is reasonable.
The bad cases are the mirror image. Photographs, hero banners, and any image reused across many pages should stay as normal files. They are too big to inline without bloating your markup, and reusing them across pages is exactly where separate caching pays off. Encoding a large photo to Base64 is one of those things that works in a demo and quietly hurts a real site.
Decoding Back and Supported Formats
Going the other way is just as simple. Paste a Base64 string or a full data URI into the decoder and it reconstructs the original image, which you can then preview and download as a normal file. This is handy when you have inherited a data URI from someone else's stylesheet and want the actual image back. The tool handles the common raster and vector formats you are likely to meet: PNG, JPG, GIF, WebP, and SVG.
Everything happens in your browser through the built-in FileReader, so the file you choose never leaves your device and is never uploaded to any server. That matters when the image is a private screenshot, an unreleased design, or anything else you would rather not hand to a third party. When you are ready for a related task, browse every encoding tool in one place.
Standards and references
Frequently asked questions
How do I convert an image to Base64?
Select a local image in Encode mode and copy its generated data URI.
What is a Base64 data URI?
It is an inline representation that includes the image media type and encoded bytes.
How much larger does Base64 make an image?
The Base64 payload is about one third larger, with additional prefix overhead.
When should I avoid embedding images in Base64?
Avoid it for large or repeatedly reused images when separate files and caching are more efficient.
Is my image uploaded?
No. Input is processed in this browser tab and is not uploaded by the tool. Copy and download are actions you control; ordinary page analytics do not receive tool input.