Data URIs: Embedding Images Directly in Code

December 11, 2025 Image to Base64

What if you could include images directly in your HTML or CSS, eliminating HTTP requests entirely? Data URIs make this possible. Let's explore when this technique shines and when it falls short.

What Is a Data URI?

A Data URI embeds file contents directly in code using Base64 encoding:

<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." />

The format:

data: - URI scheme
image/png - MIME type
;base64, - encoding declaration
iVBORw0KGgo... - Base64 encoded data

Convert images with our image to Base64 tool.

Benefits of Data URIs

Reduced HTTP Requests

Each image normally requires a separate request. Embedded images load with the document. For pages with many small images, this can significantly improve perceived performance.

Simplified Deployment

Everything in one file means fewer files to manage, deploy, and cache-invalidate.

Inline Icons

Small icons embedded in CSS avoid request overhead:

.icon-star {
    background-image: url("data:image/svg+xml;base64,...");
}

Email HTML

Some email clients block external images. Embedded images often display more reliably.

Drawbacks of Data URIs

33% Size Increase

Base64 encoding increases file size by approximately 33%. This overhead can negate the request savings for larger images.

No Caching

External images cache independently. Embedded images re-download with each HTML/CSS file.

Render Blocking

CSS must fully load before rendering. Large embedded images delay first paint.

No Lazy Loading

Can't defer loading of embedded images based on viewport visibility.

Code Bloat

Long Base64 strings make files harder to read and maintain.

When to Use Data URIs

Good Candidates

Images under 1-2 KB
Icons used frequently across pages
Critical above-the-fold images
Single-use images (email templates)
SVG icons in CSS

Bad Candidates

Large images (photos, illustrations)
Images used on multiple pages
Images that change frequently
Lazy-loaded images

Implementation Methods

In HTML

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

In CSS

.logo {
    background-image: url("data:image/svg+xml;base64,...");
}

In JavaScript

const img = new Image();
img.src = "data:image/png;base64,...";

SVG as Data URI

SVG is already text, so you can use URL encoding instead of Base64:

background-image: url("data:image/svg+xml,%3Csvg...");

This avoids the 33% Base64 overhead but requires proper escaping.

Build Tool Integration

Automate data URI conversion in your build process:

webpack

// url-loader automatically inlines small images
{
    test: /.(png|jpg|gif)$/,
    use: {
        loader: 'url-loader',
        options: { limit: 8192 } // Inline if < 8KB
    }
}

PostCSS

// postcss-url can inline CSS background images
postcss([
    require('postcss-url')({ url: 'inline' })
])

Performance Considerations

HTTP/2 Changes the Equation

HTTP/2 multiplexes requests, reducing the overhead of multiple image requests. This weakens the case for data URIs.

Measure, Don't Assume

Test actual performance impact. Sometimes external images with proper caching outperform embedded ones.

Critical CSS Strategy

Inline critical above-the-fold images in CSS, load others normally.

Related Tools

Image to Base64 - Convert images for embedding
Base64 Converter - Encode/decode Base64
Image Compressor - Reduce image size first

Data URIs are a valuable tool when used appropriately. Convert images with our image to Base64 converter for quick embedding.

Try Image to Base64 Now