Base64 Images: When and How to Use Data URIs

Base64 encoding allows you to embed image data directly into your HTML or CSS files as text strings, known as Data URIs. This technique can improve performance by reducing the number of HTTP requests your browser needs to make.

What is a Data URI?

A Data URI is a scheme that allows you to include data in-line in web pages as if they were external resources. The syntax looks like this:

data:[<mediatype>][;base64],<data>

For an image, it typically looks like:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

When to Use Base64 Images

1. Small Icons and Logos

This is the most common use case. If you have a handful of small UI icons (like social media logos or navigation icons), embedding them as Base64 strings in your CSS avoids a separate network request for each one.

2. Critical Above-the-Fold Images

If you have a critical image that must load immediately (like a hero background or logo), embedding it ensures it renders as soon as the HTML/CSS is parsed, without waiting for another round-trip to the server.

3. Single-File Documents

For email templates or offline-capable HTML files where you want to distribute a single file without external dependencies, Base64 is essential.

When NOT to Use Base64 Images

1. Large Images

Base64 encoding increases the file size by approximately 33%. For a 100KB image, the Base64 string will be ~133KB. This extra weight bloats your HTML/CSS and can slow down the initial page load.

2. Frequently Updated Images

If you change an image, you have to re-encode it and update your code. External files are easier to replace.

3. Browser Caching

External image files are cached by the browser. If you embed an image in HTML, it’s re-downloaded every time the HTML is fetched (unless the HTML itself is cached).

How to Use Base64 Images

In HTML

Use the Data URI in the src attribute of an <img> tag:

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

In CSS

Use it in background-image or other URL-accepting properties:

.icon {
  background-image: url('data:image/png;base64,...');
  width: 20px;
  height: 20px;
}

Performance Tips

• Limit Size: Only use Base64 for images under 10-15KB.
• Gzip/Brotli: Ensure your server uses Gzip or Brotli compression. Text compression works very well on Base64 strings, mitigating some of the file size increase.
• Lazy Loading: You can’t lazy-load an embedded Base64 image (it loads with the document). Use external files for images that are below the fold.