Base64 Encode
Encode text or files to Base64 in your browser.
Encoding tool
Image to Base64 Converter
Convert a PNG, JPG, GIF, WebP, or SVG into a Base64 data URI you can embed directly in HTML or CSS, or decode a Base64 string back into a downloadable image. Ideal for tiny icons, inline SVG, and single-file HTML emails. Everything runs 100% client-side, so your image never leaves your device.
100% client sideEncode or decodeNo upload
Drop an image here or click to browse
PNG, JPG, GIF, WebP, SVG. Processed in your browser, never uploaded.
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:
data:[mediatype][;base64],DATA
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.