Is my image uploaded?

No. The file is read into a data URI in your browser. Nothing is transmitted or stored.

Why is the text so much larger than the file?

Base64 represents three bytes using four characters, so the encoded form is about 33% bigger by design. That overhead is the main reason not to inline large images.

Does inlining make my page faster?

For a few tiny assets, sometimes — you save the round trips. For anything substantial it usually makes things worse, because the data cannot be cached separately and it blocks the file that contains it.

Image to Base64

Runs in your browser

Convert an image into a data URI you can paste straight into CSS, HTML or JSON. Encoded in your browser.

Choose an image

About this tool

A data URI carries the image inside the document, so the page needs no separate request to display it. That is a real win for a handful of tiny assets — an icon in a stylesheet, a placeholder in an email template, a logo inside a self-contained HTML file. It is a poor trade for anything larger: base64 inflates the data by about a third, the bytes are re-downloaded every time the containing file changes, and the browser cannot cache the image independently. Use it deliberately, for small things.

How to use

Choose an image — small icons are the sensible use of this.
Pick the wrapper you need: the raw data URI, a CSS rule or an img tag.
Copy the result into your file.

When to use this tool

Inlining a small icon in a stylesheet to save a request.
Embedding a logo in a self-contained HTML email or report.
Putting an image into a JSON payload or config file.
Avoiding a broken image in a document that must travel as one file.

Tips

Compress the image before encoding — base64 of an unoptimised PNG is enormous.
SVG is usually a better choice than a base64 PNG for icons, and stays sharp at any size.
As a rough rule, inline below a few kilobytes and link above it.

Limitations

Base64 makes the data roughly a third larger, and inlined images cannot be cached separately from the file holding them. It is worth it for tiny icons, rarely for photographs.

FAQ

Is my image uploaded?: No. The file is read into a data URI in your browser. Nothing is transmitted or stored.
Why is the text so much larger than the file?: Base64 represents three bytes using four characters, so the encoded form is about 33% bigger by design. That overhead is the main reason not to inline large images.
Does inlining make my page faster?: For a few tiny assets, sometimes — you save the round trips. For anything substantial it usually makes things worse, because the data cannot be cached separately and it blocks the file that contains it.