How to extract an image from an HTML img tag on a Mac

You are reading a page's source, or an email, or a template someone sent you, and there is an <img> tag with a data URI in it. You want the picture as a file. Picking the payload out of the attribute by hand is fiddly and easy to get wrong by one character — which is the difference between a picture and nothing.

Do not do it by hand. Paste the whole tag into B64.

Extract the image

1. Copy the entire tag

   From <img to >. Extra attributes are fine — alt, class, width, whatever else is in there.

2. Open Decode and paste

   Press ⌘2 for Decode, then paste. The payload inside src is found and decoded.

3. Save the picture

   Save… writes it to disk with the right extension for what the bytes actually are. Copy Image puts it on the clipboard instead.

<img class="logo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg…" alt="Company logo" width="120">

Why pasting the whole tag is the safer move

Selecting just the payload means finding the comma after base64 and the closing quote, and getting both boundaries exactly right in a string that may be half a million characters long and soft-wrapped across a hundred screen lines. One character short at either end and it will not decode.

Pasting the tag hands that job to the app, which knows where the attribute starts and ends.

More than one image in what you pasted

Decode works on one payload at a time. If you have pasted a block of HTML with several embedded images in it, paste one tag at a time — or, if you have a file full of them, save each tag to its own .txt file and use Batch decoding.

What you learn about the image

Beside the picture: its real format, its dimensions and its size. In the Inspector (⌥⌘I): the type the tag declared versus the type the bytes really are, and a SHA-256 of the decoded bytes.

Troubleshooting

Nothing decoded

Check that the copy included the closing quote of the src attribute. A source view that soft-wraps a very long attribute makes it easy to stop early.

The tag points at a URL rather than a data URI

Then there is nothing to decode — the image is a separate file at that address. Base64 is only involved when src begins with data:.

The extension it saved with is not what the tag said

That is correct behaviour. The tag declared one type and the bytes are another; B64 trusts the bytes. See how to check the real format.

Going the other way

To produce a tag rather than take one apart, see how to embed an image in HTML.