How to extract an image from a CSS file on a Mac
You can do this with B64 by pasting the whole declaration. Here is how, and what to do when a stylesheet has several embedded assets in it.
Stylesheets accumulate embedded assets — icons, arrows, textures, a checkbox tick — and sooner or later you need one of them back as a file. Perhaps you are redesigning, or auditing what is in there, or somebody inherited a stylesheet with no assets folder beside it.
This guide covers getting a picture back out of a CSS rule in B64.
There is no purchase and no account for any of this, and no time limit on it. Encoding and Batch are the paid features; turning Base64 back into a picture is not.
Extract the image
Copy the whole declaration
From
background-imageto the semicolon,url()wrapper and quotes included. Copying just the payload is more error-prone, not less.Open Decode and paste
Press ⌘2 and paste. The payload inside the
url()is found and decoded.Save it
Save… writes it to disk — into something like
/Users/you/Projects/site/img/— with the extension its bytes deserve.
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0…");Quoted, unquoted, or in shorthand
All of these carry the same payload, and all of them work:
| Form | Example |
|---|---|
| Quoted | url("data:image/png;base64,…") |
| Single-quoted | url('data:image/png;base64,…') |
| Unquoted | url(data:image/png;base64,…) |
In the background shorthand | background: #fff url("data:…") no-repeat; |
| In a custom property | --icon: url("data:…"); |
A stylesheet with several embedded assets
Decode handles one payload at a time. For a stylesheet with a dozen icons in it, the practical route is one rule at a time — copy, paste, save, repeat — or, if you have already split them into separate files, decode the folder in Batch in a single pass.
Look at the dimensions of each asset as you extract it. Stylesheets routinely carry images far larger than the size they are displayed at, and every one of those bytes is in a file the browser waits for before it paints anything.
What you learn
The format, the dimensions and the size sit beside the picture. The Inspector (⌥⌘I) adds the declared versus actual type and a SHA-256 of the decoded bytes — useful if you are checking whether two rules embed the same asset twice.
Troubleshooting
Nothing decoded
Check that the copy reached the closing parenthesis. Editors soft-wrap long values, which makes it easy to stop a line early.
The rule points at a file, not a data URI
Then the image is a separate file at that path and there is nothing to decode. Base64 is only involved when the url() starts with data:.
The SVG I extracted looks wrong
An SVG that referenced a font by name rather than embedding it will render with whatever font is available. See converting an SVG to Base64 for what does and does not travel inside the file.
Going the other way
To produce a rule rather than take one apart, see how to embed an image in CSS.
Frequently asked questions
Do I need to strip the url() wrapper?
No. Paste the whole declaration — quoted, single-quoted, unquoted or inside the background shorthand all work.
Can I extract every embedded image in a stylesheet at once?
Decode handles one payload at a time. Work rule by rule, or split them into separate text files and decode the folder in Batch.
What if the rule points at a file path instead?
Then there is no Base64 involved — the image is a separate file at that path.
How do I check whether two rules embed the same image?
Compare the SHA-256 of the decoded bytes in the Inspector. Identical images give identical checksums.