How to convert a PNG to Base64 on a Mac
You can do this with B64, on your own machine. Here is how, plus what happens to the alpha channel and why PNG is the format you meet in data URIs most often.
PNG is the format most embedded images turn out to be: icons, logos, UI assets, diagrams, screenshots — anything with flat colour, sharp edges or transparency. It is also the format whose Base64 you are most likely to recognise on sight, because every PNG payload starts iVBORw0KGgo.
This guide covers encoding a PNG in B64, what happens to transparency, and how to choose between the five output formats.
The conversion runs in the app, on your Mac. Nothing is uploaded and there is no account, so a picture that should not leave the building does not have to.
Encode a PNG
Open Encode
Click Encode in the sidebar or press ⌘1.
Load the PNG
Drag it from the Finder onto the Encode area, click Choose File… (⌘O), or press ⇧⌘V to encode a copy already on your clipboard.
Pick the output format
Use the menu above the result. For a PNG heading into a web page or a stylesheet you almost always want Data URI, HTML or CSS; for a config file or a JSON field, Plain Base64.
Copy or export
Copy (⇧⌘C) or Export… (⌘E).
Transparency survives, because nothing is re-encoded
B64 does not re-encode your image at all. It takes the exact bytes of the PNG file and re-expresses them as text. The alpha channel, the colour profile, the bit depth, any embedded metadata — all of it is in those bytes, so all of it comes back when the string is decoded.
You can prove it to yourself without spending anything: encode the PNG, paste the result into Decode (which is free), and compare the SHA-256 checksums shown in the Inspector for the source and for the decoded bytes. They are identical.
Which output format for a PNG?
| Where it is going | Format | What you paste |
|---|---|---|
| A stylesheet | CSS Background | background-image: url("data:image/png;base64,…"); |
| A web page or an email template | HTML | <img src="data:image/png;base64,…"> |
| A README or a spec | Markdown |  |
A browser address bar, or an href | Data URI | data:image/png;base64,… |
| A JSON field or a config file | Plain Base64 | iVBORw0KGgo… |
Size: the thing to watch with PNG
PNG is lossless, which is exactly why you chose it and exactly why its files are larger than the equivalent JPEG for photographic content. Base64 then adds another 33%. A 40 kB icon becomes about 54 kB of text, which is nothing; a 4 MB PNG screenshot becomes about 5,4 MB of text, which is not nothing at all.
The Inspector (⌥⌘I) shows the character count and the exact overhead, so you can check before you paste it somewhere with a limit. If the number is uncomfortable, the lever to pull is the source image rather than the encoding — a smaller or more appropriately compressed PNG, or a JPEG if the content is photographic and transparency is not needed.
Embed the small PNGs that must not go missing — icons, logos, spacers, a signature image — and leave the big ones as files.
Line wrapping
Plain output can be wrapped at 64 or 76 columns for tidiness or for a consumer that expects it. The wrapped and unwrapped forms decode identically. Wrapping is not offered for the data URI, HTML, CSS and Markdown formats, because a line break in the middle of any of those would break the thing you are producing.
Copying and exporting the result
Copy (⇧⌘C) puts the complete string on the clipboard. Export… (⌘E) writes it to a .txt file. Both always use the whole result, even when a long one is displayed in pages.
If you find yourself doing this often, turn on copy after encoding in B64 ▸ Settings… ▸ General. Dropping the file then is the whole interaction — the result is on your clipboard before you have reached for a shortcut.
A folder of PNGs
Dropping a folder of icons into Batch (⌘3) encodes every one of them in a single pass and writes each result as its own text file. How to convert a folder of images to Base64.
Troubleshooting
My PNG has a transparent background but the embedded version looks white
The transparency is in the data — check by decoding the string and looking at the result, where transparent areas are drawn against a checkerboard. If it is transparent there, the white is coming from whatever is behind the image where you embedded it, not from the encoding.
The file was refused
A file named .png whose bytes are something else will be judged on the bytes. Open it and look at what it actually is.
The data URI does not render in one particular place
Check for a stray line break, and check that the whole string made it across — a truncated payload is the usual culprit. There is a fuller list in how to fix a data URI that will not load.
Frequently asked questions
Does converting a PNG to Base64 lose transparency?
No. The encoding represents the exact bytes of the PNG file, and the alpha channel is part of those bytes. Decode the string and the transparency is still there.
Why does every PNG Base64 string start with iVBORw0KGgo?
Because every PNG file starts with the same eight-byte signature, and Base64 is deterministic — the same bytes always produce the same characters.
How much bigger will my PNG get?
About a third, plus a little if you wrap the lines. The Inspector shows the exact character count and percentage for your file.
Should I embed a PNG or link to it?
Embed small assets that must not go missing — icons, logos, a signature. Leave large images as files, since an embedded one cannot be cached separately and is downloaded whether or not it is seen.