How to Convert Base64 to an Image

Sooner or later every developer stares at a wall of iVBORw0KGgoAAAANSUhEUg… wondering what image is trapped inside. Base64 is how binary images travel through text-only channels — JSON APIs, CSS files, HTML emails, database columns — and decoding it back is a ten-second job when you know the shape of the data.

The anatomy of an embedded image

A full data URI has three parts:

data:image/png;base64,iVBORw0KGgo…

— the scheme, the declared MIME type, and the Base64 payload. But you'll often meet the payload alone, stripped of its prefix. That's fine: the image format is identifiable from the data itself.

Magic bytes: reading the format from the string

Every image format begins with signature bytes, and Base64 encodes them into recognizable prefixes:

• iVBOR → PNG
• /9j/ → JPEG
• R0lGO → GIF
• UklGR → WebP
• PHN2Z → SVG (it's the text “<svg”)

This is also a debugging superpower: when a server claims image/png but the payload starts with /9j/, you've found your bug — it's a JPEG with the wrong label.

The five classic decoding failures

• Whitespace inside the string — line breaks from copy-pasting out of logs or emails. Strip all whitespace first.
• Truncation — the copy missed the end. Base64 length should be a multiple of 4; a wrong remainder means missing data.
• URL-safe variant — - and _ instead of + and /. Swap them back before decoding.
• Double encoding — decoding yields another Base64 string instead of binary. Decode again.
• Missing padding — strict decoders demand trailing =; add until the length divides by 4.

Size expectations

Base64 inflates data by ~33% — every 3 bytes become 4 characters. A 30 KB image is a ~40 KB string. If your “image” string is 200 characters long, it's an icon at best; if a JSON response feels bloated, embedded Base64 images are the usual suspect.

Decode without leaving your browser

The Base64 to image converter accepts raw Base64 or a full data URI, strips whitespace automatically, sniffs the real format from the magic bytes, previews the image and downloads it with the right extension — all locally, so sensitive screenshots stay on your machine. Going the other way, the image to Base64 tool builds data URIs, and the plain Base64 encoder/decoder handles text payloads.