Base64 Image Encoder/Decoder
Drop an image to get a clean Base64 string for CSS or HTML — or paste a Base64 string to preview and download it as a real image file.
Encode or decode Base64 images
How to use this tool
-
1
Pick a direction. Encode turns an image into a Base64 string; Decode turns a Base64 string back into an image.
-
2
Drop your file or paste your string. Everything processes instantly, right in your browser.
-
3
Copy or download the result. Grab the Base64 string for your CSS/HTML, or download the decoded image as a real file.
About This Tool
Base64 encoding turns binary image data into plain text, which is useful when you want to embed a small image directly inside a CSS file or HTML document instead of linking to a separate file — handy for tiny icons or when you want to avoid an extra network request.
Worth knowing: Base64 text is roughly 33% larger than the original file, so this is best for small images (icons, small logos), not full photos — a large encoded image will actually slow your page down more than a normal image reference would.
Frequently Asked Questions
Why is my encoded string so much longer than the file?
Base64 encoding always inflates size by about 33%. A 30 KB image becomes roughly a 40 KB string — that's expected, not a bug.
What if my pasted string doesn't have a "data:image" prefix?
A dropdown will appear letting you specify what image type it is, so the tool knows how to reconstruct it correctly.
Is there a file size limit?
No hard limit, but very large images (multiple megabytes) can make the browser feel sluggish while processing — this tool works best for icons and small graphics.
Is my image uploaded anywhere?
No. Everything happens locally in your browser using the File API. Nothing is sent to a server.