Image to Base64
Turn an image into code you can inline in HTML or CSS — and back again.
Drop an image here
The image is read in your browser only — nothing is uploaded.
About this tool
Image to Base64 turns an image file into a data URI you can inline directly in HTML or CSS — and converts one back into an image.
The benefit of inlining is one fewer request: the page doesn't have to fetch the image separately, which genuinely helps when you have a handful of small icons.
But there is a trade-off worth knowing. Base64 is always about a third larger than the file, and once the image is part of your HTML or CSS the browser can no longer cache it separately — change one line of CSS and every visitor re-downloads the image too. So the tool shows the size increase plainly and warns when an image is bigger than inlining can justify.
As a rule inlining pays off under about 10 KB, especially for SVG icons; above that, keep the image as a separate file. Everything runs in your browser and nothing is uploaded.
How to use
- 1Drop an image in or choose one from your device
- 2Check the before and after size and how much larger it got
- 3Copy the data URI, or the ready-made CSS line
- 4Switch to decode mode to paste a Base64 string and see what image it is
Frequently asked questions
- Why is the Base64 bigger than the file?
- Base64 encodes every 3 bytes as 4 characters, so it is always about a third larger. That is inherent to the format, not a flaw.
- When is inlining worth it?
- For icons and very small images, under roughly 10 KB, where you save a separate request. For larger images it costs more than it saves: your HTML or CSS grows by the same amount and the browser can no longer cache the image separately.
- Does it differ between CSS and HTML?
- Both work. In HTML it goes in an img tag’s src; in CSS it goes inside url() on background-image. The ready-made CSS line is provided for copying.
- Which formats are supported?
- Anything your browser can read — PNG, JPEG, GIF, WebP, SVG and AVIF. SVG icons benefit most, because they are small to begin with.
- Is my image uploaded?
- No. The conversion happens entirely in your browser; the image is never sent to a server.