Drop files here, or click to browse
Up to 5 MB. Smaller files are better suited for Base64.
How to use
01
Choose an image under 5 MB
Drop a file on the uploader. A thumbnail preview appears with the original file size next to an estimate of the encoded size, roughly 1.37 times larger.
02
Pick an output tab
Switch between the Data URI, Raw Base64, CSS, and HTML tabs. The CSS tab wraps the URI in a background-image rule, and the HTML tab produces a complete img element you can paste into markup.
03
Copy the string
Hit the copy button above the text box and paste the result into your stylesheet, HTML, or JSON payload. Use another swaps in a different file without reloading the page.
Why Image to Base64
- Encode any image as a Base64 data URI for inline embedding.
- Get data URI, raw Base64, CSS background, or HTML img tag.
- Useful for small icons or email-safe embeds, never exceeds your image size.
Common questions
Why is my Base64 string a third bigger than the image file?
Base64 represents every 3 bytes of binary as 4 text characters, an unavoidable 33 percent overhead, and the data URI prefix plus padding nudges it a little higher. That's why the preview estimates about 1.37 times the original size.
What's the difference between the Data URI and Raw Base64 tabs?
The Data URI tab includes the data:image/...;base64, prefix that browsers require to render the string directly. Raw Base64 is just the encoded payload, which is what you want when an API field or JSON schema expects the bare string.
How small should an image be before inlining it as Base64?
A few kilobytes is the comfortable zone; think icons, logos, and tiny UI textures. It only pays to convert image to base64 string output for assets that small, because larger files bloat your CSS or HTML and lose the benefit of separate caching.
Does Base64 image output work in email templates?
Support is patchy. Some clients render data URI images fine, while several major webmail clients strip or block them. Test in your actual target clients before committing, and keep a hosted image fallback for the ones that refuse.
Can I encode a WEBP or SVG file to Base64 here?
Yes, any image type your browser recognizes is accepted, and the data URI carries the file's real MIME type, such as image/webp or image/svg+xml. For SVG specifically, plain URL encoding is sometimes more compact than Base64, but both work.
Will a Base64 data URI show up in Markdown on GitHub?
No, GitHub's image proxy doesn't serve data URIs, so the image simply won't render there. Inlined images are best kept to HTML, CSS, and JSON payloads you control end to end.
Are Base64 inlined images cached by the browser?
Not independently. The image data is cached only as part of the stylesheet or page that contains it, so changing the image invalidates that whole file. That's another reason to reserve inlining for small, rarely changing assets.