Data URI Guide: Embed Images Directly in HTML

July 12, 2026 5 min read

What is a Data URI?

A data URI (RFC 2397) embeds file content directly into a document using a Base64-encoded string. Instead of referencing an external file with a URL, the entire file lives inline. The format is:

data:<media-type>;base64,<encoded-data>

// Example: a 1x1 pixel red PNG
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==

Any file type can be embedded: images (PNG, JPEG, SVG), fonts (WOFF2), audio, or even HTML. The browser decodes the Base64 string and renders the content as if it were a regular file URL.

How to Use Data URIs

In HTML

<!-- Image tag -->
<img src="data:image/png;base64,iVBORw0KGgo..." alt="icon">

<!-- Favicon -->
<link rel="icon" href="data:image/svg+xml;base64,PHN2Zy...">

In CSS

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

@font-face {
  font-family: 'CustomFont';
  src: url('data:font/woff2;base64,AAEAAAARAQAA...') format('woff2');
}

Tip: Use our Base64 Image Converter to generate data URIs from any image file. Upload, copy the output, and paste directly into your HTML or CSS.

Pros and Cons

Advantage	Disadvantage
Reduces HTTP requests (1 request for entire page)	Increases HTML file size by ~33%
Works without a server (local HTML files)	Cannot be cached independently by browser
No CORS issues	Makes HTML files harder to read and edit
Good for tiny icons and spacers	Poor performance for large images

The 33% size increase comes from Base64 encoding — every 3 bytes becomes 4 characters. A 10 KB image becomes ~13.3 KB inline. For a page with 50 embedded images, this adds up fast.

When to Use Data URIs

Data URIs shine for small, critical assets that would otherwise cause render-blocking requests:

Tiny icons (under 2 KB) — checkmarks, arrows, bullet points
CSS-only UI elements — gradients, patterns, spacers
Email templates — embedded images for email clients that block external images
Single-file demos — HTML pages that work offline without any dependencies

Avoid data URIs for logos, photos, or any image larger than ~5 KB. For those, use regular file references with proper caching headers and consider responsive srcset for different screen sizes.

Convert any image to a Base64 data URI?

Use the Base64 Image Converter tool