Image to Base64

Convert an image into a data URI.

Convert an image file into a Base64-encoded data URI you can embed directly in HTML or CSS.

How it works

The file is read in your browser and converted to a data URI: a string starting with data:image/…;base64, followed by the image's bytes in Base64.

When it helps

Data URIs let you embed small icons or images directly in HTML, CSS or JSON without a separate file request.

How to use the result

The output is a complete data URI. In HTML, put it in an image tag's src attribute: <img src="data:image/png;base64,…">. In CSS, use it as background-image: url("data:image/png;base64,…"). The image displays without any extra file on your server.

The part before the comma tells the browser the file type, and everything after it is the image itself, encoded as text.

When it's a good idea

Data URIs are useful for tiny icons, single-file HTML pages, email templates that must show images without external links, and test data in code. They save one network request per image.

For anything larger than a few kilobytes, a normal image file is usually better: it's smaller, can be cached by the browser and reused across pages, and keeps your HTML and CSS readable.

Frequently asked questions

Should I embed large images this way?

Usually not. Base64 is about 33% larger and can't be cached separately, so it's best for small images.

Is the image uploaded?

No. Conversion happens locally in your browser.

Do all email clients show Base64 images?

Not all. Some clients block embedded data URIs, so test your template in the email apps your audience uses.

Tools In Orbit · About · Contact · Privacy · Terms