Skip to content

Base64 to Image Converter

Decode a Base64 string or data URI back into an image in your browser. Preview, read dimensions & MIME, then download as PNG, JPG, GIF, SVG. No upload.

No Tracking Runs in Browser Free
Everything runs in your browser. Your images never leave your device.

Drop an image here, paste it, or click to browse

PNG · JPG · GIF · WebP · SVG · ICO · BMP — converted entirely in your browser

Reviewed for lossless decoding, magic-byte MIME detection, whitespace tolerance, and correct file-extension output — Go Tools Engineering Team · Jun 5, 2026

What is Base64 to Image Decoding?

Base64 to image decoding is the reverse of encoding: it takes a string of printable ASCII characters from the Base64 alphabet (A–Z, a–z, 0–9, + and /) and reconstructs the original binary image the string represents. Every group of four Base64 characters maps back to three bytes, and one or two trailing = characters indicate padding. The result is the exact file that was originally encoded — a PNG comes back as a PNG, a JPEG as a JPEG — with no loss, recompression, or resizing.

These strings show up wherever an image has been inlined as text. A data URI in a stylesheet (background-image: url(data:image/png;base64,…)), an img src in HTML, a thumbnail field in a JSON API response, an embedded logo in HTML email, or an asset bundled into a config file are all Base64 images waiting to be decoded. When you are debugging, auditing, or extracting such an asset, you need to see what the opaque string actually is and pull it out as a real file — which is exactly what this decoder does.

The operation is purely mechanical and requires no key, because Base64 is an encoding rather than encryption. That also means it offers no security: anyone with the string can recover the image instantly. Base64 exists solely to let binary data pass through channels designed for text — HTML, JSON, URLs, email headers — without being corrupted by control characters or delimiters. Decoding simply undoes that text-safe packaging and hands you back the original bytes.

This tool performs the entire decode locally in your browser. It tolerates the messiness of real-world strings — missing data: prefixes, line wrapping at 76 characters, stray whitespace from copy-paste — and infers the image format from the data's magic bytes when the MIME type is not declared. To create these strings in the first place, see the companion Image to Base64 encoder.

// A Base64 PNG payload (no prefix)
iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

// The decoder infers the format from the leading bytes:
//   iVBORw0KGgo → PNG
//   /9j/        → JPEG
//   R0lGOD      → GIF
//   UklGR       → WebP
//   PHN2Zy      → SVG (<svg)

// Reconstructed as a real file, downloadable as image.png
// (1 × 1 transparent PNG, 68 bytes — lossless round trip)

Key Features

Prefix-Optional Input

Paste a complete data URI or just the bare Base64 payload — the decoder handles both. When there is no data: prefix, it infers the MIME type from the image's magic bytes so the preview and download are still correct.

Instant Local Preview

The decoded image renders immediately against a checkerboard background, so transparent PNGs and partial-alpha graphics are clearly visible. Everything happens in your browser with zero network requests.

Dimensions, MIME & Size Readout

Beyond the preview, the tool reports the decoded pixel dimensions, the detected MIME type, and the reconstructed byte size — enough to verify you decoded the right asset before downloading it.

Whitespace-Tolerant Decoding

Strings wrapped at 76 characters per RFC 2045, or copied with stray spaces and line breaks, are cleaned automatically. The decoder strips all whitespace before decoding, so real-world copy-paste just works.

Lossless Download

Download rebuilds the exact original bytes and saves them with the matching extension — .png, .jpg, .gif, .webp, .svg, .ico, .bmp. No recompression or conversion: the file is identical to the one that was encoded.

Built-in Encoder

The Image → Base64 tab reverses direction: drop, paste, or browse to an image and get Base64, data URI, HTML, CSS, Markdown, and JSON output with size metrics and inlining advice — a complete round-trip in one tool.

Examples

Decode a PNG data URI

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==
1 × 1 PNG, transparent — preview rendered, downloadable as .png

Paste a full data URI and the tool renders the image immediately, reads its real dimensions and MIME type, and lets you download the reconstructed file.

Raw Base64 with no prefix

/9j/4AAQSkZJRgABAQEAYABgAAD…
JPEG detected from magic bytes — preview + download as .jpg

No data: prefix? No problem. The decoder inspects the leading characters, recognises the JPEG signature (/9j/), and builds a correct data URI for you so the image still renders.

Chunked (line-wrapped) Base64

iVBORw0KGgoAAAANS
UhEUgAAAAEAAAAB
CAYAAAA…
Whitespace stripped automatically — valid PNG decoded

Strings wrapped at 76 characters (RFC 2045) or copied with stray line breaks are cleaned automatically: the decoder removes all whitespace before decoding.

How to Convert Base64 to an Image

  1. 1

    Paste the Base64 string

    Drop in a full data URI or just the raw Base64 payload. The decoder strips whitespace and line breaks automatically and accepts input with or without the data: prefix.

  2. 2

    Check the preview and metadata

    The image renders instantly against a checkerboard so transparency is visible. The tool shows the decoded dimensions, MIME type, and byte size — inferring the format from magic bytes when no prefix is present.

  3. 3

    Download the image

    Click Download to save the reconstructed file with the correct extension. Decoding is lossless, so the result is byte-for-byte identical to the original encoded image.

