Base64 to Image — Decode a Data URI

How to use it#

Paste the base64 into the box. A data URI, a CSS background rule, or an img tag works too.
Check the preview, and the format in the figures beside it.
Download the image. It is saved with the extension of its real format.

Whatever you copied, as it is#

Base64 images turn up in many wrappers: a data URI in a JSON response, a background rule in a stylesheet, an img tag in an email template, or the bare base64 from an API that leaves the prefix off. Paste any of those as it is. The tool finds the data inside and ignores the rest, so there is no need to trim anything by hand first.

Line breaks, spaces, and the URL-safe variant of base64 with - and _ in it are all read correctly, and missing padding at the end is filled in. A data URI written with percent escapes rather than base64, the usual way to inline an SVG, is read too.

The format comes from the bytes#

A data URI names its type at the start, but that is only a label, and it can be wrong: code copied between projects easily ends up with a JPEG labelled image/png. The browser shows it anyway, so the mistake goes unnoticed, but a file saved under the label would get the wrong extension and confuse whatever opens it next.

So the type is read from the decoded bytes, the same way an image viewer does. When the label and the bytes disagree, the tool says so and names the file by its real format. PNG, JPEG, GIF, WebP, AVIF, SVG, BMP, ICO, and HEIC are all recognised.

When the text will not decode#

The most common reason is a string that was cut short, by a log that truncates long lines or a copy that missed the end. Base64 is written in groups of four characters, and a string that stops partway through one cannot be decoded. One cut between groups decodes to the start of an image with the rest missing. Either way, the tool says so rather than handing back half an image.

Text that decodes but is not a picture, such as a PDF or a JSON document someone encoded, is reported with its size, so you know it decoded and is not an image. The base64 encoder and decoder handles text of that kind.

Frequently asked questions#

Is the image uploaded to decode it?

No. The text is decoded by your browser, in this tab, and the file is made here. Nothing is sent to a server, so an image pulled out of a private API response stays on your machine.

What can I paste here?

A data URI such as data:image/png;base64,…, the base64 on its own, a CSS rule with url(…) in it, or an HTML img tag. The tool finds the data in any of them. Whitespace, line breaks, and URL-safe base64 are fine.

Why does it say the format is different from the data URI?

The label at the start of a data URI is only text, and it can be wrong after being copied between projects. The tool reads the real format from the bytes and saves the file with the matching extension, so the file opens correctly everywhere.

Can I turn base64 into a PNG or a JPG?

You get the image in the format it was encoded in, so base64 of a PNG downloads as a .png and base64 of a JPEG as a .jpg, byte for byte. If you need the other one, take the download to the PNG to JPG converter or the JPG to PNG converter. The Format figure beside the preview says which one you have.

Why is there no preview for my image?

It is a HEIC, the format iPhones save photos in, which most browsers cannot display. The file still downloads as it is, and the HEIC to JPG tool converts it into a JPEG that everything can open.

Is it safe to decode an SVG someone sent me?

Yes, here. The preview shows the SVG as an image, and browsers do not run scripts inside an image. Opening the downloaded .svg file directly in a browser tab is different, since scripts in it can run there, so open an SVG from a stranger in an image viewer instead.