Image to Base64 Converter

What this tool is for

A data URI embeds an image directly in your markup or stylesheet, removing one HTTP request. That is worth doing for a small icon and counterproductive for a photograph, since Base64 inflates the file by about a third and the result cannot be cached separately. The size comparison here makes that trade-off visible. Your images are processed by your own browser through the Canvas API. They are never uploaded, which means no queue, no size limit imposed by a server, and no copy of your photo sitting in someone else storage.

How to use it

1. Drop in an image.
2. Copy the output as a raw string, a CSS background rule, or an img tag.
3. Check the size increase before committing to it.

Frequently asked questions

When is a data URI a good idea?

Below roughly 5 KB: small icons, spinners, a single decorative shape. Above that the page grows, the browser cannot cache the image on its own, and the request you saved was cheaper than the bytes you added.

Why is the Base64 bigger than the file?

Base64 encodes three bytes into four characters, so the result is about 33 percent larger by design.