Base64 to Image

How to convert Base64 to an image online

Paste your base64 image data in, press the button, get the picture out. The whole base64 decode to image online step happens in this page — the string never leaves your device, so there is no upload wait and no file sitting on somebody else's server. Three steps:

1. Paste the string. A bare base64 string to image online conversion works, and so does a full data URI starting data:image/png;base64,. Sample loads a real base64 image string example if you just want to see the tool work.
2. Press Convert. The bytes are decoded and the picture appears immediately, with its format, dimensions and file size beside it.
3. Download or copy. Download saves the file in whatever format it was encoded from — a PNG string gives a .png, a JPEG string a .jpg. This decodes rather than converts, so the file is identical to the original; to change the format afterwards, use the Image Format Converter — that is the whole of how to download Base64 image files, with no account and no waiting. The copy buttons give you an <img> tag, a CSS background-image, or the raw data URI.

The format comes from the bytes, not the header

Most converters trust the base64 image header — the data:image/png part — and name the download after it. That header is just text somebody typed, and it is wrong surprisingly often. A string labelled image/png whose bytes are actually JPEG will download as a .png that no viewer opens.

This page reads the file signature instead: the first few bytes of every image format are fixed, so the real type is knowable with certainty. If the header and the bytes disagree, the tool says so and uses the bytes. That is also why the base64 image extension on your download is always the right one.

Handy on its own: you can tell what a string contains just by looking at the first few characters, before decoding anything. That is what the base64 image mime type really is — a label, whereas the signature is the truth. BMP gets only two characters because its third one encodes part of the file size, so it lands on Qk0, Qk1, Qk2 or Qk3 depending on the file.

Reading a Base64 image without downloading it

Most of the time nobody wants a file at all — they want to know what a string is. A blob of Base64 turns up in an API response, a log line or a database column, and the only question is whether it really is the picture it claims to be — the base64 image meaning is never visible in the string, so you have to look. That makes this a base64 image reader first and a converter second: the base64 to image preview appears the moment you press Convert, and nothing is written to disk unless you ask for it.

A preview also answers questions a file listing cannot. The chequerboard behind the image shows whether the transparency survived. The dimensions confirm you have the full-size version rather than a thumbnail. Used that way, as a base64 image visualizer, it takes a couple of seconds to rule out the one thing that is hardest to debug blind: a string that decodes perfectly and simply contains the wrong picture.

Two places these strings turn up more than anywhere else. A base64 image email signature inlines a logo so it renders without the recipient having to load remote content — which many mail clients block by default. And exports from a base64 image editor or a canvas-based app hand you a data URI rather than a file, because the browser had nowhere to put a file. Both arrive as text, and both need turning back into an image before anyone can check them.

Adding a Base64 image to HTML and CSS

To add a base64 image to HTML, put the data URI in the src attribute. The Copy as <img> button writes that base64 image html code for you, so the base64 to image src value is already escaped and complete:

• HTML — <img src="data:image/png;base64,iVBORw0KGgo…">
• CSS — background-image: url("data:image/png;base64,…");
• Markdown — ![alt](data:image/png;base64,…)

Inlining suits small graphics: an icon, a logo, a base64 image with transparent background that has to sit inside a single self-contained file. It suits photographs badly. The encoded text is about a third larger than the file, it cannot be cached separately from the page, and the whole thing is re-downloaded every time that page changes. As a rough line, inline under 5 KB and link to anything bigger.

Why a string sometimes will not decode

Base64 is unforgiving about length: it comes in blocks of four characters, so if one is missing the whole tail fails. The usual causes are a copy that stopped short, a line-wrapped string that lost its ends, or extra characters picked up from the surrounding code. This page repairs the harmless cases automatically — surrounding quotes, src= prefixes, whitespace, URL-safe - and _, and missing = padding — and tells you specifically what is wrong when it cannot.

One case that is not an error at all: valid Base64 that simply is not a picture. If you paste an encoded sentence, the tool decodes it and says it found text, because a base64 image to text mix-up is far more common than a corrupt image. Use the Base64 decoder for text and the Image to Base64 encoder to go the other way — that is the base64 image encoder online half of the pair, and between them they cover both directions.

What Base64 does and does not cost you

Decoding is lossless. Base64 is an encoding rather than a compression, so the image you download is byte-for-byte the file that was encoded — there is no base64 image quality loss to worry about, at any size. What it does cost is bytes: four characters for every three, which is about 33% larger. Any base64 image size calculator is just doing that multiplication, and the Base64 Chars figure above shows both numbers side by side so you can see it.

There is no base64 image max length in the format itself. The limits come from whatever carries the string: a URL length cap, a database column, or an email client that quietly refuses a very large inline image. If the goal is a smaller file rather than a different encoding, the Image Compressor is the right tool, and the full story is in What Is Base64? And Why It Is Not Encryption.