PlayTools

Image to Base64 Converter

Turn an image into a Base64 data URI (or raw Base64), or paste Base64 back into a PNG. Encoding stays in your browser.

Runs in your browser — nothing you enter is uploaded

Drop an image here, or click to browse

JPEG, PNG, WebP, GIF or SVG. Stays in your browser.

Base64 → image

Encoding and decoding happen in your browser. A data URI is typically about 33% larger than the binary file. Do not put secrets in Base64 — it is encoding, not encryption.

Advertisement

When an image belongs in a data URI

Base64 turns binary bytes into ASCII. Wrapped as a data URI (data:image/png;base64,…) it can be inlined in HTML, CSS or JSON so a tiny icon does not need a second HTTP request. The cost is size: Base64 expands data by about a third, so it is a bad idea for large photographs.

Use it for favicons, CSS background ticks, email signatures with a small logo, or embedding a test fixture in a unit test. Do not use it as encryption — anyone can decode it — and do not dump a 4 MB photo into a stylesheet.

This page reads the original file (not a re-encoded canvas) so SVG and GIF bytes stay intact. The reverse box accepts a data URI or raw Base64 and downloads a PNG preview of whatever the browser can decode.

If you need to hash the same file, use the Hash Generator. If you need to shrink it first, compress or resize, then convert.

Everything stays in the browser. Very large strings can freeze the page while they are copied — that is a clipboard/DOM limit, not an upload.

These free tools pair well with this page — open them in a new tab to finish your workflow.

Advertisement

Frequently Asked Questions

What is a data URI?

A data URI embeds the file in a URL, like data:image/png;base64,iVBOR… so HTML or CSS can show the image without a second request. It is the original bytes, Base64-encoded, with a MIME prefix.

Why is the output larger than the file?

Base64 uses four characters for every three bytes, so the string is about 33% bigger than the binary, plus the data: header. That is why inlining is only a win for tiny assets.

Is Base64 encryption?

No. Anyone can decode it. Do not put secrets, API keys or private photos into a data URI and treat it as hidden.

Does this re-encode my PNG or SVG?

No. The forward direction reads the original file with FileReader, so GIF and SVG bytes stay intact. The reverse box asks the browser to decode whatever you pasted and then saves a PNG.

When should I inline an image?

Small icons, CSS ticks, email signatures, and test fixtures. Not hero photos or anything you would normally put on a CDN.

Is anything uploaded?

No. Encoding and decoding are local. Very large strings can stall the page while they are copied — that is the clipboard, not a network upload.

Can I convert Base64 back to a file?

Yes. Paste a data URI or raw Base64 into the reverse box and download a PNG of whatever the browser can decode.