How to decode a data URI on a Mac

Data URIs turn up everywhere once you start looking: in a page's source, in a stylesheet, in an API response, in a configuration file someone checked in. You have one and you want to know what picture it is — and ideally without handing an unknown payload to a website.

This guide covers decoding one in B64.

Decode it

1. Open Decode

   Click Decode in the sidebar or press ⌘2.

2. Paste the whole thing

   Prefix included. data:image/png;base64, and everything after it. There is nothing to trim: the prefix is read for its declared type and the payload after the comma is decoded.

3. Look at what you got

   The picture appears beside the input, with its real format, its dimensions and its size. If the declared type and the actual bytes disagree, a short note says so.

4. Keep it

   Quick Look for full size, Copy Image for the clipboard, Save… for disk.

What the prefix is telling you

data:image/png;base64,iVBORw0KGgoAAAANSUhEUg…
     └───┬───┘ └─┬──┘ └──────────┬─────────┘
         │       │               └─ the payload, decoded
         │       └───────────────── the encoding
         └───────────────────────── what it claims to be

The middle part matters less than people think, and the first part matters more. The declared MIME type is a claim, and claims can be wrong.

When the claim is wrong

B64 reads the actual bytes and reports the format it really finds. When that disagrees with the declaration, you get a short note and the bytes win — because the bytes are the file.

Open the Inspector (⌥⌘I) to see both values side by side: declared and actual. Save the image and it is written with the extension its bytes deserve.

Variants you may meet

Where the URI is buried in something else

You do not need to extract it first. Paste the whole surrounding thing and the payload is found inside:

• An <img> tag — see this guide.
• A CSS url() — see this guide.
• A Markdown image reference — see this guide.

Very long URIs

A data URI carrying a photograph runs to millions of characters. B64 holds and decodes the whole thing; what changes is the display, which is shown in pages behind a View Text… button so the window is never asked to render a million characters at once.

Troubleshooting

Nothing appears

Usually a partial copy — a data URI is easy to truncate when selecting it out of a source view. Go back and take all of it, up to the closing quote or bracket. The full list of causes is in what to do when Base64 will not decode.

It decodes but there is no picture

The payload is valid Base64 of something that is not an image or a PDF. The characters were fine; the contents were something else.

The type is not what the URI said

That is the app telling you something useful. Trust the actual type — and consider fixing the URI at its source, since a wrong declaration will bite somewhere eventually.