Common Pitfalls

Truncated String (Lost Padding)

Base64 image strings end in zero, one, or two = characters. A copy that stops short — dropping the padding or the last few characters — cannot be decoded and shows an error. Re-copy the entire value to fix it.

✗ Wrong
…WjR9awAAAABJRU5ErkJggg
// missing trailing == — fails to decode
✓ Correct
…WjR9awAAAABJRU5ErkJggg==
// complete with padding — decodes cleanly

Pasting Non-Image Data

Base64 can encode any bytes, not just images. If you paste an encoded PDF, ZIP, or plain text, the string decodes but does not render as a picture. The tool reports that the data is not valid image data. Confirm the source really is an image before decoding.

✗ Wrong
JVBERi0xLjcN…
// this is a Base64 PDF (%PDF header), not an image
✓ Correct
iVBORw0KGgo…
// this is a Base64 PNG — renders correctly

Including the Wrapping Code

When copying from CSS or HTML, it is easy to grab the surrounding syntax — url("…"), src="…", or quotes — along with the data URI. Stray wrapper characters can break decoding. Copy only the data:…;base64,… value (or the bare payload), not the code around it.

✗ Wrong
url("data:image/png;base64,iVBORw0KGgo…")
// the url(" and ") are not part of the data
✓ Correct
data:image/png;base64,iVBORw0KGgo…
// just the data URI

Double-Encoded or URL-Encoded Strings

Occasionally a data URI is URL-encoded (%2B instead of +, %2F instead of /) or wrapped in another encoding layer. Decode that layer first. Our URL Decoder reverses percent-encoding so you are left with clean Base64 to paste here.

✗ Wrong
data:image/png;base64,iVBORw0KGgo%2B%2F…
// %2B / %2F are URL-encoded + and /
✓ Correct
data:image/png;base64,iVBORw0KGgo+/…
// URL-decode first, then decode the image

Common Use Cases

Extract an asset from a data URI
Found an image inlined in a stylesheet or HTML as a data URI and need the actual file? Paste the string, confirm the preview, and download the original PNG, JPG, or SVG — no need to host or re-create it.
Inspect an API response thumbnail
An API returned a Base64 image field and you want to see what it is. Paste the payload to render it instantly, read its real dimensions and type, and save it for closer inspection or bug reports.
Debug a broken inline image
An embedded image isn't rendering on your page. Drop its Base64 here: if it previews correctly, the data is valid and the problem is in your markup or MIME type; if it fails, the string itself is truncated or corrupt.
Recover an image from a config or theme file
Build tools and theme bundles often inline icons and logos as Base64. Decode the string to pull the asset back out as a normal file you can edit, re-export, or reuse elsewhere.
Verify a build-tool output
A bundler or script generated a data URI and you want to confirm it is valid and correct before shipping. Decoding it here is the fastest visual check that the encoding step produced the image you expected.
Convert Base64 back to a shareable file
Someone sent you an image as a Base64 blob in a chat or document. Paste it, preview it, and download a real file you can open, attach, or upload normally.

Technical Details

How Decoding Works
The browser's built-in atob converts the Base64 payload into a binary string, which the tool copies byte-by-byte into a Uint8Array. That typed array is wrapped in a Blob tagged with the detected MIME type, and an object URL points the preview and the download link at it. Every group of four Base64 characters yields three bytes; trailing = padding marks the one- or two-byte remainder. The process is exact and lossless — the reconstructed bytes match the original file precisely.
Magic-Byte Format Detection
When the input has no data: prefix to declare a MIME type, the decoder identifies the format from the first few Base64 characters, which encode the file's signature bytes. iVBORw0KGgo decodes to the PNG header, /9j/ to the JPEG SOI marker, R0lGOD to GIF, UklGR to the RIFF/WebP container, PHN2Zy and PD94bWw to SVG's
No Network, No Storage
Decoding, preview, and download are all local. There is no fetch, no XMLHttpRequest, and no server round trip — the only network activity the page ever performs is loading itself. Pasted strings are held in memory for the lifetime of the page and discarded when you close or reload it. This is what makes the tool safe for confidential imagery and usable offline.

Best Practices

Copy the Whole String, Including Padding
A Base64 image string must be complete to decode. Make sure you copy every character, especially the trailing = or == padding — a value that ends mid-string will fail. If decoding fails, re-selecting and re-copying the full string is the first thing to try.
Trust the Magic-Byte Detection for Prefixless Strings
If you only have the raw payload, paste it as-is — there is no need to hand-build a data: prefix. The decoder infers the format from the leading bytes and assigns the correct MIME type and extension. Only add a prefix manually if you specifically need to override the detected type.
Verify Dimensions Before Downloading
Use the reported pixel dimensions and MIME type as a sanity check that you decoded the asset you intended — especially when pulling one string out of a file containing several. A 1×1 result, for instance, usually means you grabbed a tracking pixel rather than the image you wanted.
Remember Base64 Is Not Secure
Decoding requires no key, so never rely on Base64 to hide image content. If you received a string expecting it to be protected, it is not — anyone can decode it here in seconds. Real protection requires encryption and access control, not encoding.
Re-encode Round Trips Losslessly
Decoding then re-encoding the same image is lossless, so you can safely round-trip through both tabs to test a pipeline. If you need to shrink the asset, compress the decoded file with our Image Compressor before re-encoding it to a smaller data URI.

