Base64 to Image

What this tool is used for

• Previewing an embedded image from a data URI you found in a stylesheet or an API payload.
• Recovering a picture that was stored as a Base64 string in a database column.
• Checking what an inlined asset in a page actually is.
• Extracting an attachment that arrived Base64-encoded.
• Confirming a Base64 blob is an image before writing code to handle it.

Frequently Asked Questions

What does a data URI look like?

data:image/png;base64, followed by the encoded bytes. The MIME type matters — declaring image/png for JPEG data makes some browsers refuse to render it, and the comma separator is required.

When are data URIs worth using?

For very small images, where eliminating an HTTP request outweighs the 33% size increase Base64 adds. Above a few kilobytes the inflation and the loss of separate caching make a normal file better.

Why can't the browser cache a data URI?

Because it is not a separate resource — it is part of the document, so it is re-downloaded with every page load and cannot be cached independently. That is the main hidden cost of inlining.

Why does my Base64 string fail to decode?

Usually whitespace or line breaks introduced by copying, or a missing data: prefix. Base64 length must also be a multiple of 4 with correct = padding — truncation is the other common cause.

Should SVG be Base64-encoded?

No — URL-encoding is better for SVG. It is text, so percent-encoding often produces a SMALLER data URI than Base64's fixed 33% overhead, and it stays human-readable in the stylesheet.

How do I tell what format the decoded bytes are?

From the leading bytes rather than the declared MIME type — `iVBOR` at the start of a base64 string is a PNG signature, `/9j/` is JPEG. A wrong `data:` type is a common reason an image fails to render.

Is the base64 in my string URL-safe?

A data URI uses the standard alphabet, so `+` and `/` appear and must be percent-encoded if the URI is placed in a query string. Pasting one into a URL parameter unescaped is a frequent cause of corruption.

How large can a data URI be?

Browsers accept several megabytes in an `<img>` src but limit URLs far more tightly, and CSS files carrying large URIs delay rendering. Past a few kilobytes a real file request is usually faster.

Common errors and gotchas

• Leaving the `data:` prefix in place when the decoder expects raw Base64, or removing it when it does not.
• Assuming the declared MIME type is correct, since it is metadata and can disagree with the bytes.
• Feeding in Base64URL, whose `-` and `_` a standard decoder rejects.
• Losing padding in transit, after which some decoders refuse the string.
• Expecting a decoded blob to be an image at all, when Base64 carries anything.