Embedding Images as Base64 Data URIs in HTML and CSS

What a Data URI Actually Does

Normally, an <img> tag or CSS background-image points to a separate image file, which the browser requests over the network. A data URI embeds the image's actual data directly inline, as text, eliminating that separate request entirely — the browser already has everything it needs the moment it parses the HTML or CSS.

How to Use It

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="Icon">

/* Or in CSS */
.icon {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
}

When This Technique Actually Helps

• Small icons and simple graphics where the overhead of a separate HTTP request outweighs the size cost of inline encoding.
• Critical above-the-fold images you want to guarantee render immediately, without waiting on an additional network round-trip.
• Single-file HTML documents — emails, offline reports, or self-contained files where you can't rely on separate linked assets being available.

The Tradeoff to Keep in Mind

Base64 encoding increases file size by roughly a third compared to the original binary image, and an embedded image can't be cached separately by the browser the way a standalone image file can — every page load re-downloads it as part of the HTML or CSS itself. For anything beyond small icons, a normal linked image file is usually still the better default; this technique shines specifically for small, frequently-reused graphics where avoiding a request matters more than the size increase.