ToolYard
📊

Image to Base64

Convert any image to a Base64 data URI for embedding directly in HTML, CSS or JSON. Instant, in-browser, no upload required.

✓ Free forever✓ No signup✓ 100% private — runs in your browser
Image → Base64
Convert images to Base64 data URIs for embedding directly in HTML, CSS, or JSON without external files.
📊
Drop an image or click to browse
Max 5MB · Any image format
Output Format
No image loaded
Base64 Output

A Base64 data URI encodes an image as text, letting you embed it directly in an HTML tag, a CSS rule, or a JSON payload with no separate file and no extra network request. It is a genuinely useful technique for small assets — and a mistake for large ones.

How to use the Image to Base64

  1. Upload the image you want to encode
  2. Copy the generated data URI, or just the raw Base64 if you need it without the prefix
  3. Paste it into your HTML src, CSS url(), or JSON field

When embedding is worth it

Every external image costs a separate HTTP request. For a handful of tiny assets — icons, a 1px gradient, a small logo in an email template — inlining removes that round trip and can render faster.

The catch is that Base64 inflates the data by roughly 33%, and inlined images cannot be cached separately from the document that contains them. A 500 KB background image inlined into your CSS means every visitor downloads 665 KB of CSS on every cache miss, and the browser cannot start rendering until it arrives.

A practical rule: inline below about 5 KB, link above it.

Using a data URI

In HTML:

<img src="data:image/png;base64,iVBORw0KG…" alt="">

In CSS:

.icon { background-image: url("data:image/png;base64,iVBORw0KG…"); }

The data:image/png;base64, prefix is part of the URI and must be included. The MIME type has to match the actual image format or the browser will refuse to render it.

Frequently asked questions

Why is the Base64 string larger than the original file?

Base64 represents every 3 bytes of binary data as 4 text characters, so the encoded form is about 33% larger. That overhead is the price of making binary data safe to embed in text.

Is there a size limit?

No hard limit, but data URIs over a few hundred kilobytes cause real problems: slower parsing, bloated HTML or CSS, and no separate caching. Keep inlined images small.

Do data URIs work in email?

Inconsistently. Gmail strips them, and several desktop clients block them. For email, host the image and link to it, or use a CID attachment.

Can I decode a data URI back to an image?

Yes — paste the Base64 portion into any Base64 decoder, or simply paste the whole data URI into your browser's address bar to view the image.