How to embed an image in HTML or CSS with a Base64 data URI

Normally an image on a web page is a separate file the browser fetches. A data URI puts the image directly in the code instead, as a long string of text. That saves a request and keeps a component self-contained, at a cost that is easy to underestimate.

What a data URI looks like

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…

• data: says the content follows inline.
• image/png is the media type.
• ;base64, says the bytes are Base64-encoded.
• The rest is the image itself, as text.

Make one step by step

1. Shrink the image first with Compress Image. Every byte saved here saves a third more in the data URI.
2. Open the Base64 Encoder, choose a file and tick “Produce a data URI”.
3. Copy the output and use it where you would normally put an image address.

In HTML: <img src="data:image/png;base64,…" alt="…">. In CSS: background-image: url("data:image/png;base64,…").

The size cost

Base64 represents every 3 bytes as 4 characters, so the encoded image is about 33% larger than the file. The encoder shows the overhead. A 30 KB image becomes about 40 KB of text. Compression on the web server claws some of that back, but not all.

When a data URI helps

• Tiny icons and decorations, a few hundred bytes to a couple of kilobytes, where a separate request costs more than the extra bytes.
• Self-contained HTML files, such as a report or an offline page that must work without other files.
• Small images inside JSON or configuration, where a file path is not possible.

When it hurts

• Large images: the page or stylesheet becomes much bigger and must be fully downloaded before anything renders.
• Repeated images: a separate file is cached once and reused across pages; a data URI is downloaded again with every page or stylesheet that contains it.
• Emails: many email programs, including popular webmail services, block or strip data-URI images. Use hosted images or attachments for email instead.

Fonts as data URIs

Some tools inline web fonts into CSS as data URIs. It avoids a separate request, but a font file is often tens of kilobytes, so the stylesheet grows by a third more than that, and the browser cannot show any styled text until the whole stylesheet has arrived. For most sites, a normal WOFF2 file, preloaded if it matters, is faster.

SVG without Base64

SVG images are already text. Instead of Base64, they can be URL-encoded into a data URI such as data:image/svg+xml,%3Csvg…, which is usually smaller than the Base64 version. The URL Encoder handles the escaping.

Turn one back into a file

Found a data URI in someone's code and want the image? Paste it into the Base64 Decoder, which accepts data URIs directly and lets you download the result as a file. For Base64 in general, see what Base64 is and when to use it.