Extract Base64 images from CSS & HTML

Where inline images hide — and how to get them back out

Encoding images as Base64 is half of the story. Build tools inline every asset into one CSS bundle, single-file HTML exports carry their images inside the markup, email templates embed logos as data URIs to survive image blocking, and APIs hand images back as Base64 strings inside JSON. The moment you want the actual file back — to edit it, re-compress it, or drop it into a design tool — you are stuck eyeballing a ten-thousand-character string.

This page is the reverse direction of the Base64 encoder, built for bulk: paste the whole stylesheet, page source, or JSON dump, and it pulls out every data:image/…;base64 payload at once.

How to use it

1. Paste the source text. CSS, HTML, inline JS, raw email source, JSON — anything containing data URIs.
2. Press Extract. Each found image appears as a card with a preview, its detected format, decoded size and pixel dimensions.
3. Download what you need. Every card has a download button that saves the file with the correct extension — a PNG payload downloads as .png, a JPEG as .jpg, and so on.

How the extraction works

Base64 has a strict alphabet — A-Z a-z 0-9 + / = — so the scanner walks the text for data: MIME declarations followed by a valid Base64 run and stops exactly where the payload ends, even inside quotes or url() wrappers. Identical payloads are reported once (duplicates are marked), so a stylesheet that reuses the same sprite four times gives you one download, not four. Decoding is lossless: the downloaded bytes are a byte-for-byte copy of the original image, transparency and metadata included.

Typical situations

• Recovering assets from a built site. The original PNGs are gone, but the bundle has them inline — extract and save them back.
• Inspecting what a page actually ships. A "tiny" stylesheet hiding 400 KB of inlined hero images is easy to spot once every payload's decoded size is listed.
• Pulling images out of API or database dumps. JSON records that store avatars as Base64 text become real files again.
• Email forensics. Raw MIME source with tracking pixels embedded as data URIs, made visible.

What it does not do

Percent-encoded SVGs (data:image/svg+xml,%3Csvg…) are not Base64 and are skipped — those decode with plain URL unescaping instead. And an image whose payload was truncated in a copy will fail to preview; the tool tells you which cards are broken rather than silently downloading corrupt files.