Convert an image to base64

The number nobody shows you

Base64 exists to move binary data through channels that only carry text. It does that by spending four printable characters on every three bytes, because it uses just 64 of the 256 values a byte can hold. The arithmetic is fixed and there is no clever encoder that beats it: the encoded copy is always one third larger than the file, plus a header of twenty-odd characters for the data:image/png;base64, part.

That is the single most useful fact about the conversion, and almost every converter online hides it. You paste in a photo, you get back a wall of text, you copy it, and you find out three days later that the stylesheet nobody wanted to touch is now most of a megabyte. This tool puts the original size, the encoded size and the increase on screen the moment the file lands — before there is anything to copy.

When image to base64 is the right call

Inlining a file trades bytes for a request. On a small file that trade is good, because the round trip to fetch a separate image costs more in latency than the extra third costs in transfer. Three cases where it clearly pays:

Small icons and UI ornaments. A one-kilobyte chevron, a checkbox tick, a pattern used as a repeating background. These arrive with the stylesheet that needs them, they never flash in late, and they never produce a stray 404 when a build step moves the assets directory.

Email templates. Many mail clients block linked images by default and display inline ones, so an embedded logo is the difference between a design that arrives and a set of grey boxes. Mail is also the one context where nobody expects caching, so the usual argument against inlining does not apply.

Single-file and offline documents. An HTML report you email to a colleague, a bug reproduction saved to one file, a slide deck exported for a machine with no network. Anything that has to survive being moved around on its own is better off carrying its images inside it.

When it is the wrong call

Above roughly ten kilobytes the trade stops paying, and above fifty it is almost always a mistake. Three reasons, and they compound:

It cannot be cached separately. A normal image file is fetched once and reused across every page and every visit. Inlined, it is part of whatever document contains it, so changing a single line of CSS forces the browser to download every embedded image in that file again.

It blocks rendering. A stylesheet is render-blocking by definition — the browser will not paint until it has parsed the whole thing. A 500 KB photo turned into 667 KB of base64 inside a stylesheet is 667 KB standing between the visitor and the first pixel. As a plain src, that same photo downloads in parallel, can be lazy-loaded, and never delays the text.

It multiplies across pages. The same image referenced from five pages is one file and one download. Inlined into five pages, it is five copies, each a third larger than the original, none of them shared.

If the file is too big to inline but has to be smaller anyway, the answer is compression rather than encoding — compress it to a target size first, and see whether it lands under the threshold. The broader question of what actually shrinks a file is covered in how to reduce file size.

SVG is the exception worth knowing

SVG is already text, so base64 makes it a third bigger for no reason at all. Percent-encoding an SVG into a data URI usually produces a shorter string than base64 does, and browsers handle it fine. If you paste a percent-encoded data URI into the decoder here it says so rather than reporting an invalid character, because that string is not broken — it is simply not base64.

Decoding, and what a broken string looks like

The decoder accepts what people actually have: a bare payload, a full data: URI, a string wrapped at 76 characters the way MIME does it, the URL-safe alphabet that uses- and _ in place of + and /, and padding that some encoders leave off entirely. When something genuinely is wrong it says which character, at which position, on which line — a stray quote at position 4,081 is a specific problem with a specific fix, and "invalid base64" is not.

The decoded image is rendered before the download button, deliberately. Half of decoding is confirming that the string you were handed is the image you expected, and a download button with no preview makes you check that in your file manager instead.

Nothing is uploaded

Encoding is a few dozen lines of bit-shifting, and it runs in this tab. There is no upload endpoint here to send anything to. That is worth stating plainly for this tool in particular, because the things people base64-encode tend to be signatures, identity documents, and screenshots of internal dashboards — files that are being embedded precisely so they do not have to be hosted anywhere.