← Back to Blog

Using Base64 Images in HTML: A Complete Guide

Published on January 25, 2026 · 7 min read

Base64 images (also known as data URIs) allow you to embed image data directly in your HTML, CSS, or JavaScript files. Instead of making a separate HTTP request for each image, the image data is included inline as a Base64-encoded string.

What is a Data URI?

A data URI is a URL that starts with data: followed by the MIME type and the Base64-encoded data. The format looks like this:

data:[<mime-type>];base64,<encoded-data>

For example:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

Benefits of Base64 Images

  • Fewer HTTP requests: Each embedded image eliminates one request, reducing latency.
  • Self-contained files: A single HTML file can include all its images, useful for email templates and offline apps.
  • No CORS issues: Since the data is inline, there are no cross-origin restrictions.
  • Instant loading: Images are available immediately without waiting for a network request.

Drawbacks

  • Larger file size: Base64 encoding increases the size by about 33%.
  • No caching: The image data is part of the HTML and cannot be cached separately.
  • No lazy loading: All images are loaded immediately with the page, even if not visible.
  • SEO impact: Search engines may not index Base64 images as effectively.

When to Use Base64 Images

  • Small icons and logos: Images under 10KB benefit most from inlining.
  • Email templates: Many email clients block external images; Base64 ensures they display.
  • CSS sprites alternative: For a few small images, Base64 can be simpler than spriting.
  • Progressive Web Apps: Self-contained apps that work offline.
  • Favicons: Inline favicons in HTML for single-file pages.

When to Avoid Base64 Images

  • Large images: Photos and high-resolution images should remain as external files.
  • Repeated images: If the same image appears multiple times, an external file with caching is better.
  • Frequently changing images: Dynamic images should be loaded externally.
  • SEO-critical images: For better search engine indexing, use standard <img> tags.

Using Base64 in CSS

You can also embed Base64 images in CSS for backgrounds and other properties:

.icon {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0...");
  width: 24px;
  height: 24px;
}

Best Practices

  1. Keep it small: Only inline images under 10-15KB.
  2. Use for critical images: Inline above-the-fold images to improve LCP (Largest Contentful Paint).
  3. Combine with HTTP/2: HTTP/2 multiplexing reduces the need for inlining, but it still helps for very small images.
  4. Consider SVGs: SVG files can be inlined directly (without Base64) for even better compression.
  5. Test performance: Measure the actual impact on your page load time before committing to Base64.

Conclusion

Base64 images are a powerful tool for optimizing web performance when used correctly. The key is knowing when to use them — small, critical, and infrequently changing images benefit most from inlining. For everything else, stick with external image files and let HTTP caching do its job.

Use our Image to Base64 Converter to quickly generate data URIs for your images.