Image → Base64

Encode an image as a Base64 data URI

Converting an image to a data URI lets you drop it straight into CSS, HTML or a JSON payload with no separate file to host. It is genuinely handy for tiny assets and for embedding images in systems that only accept text. The cost is a 33 percent size increase and the loss of independent browser caching.

How to use it

1. Upload any image file.
2. Encode it to produce a complete data URI, prefix included.
3. Copy the string into your stylesheet, markup or API request.
4. Compare the encoded length against the original before using it for anything sizeable.

Frequently asked questions

How large an image is too large to inline?

As a rule of thumb, stop around 2 to 5 KB. Beyond that the page grows, the inlined bytes are re-downloaded with every page load rather than cached, and you lose the ability to serve the image lazily.

Why is the string a third bigger than my file?

Base64 encodes three bytes of binary as four text characters. That roughly 33 percent overhead is inherent to the format, not something a tool can optimise away.

Does this compress or change my image?

No. It re-encodes the exact same bytes into a text representation. Compress or resize the image first if you want it smaller, because encoding will not do it for you.

Can I use the result directly in CSS?

Yes. The output includes the data:image prefix, so it can be pasted straight into a background-image url() or an img src attribute.