Base64 to Image Converter

What base64 is for

Base64 rewrites binary data using only 64 characters that survive being pasted into text — the letters, digits, plus and slash. That lets an image travel through channels built for text: inside an HTML file, in a CSS stylesheet, in a JSON API response, in an email body, in a YAML config.

The cost is size. Every three bytes of the original become four characters, so a base64 string is about 33% larger than the file it encodes. That is fine for a 2 KB icon and a genuine problem for a 2 MB photograph.

Reading a data URL

A full data URL looks like data:image/png;base64,iVBORw0KGgo… and has three parts: the media type, the encoding, and the payload. Together they tell the browser everything it needs to render the image without fetching anything.

If your string has no prefix, the format can still be worked out from how it begins, because each format starts with a recognisable signature:

Why a paste sometimes fails

• Line breaks. Editors wrap long strings. Harmless, and stripped automatically here.
• URL-safe base64. Some APIs use hyphen and underscore in place of plus and slash so the string can sit in a URL. Also handled automatically.
• Missing padding. The trailing equals signs are sometimes dropped. They are restored here.
• A truncated copy. The usual real failure — the selection stopped short. Nothing can recover a string that is missing its end; go back and copy it all.
• It is not an image. Base64 encodes any binary. A PDF, a font or a ZIP will decode fine and then fail to display.

When to embed an image as base64, and when not to

Worth it for tiny assets that would otherwise cost a separate network request: an icon in a CSS file, a logo in an email template, a placeholder in a single-file HTML export, a small image inside a JSON payload.

Not worth it for anything large. A base64 image cannot be cached separately from the file it lives in, so every page load carries it again, and it blocks parsing while it is read. As a rough line, under about 4 KB is usually a win; above that, serve a real file.

A note on pasting things you did not create

Base64 blobs often come out of API responses, browser storage and config files, and can carry more than you expect — including metadata in the original image. Decoding here happens entirely in your browser and nothing is transmitted, which is worth knowing before pasting something sensitive into any online tool.