A data URI embeds the file content directly in the HTML document, encoded as Base64. The browser decodes it and renders it as if it had been fetched from a URL. The format is: ``` data:[ ][;base64], ``` Breaking that down: | Component | Example | Purpose | |---|---|---| | `data:` | `data:` | URI scheme identifier | | mediatype | `image/png` | MIME type of the embedded file | | `;base64` | `;base64` | Indicates Base64 encoding | | data | `iVBORw0KGgo...` | The Base64-encoded file content | Without `;base64`, the data is treated as percent-encoded text. For binary files, you always want the Base64 variant. ```html @font-face { font-family: "CustomFont"; src: url("data:font/woff2;base64,..."); } ``` For tiny images under 1 KB — think UI icons, loading spinners, toolbar buttons — Base64 embedding eliminates HTTP requests without a significant markup size penalty: ```html ``` This single SVG icon (~300 bytes raw, ~400 bytes Base64) loads immediately with no network round trip. In a page with twenty such icons, that's twenty fewer HTTP requests. For offline tools, bookmarklets, or self-contained HTML documents, Base64 images prevent broken asset references: ```html Offline Tool ``` Email clients block external images by default. Base64-embedded images render immediately: ```html ``` Most email clients handle Base64 images correctly, though size limits apply (typically 100-200 KB total per email). Base64 encoding increases file size by approximately 33%. A 300 KB JPEG becomes a 400 KB Base64 string embedded directly in your HTML. The browser must: 1. Download the full HTML page (now larger by 400 KB) 2. Parse the Base64 string 3. Decode it back to binary 4. Render the image With a normal ` `, the browser: 1. Downloads a small HTML page 2. Requests `photo.jpg` in parallel 3. Renders the image The parallel request model is almost always faster for files over a few KB. ```html ``` When you use ` `, the browser caches the image file independently. If the image appears on ten pages, it's downloaded once. When you embed the same image as Base64 in ten pages, the Base64 string is downloaded ten times — once per page. There's no cache key for "the Base64 blob inside this HTML file." Large Base64 images in the initial HTML block the browser's rendering pipeline. The entire document must be downloaded and parsed before the first paint, because the image data is part of the document itself. ```html Welcome ``` With a normal ` ` tag, the browser can render the HTML immediately and fetch the image in the background. A smart middle ground used by Medium, Facebook, and Pinterest: ```html ``` The Base64 version is a heavily downscaled, low-quality version of the image — just enough to show layout and give visual feedback. The full image loads asynchronously and replaces the placeholder. ```css .lazy-placeholder { filter: blur(10px); transition: opacity 0.3s; } .lazy-full { display: none; } .lazy-full.loaded { display: block; } .lazy-full.loaded ~ .lazy-placeholder { display: none; } ``` This technique gives the user something to look at immediately while the high-res image downloads. The decision to embed or not embed depends on image size: | Image Size | Recommended Approach | |---|---| | 100 KB | Always link — Base64 embedding is a performance anti-pattern here | The exact threshold depends on your HTTP/2 connection count, the image's reuse across pages, and your user's network conditions. But as a rule of thumb: if the Base64-encoded version is larger than 2 KB, think twice. Yes. Data URIs with Base64 encoding are supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. Internet Explorer 8+ has partial support with a 32 KB size limit.

How to Display Base64 Images in HTML (With Performance Considerations)

Q: How do I convert an image to Base64 for HTML?

Use the FileReader API in the browser: `FileReader.readAsDataURL(file)`. In Node.js: `fs.readFileSync("image.png").toString("base64")`. Then prefix with `data:image/png;base64,`. The [Base64 Encoder & Decoder](/base64-encode-decode) tool can also handle file-to-Base64 conversion.

Every HTML developer reaches for this pattern at some point:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" alt="A 1x1 red pixel" />

It works. The image renders. No external file, no HTTP request. But that convenience comes with strings attached — strings that become very heavy when the image gets large.

How Data URIs Work

A data URI embeds the file content directly in the HTML document, encoded as Base64. The browser decodes it and renders it as if it had been fetched from a URL.

The format is:

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

Breaking that down:

Component	Example	Purpose
`data:`	`data:`	URI scheme identifier
mediatype	`image/png`	MIME type of the embedded file
`;base64`	`;base64`	Indicates Base64 encoding
data	`iVBORw0KGgo...`	The Base64-encoded file content

Without ;base64, the data is treated as percent-encoded text. For binary files, you always want the Base64 variant.

MIME Types You'll Actually Use

<!-- PNG image -->
<img src="data:image/png;base64,..." />

<!-- JPEG image -->
<img src="data:image/jpeg;base64,..." />

<!-- SVG (can use text or base64) -->
<img src="data:image/svg+xml;base64,..." />

<!-- PDF preview -->
<embed src="data:application/pdf;base64,..." />

<!-- Font file -->
<style>
@font-face {
  font-family: "CustomFont";
  src: url("data:font/woff2;base64,...");
}
</style>

When Base64 Images Make Sense

Small Icons and Sprites

For tiny images under 1 KB — think UI icons, loading spinners, toolbar buttons — Base64 embedding eliminates HTTP requests without a significant markup size penalty:

<button class="icon-btn">
  <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptLTIgMTVsLTUtNSAxLjQxLTEuNDFMMTAgMTQuMTdsNy41OS03LjU5TDE5IDhsLTkgOXoiLz48L3N2Zz4=" alt="Check" />
