Base64 to Image

How it works

Paste the Base64 code into the input panel; if the data is a valid image, the preview appears instantly and the Download button saves the file with the detected extension. You do not need to clean the code up first: paste a CSS url('data:image/png;base64,…') line with its quotes, or an src value straight from an HTML source — the tool finds the data URI itself and strips line breaks and quote leftovers. For example, pasting the 40 KB logo line embedded in an e-mail template shows a summary like "PNG · 40 KB · 200×80 px" in the result line; the file type is decided from the first bytes of the decoded data (the file signature), not from the label at the start of the code. Base64URL, the dash-and-underscore alphabet used by JWTs and many APIs, is accepted as well. Your data never reaches a server — decoding happens entirely inside your browser.

This tool is also known as base64 to image, base64 image decoder, decode base64 image online, data uri to image, base64 to png.

What is Base64?

Base64 writes binary data using a safe alphabet of 64 text characters; this tool performs the reverse operation — decoding. During decoding every 4 characters shrink back to 3 bytes, so the file comes out roughly a quarter smaller than its encoded form. The = signs at the end are padding that rounds the byte count to a multiple of three; if they get lost while copying, this tool restores them automatically. Base64 is not encryption: anyone who can read the code can decode the data, so an image that must stay confidential is not protected by being Base64-encoded.

What is file signature (magic bytes)?

A file signature is the fixed byte sequence at the very start of a file that reveals its type: a PNG always begins with the bytes 89 50 4E 47, a JPG with FF D8 FF, a GIF with the letters GIF87a or GIF89a. Operating systems tend to trust the extension, but robust software trusts the signature, because extensions and data URI labels are written by hand and can be wrong. This tool reads the type of the decoded data from its signature: whatever the label claims, the file downloads with the extension that matches its real content and opens cleanly in viewers.

What is the difference between Base64 and Base64URL?

The two alphabets differ in exactly two characters: the + and / of standard Base64 become - and _ in Base64URL. The reason is practical — + and / carry special meaning in web addresses and file names, so data destined for URLs or JWTs is encoded with the safe twin. Base64URL also usually drops the trailing = padding. You will meet the standard alphabet in e-mail sources and CSS, and the URL-safe one in JWTs and API tokens. This tool accepts both: it maps dashes and underscores back to their standard counterparts, restores the missing padding and then decodes the data.

Code will not decode? The three usual causes

The first cause is incomplete copying: Base64 is one long line, and editors often copy only the visible part. If the tail is missing, the image either fails to open or comes out corrupted at the bottom — go back to the source and select the whole line.

The second cause is an alphabet mix-up: JWTs and many APIs produce Base64URL, which uses a dash instead of + and an underscore instead of /. This tool accepts both alphabets and restores missing = padding by itself. The third cause is that the data simply is not an image: the Base64 of a PDF or plain text decodes fine, but carries no image signature, so the tool shows a notice listing the supported formats.

Where does the extension come from? The file signature

The image/png label at the start of a data URI is a claim, and claims can be wrong. Instead of trusting it, this tool reads the first bytes of the decoded data: a PNG always starts with the same eight bytes, a JPG with FF D8 FF, a GIF with the letters GIF8.

The extension is chosen from that signature — if the label says JPG but the data carries a PNG signature, the file downloads as .png. A mislabeled data URI therefore never turns into a wrongly named file that some programs refuse to open. PNG, JPG, GIF, WEBP, BMP, ICO, AVIF and SVG are recognised.

Frequently asked questions

Do I paste the whole data URI or just the code?

Either works: paste the full line starting with data:image/png;base64,… or only the bare code after the comma. CSS url() wrappers, quotes and line breaks are cleaned up automatically.

Which image formats are recognised?

PNG, JPG, GIF, WEBP, BMP, ICO, AVIF and SVG. The type is determined from the file signature of the decoded bytes, not from the label in the code; if the signature is unknown, you get a notice listing the supported formats.

Is the pasted data sent to a server?

No. Decoding happens entirely inside your browser; neither the code nor the decoded image is sent anywhere. That makes it safe to use with data copied from internal systems too.

Why does my Base64 code fail to decode?

The most common reason is a truncated copy — make sure you selected the entire line. Base64URL (dashes and underscores) is not a problem, the tool decodes it too. If the data is not an image, the code decodes but you get a format notice instead of a preview.