FAQ
When should I use a Base64 image?
For small icons and logos inlined into CSS or HTML to save an HTTP request. Avoid it for large images.
How much larger does Base64 make a file?
About 33% larger, since every 3 bytes become 4 characters. That is why large images are a poor fit for inlining.
Can it be converted back?
Yes. Paste the DataURL or the raw Base64 back into the tool and it recognises the format and restores the image.
About this tool
Pick an image and you get two outputs at once: the full DataURL (data:image/png;base64,…) and the plain Base64. The first can go straight into <img src>, a CSS url() or an inline style; the second is for API fields, email bodies and config files where only the data itself belongs.
It grows by about a third, because every 3 bytes become 4 characters — so the "file size → Base64 length" pair in the panel will not match, and that is expected. Bigger images are a worse deal: icons and small logos are fine to inline, photos are not — inlining a photo bloats your CSS or HTML and cannot be cached separately.
The reverse direction works too: paste a DataURL or plain Base64 on the right and it detects the MIME type, previews the image and can download it back. Content with line breaks is accepted as well — MIME's 76-column wrapping and newlines inserted by chat clients are stripped, and base64url's - and _ are normalised back to + and /.
Remember that plain Base64 carries no type information: with data only, the MIME type comes from the dropdown, and a wrong guess means a failed decode or a garbled preview — when handed an unknown Base64 string, work out whether it was PNG or JPEG first. The downloaded .txt contains the full DataURL rather than bare Base64, so it can be pasted into src directly.