Frequently Asked Questions

What does this Base64 to Image converter do?
It takes a Base64 string — or a full data URI like data:image/png;base64,… — and decodes it back into a real, viewable image, entirely inside your browser. You get an instant preview, the decoded pixel dimensions, the detected MIME type, and a Download button that reconstructs the original file with the correct extension. It is the reverse of encoding an image to Base64. The decoder is deliberately forgiving: it accepts input with or without the data: prefix, strips stray whitespace and line breaks, and infers the image format from the data's magic bytes when no MIME type is present. To go the other direction, use the Image → Base64 tab or our Image to Base64 encoder.
Is my Base64 data uploaded anywhere?
No. Decoding happens completely client-side. The string is turned into binary with the browser's built-in atob, rebuilt into a Blob, and rendered from a local object URL — no server, no network request, no logging. You can confirm this in your browser's Network tab: pasting a string and downloading the image triggers zero requests. That makes the tool safe for decoding strings that contain confidential or unreleased imagery pulled from a config file, an API response, or a stylesheet you are debugging.
Do I need to include the data: prefix?
No. You can paste either a full data URI (data:image/png;base64,iVBORw0KGgo…) or just the raw Base64 payload (iVBORw0KGgo…). When the prefix is present, the tool uses its declared MIME type. When it is absent, the decoder reads the first few characters — which map directly to the image's magic bytes — and infers the format: iVBORw0KGgo means PNG, /9j/ means JPEG, R0lGOD means GIF, UklGR means WebP, and PHN2Zy or PD94bWw means SVG. Either way you get a correct preview and a download with the right file extension.
What image formats can it decode?
Any format the browser can render from a data URI: PNG, JPEG/JPG, GIF (including animated), WebP, SVG, ICO, BMP, and AVIF where supported. Because the tool reconstructs the original bytes rather than re-encoding, transparency, animation, and vector scalability are all preserved exactly. The downloaded file is byte-for-byte the image that was originally encoded — decoding and then re-encoding is a lossless round trip.
Why does my Base64 string fail to decode?
The usual culprits are a truncated string that lost its trailing = padding, characters accidentally deleted or altered during copy-paste, a string that is actually text or some other binary rather than an image, or a wrong MIME type that prevents the browser from rendering otherwise-valid bytes. This decoder strips whitespace and tolerates a missing prefix, so those common issues are handled automatically — if it still cannot render, the data itself is incomplete or is not an image. Re-copy the entire value, including any trailing == padding, and try again.
How do I save the decoded image as a PNG or JPG?
Once the preview appears, click Download. The tool rebuilds the binary from the Base64 payload and saves it with the extension that matches the detected MIME type — .png for image/png, .jpg for image/jpeg, .svg for image/svg+xml, and so on. The download is reconstructed locally from the exact decoded bytes, so it is identical to the original file that was encoded. There is no format conversion: a Base64-encoded PNG downloads as a PNG, not a re-rendered copy.
Is decoding Base64 the same as decrypting it?
No. Base64 is an encoding, not encryption, and decoding requires no key or password — it simply reverses the 4-character-to-3-byte mapping. Anyone who has the string can recover the original image, which is exactly what this tool does. Base64 provides no confidentiality whatsoever; it exists only to let binary data travel safely through text-based channels like HTML, JSON, and email. If a string was genuinely encrypted before being Base64-encoded, decoding here will yield the encrypted bytes, not a viewable image.
Can it handle very long Base64 strings?
Yes. Because everything is processed locally, there is no upload size limit — the practical ceiling is how much text your browser can hold and decode comfortably, which is well into the multi-megabyte range on a modern machine. Very large strings (a high-resolution photo encoded as Base64 can be hundreds of kilobytes of text) take a moment to render but decode correctly. If you find yourself routinely decoding huge strings, that is often a sign the image should have been served as a normal file rather than inlined in the first place.
Where do these Base64 image strings come from?
You will most often encounter them embedded in CSS (background-image: url(data:image/png;base64,…)), in HTML img src attributes, inside JSON API responses, in email source, in SVG sprite sheets, and in configuration or theme files that bundle assets inline. Developers paste them here to see what an opaque data URI actually contains, to extract an asset that has no separate file, or to verify that a string a build tool produced is valid. The companion Image to Base64 tool produces exactly these strings.
Does decoding lose any quality?
No. Base64 is a lossless, exact representation of the original bytes — decoding returns precisely the file that was encoded, with no quality change, recompression, or resizing. If the source image was a compressed JPEG, you get that same JPEG back; if it was a lossless PNG, you get the identical PNG. The only thing that changes is the container (text string versus binary file). Any quality loss you see would have existed in the original image before it was ever encoded.

Related Tools

View all tools →