</button>

This single SVG icon (~300 bytes raw, ~400 bytes Base64) loads immediately with no network round trip. In a page with twenty such icons, that's twenty fewer HTTP requests.

Single-File Web Pages

For offline tools, bookmarklets, or self-contained HTML documents, Base64 images prevent broken asset references:

<!DOCTYPE html>
<html>
<head>
  <title>Offline Tool</title>
</head>
<body>
  <img src="data:image/png;base64,..." alt="Logo" />
  <!-- No external dependencies — works offline -->
</body>
</html>

Email Signatures (HTML Emails)

Email clients block external images by default. Base64-embedded images render immediately:

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Logo"
     style="width: 150px; height: 50px;" />

Most email clients handle Base64 images correctly, though size limits apply (typically 100-200 KB total per email).

When Base64 Images Hurt Performance

The 33% Size Premium

Base64 encoding increases file size by approximately 33%. A 300 KB JPEG becomes a 400 KB Base64 string embedded directly in your HTML. The browser must:

Download the full HTML page (now larger by 400 KB)
Parse the Base64 string
Decode it back to binary
Render the image

With a normal <img src="photo.jpg" />, the browser:

Downloads a small HTML page
Requests photo.jpg in parallel
Renders the image

The parallel request model is almost always faster for files over a few KB.

<!-- Bad for large images -->
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAg... [hundreds of KB of Base64]" />

<!-- Better for large images -->
<img src="photos/high-res-banner.jpg" loading="lazy" />

Base64 Is Not Cacheable Separately

When you use <img src="photo.jpg" />, the browser caches the image file independently. If the image appears on ten pages, it's downloaded once.

When you embed the same image as Base64 in ten pages, the Base64 string is downloaded ten times — once per page. There's no cache key for "the Base64 blob inside this HTML file."

Blocking Rendering

Large Base64 images in the initial HTML block the browser's rendering pipeline. The entire document must be downloaded and parsed before the first paint, because the image data is part of the document itself.

<!-- This blocks rendering until the full Base64 string is parsed -->
<div class="hero">
  <img src="data:image/jpeg;base64,/9j/4AAQ..." class="hero-image" />
  <h1>Welcome</h1>
</div>

With a normal <img> tag, the browser can render the HTML immediately and fetch the image in the background.

The Hybrid Approach: LQIP (Low Quality Image Placeholders)

A smart middle ground used by Medium, Facebook, and Pinterest:

<!-- Tiny Base64 placeholder (200-500 bytes) -->
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...="
     alt="Photo of mountain landscape"
     class="lazy-placeholder" />

<!-- Full-resolution image loaded asynchronously -->
<img src="https://cdn.example.com/photo-hd.jpg"
     alt="Photo of mountain landscape"
     class="lazy-full"
     loading="lazy" />

The Base64 version is a heavily downscaled, low-quality version of the image — just enough to show layout and give visual feedback. The full image loads asynchronously and replaces the placeholder.

.lazy-placeholder {
  filter: blur(10px);
  transition: opacity 0.3s;
}
.lazy-full {
  display: none;
}
.lazy-full.loaded {
  display: block;
}
.lazy-full.loaded ~ .lazy-placeholder {
  display: none;
}

This technique gives the user something to look at immediately while the high-res image downloads.

Measuring the Threshold

The decision to embed or not embed depends on image size:

Image Size	Recommended Approach
< 1 KB	Embed as Base64 — saves HTTP request
1-10 KB	Embed if used on a single page; link if used on multiple pages
10-100 KB	Usually better to link — the size premium and cache penalty add up
> 100 KB	Always link — Base64 embedding is a performance anti-pattern here

The exact threshold depends on your HTTP/2 connection count, the image's reuse across pages, and your user's network conditions. But as a rule of thumb: if the Base64-encoded version is larger than 2 KB, think twice.

FAQ

Do Base64 images work in all browsers?

Yes. Data URIs with Base64 encoding are supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. Internet Explorer 8+ has partial support with a 32 KB size limit.

How do I convert an image to Base64 for HTML?

Use the FileReader API in the browser: FileReader.readAsDataURL(file). In Node.js: fs.readFileSync("image.png").toString("base64"). Then prefix with data:image/png;base64,. The Base64 Encoder & Decoder tool can also handle file-to-Base64 conversion.

Does Base64 embedding affect SEO?

Search engines can index Base64 images, but image-specific metadata (EXIF, alt text alternatives) is harder to associate. For important SEO images, use standard <img src="..."> tags with descriptive alt text.

Should I Base64-embed font files?

Only for very small font subsets used in single-page applications. Most fonts are 20-200 KB, and embedding them delays initial render while adding 33% overhead. Prefer font-display: swap with linked font files.

What's the maximum Base64 image size for email?

Most email clients handle Base64 images up to about 100 KB total per email. Gmail, Outlook, and Apple Mail all have different limits. Keep embedded images small and use linked images for larger assets.

For quickly converting images to Base64 data URIs or decoding them back to the original format, the Base64 Encoder & Decoder supports file uploads and generates correct data URI prefixes automatically. If you need to debug why an embedded image isn't rendering, see How to Fix Invalid Base64 String Errors for the most common causes and fixes. For a full decision framework on whether to embed or link images, see Embedding Base64 Images — Pros, Cons, and When to Avoid.