In short: Image to Base64 conversion encodes an image file as a Base64 data URL (data:image/png;base64,…) that can be embedded directly in HTML, CSS or JSON.
About Image to Base64
A data URL embeds a file directly in text: data:image/png;base64,iVBORw0…. Inlining small icons this way saves an HTTP request, lets you put images into a single self-contained HTML email or file, and is how many APIs accept image uploads inside JSON.
Pick an image and get its Base64 string in four ready-to-paste forms. The size of the encoded text is shown, because Base64 adds about a third to the file size — great for a 2 KB icon, wasteful for a 2 MB photo. The reverse box decodes any Base64 image string so you can see what an API returned.
How to use Image to Base64
- Choose or drop an image file.
- Pick the output form: data URL, raw Base64, HTML tag or CSS rule.
- Copy the result into your code.
- To inspect a Base64 string, paste it into the lower box and press Show image.
Examples
.icon{background-image:url(data:image/svg+xml;base64,…)} removes one request for a tiny SVG icon.
An API returns "avatar": "iVBORw0KGgo…". Paste it in the decoder to see the actual picture.
Frequently asked questions
When should I not use Base64 images?
For anything larger than a few kilobytes. Base64 is about 33% bigger than the binary file and cannot be cached separately by the browser.
Is the MIME type detected automatically?
Yes, from the file you choose. When decoding raw Base64 without a prefix, the image type is guessed from the first bytes.
Is SVG supported?
Yes. For SVG you can also use URL-encoded text instead of Base64, which is often smaller.
Are files uploaded?
No. Encoding happens in your browser. You can check this yourself: open your browser’s developer tools, switch to the Network tab and use the tool — no request carries your input.
Updated November 2026 · Free, no signup · How we build and test tools