Data URI Guide

What Is a Data URI?

A data URI embeds file content directly in a document using the format data:[mediatype][;base64],<data>. Defined in RFC 2397, data URIs eliminate HTTP requests by inlining file data as text. They support any MIME type including images, fonts, PDFs, and SVGs.

When a browser encounters a data URI, it decodes the embedded content and renders it as if it were loaded from an external file. The data URI scheme was published in 1998 and is now supported by every modern browser. Unlike a standard URL that references a resource on a remote server, a data URI contains the resource itself. This makes data URIs self-contained: the document carrying a data URI has no external dependency for that resource.

Data URIs are commonly used to inline small images, icons, and fonts in HTML and CSS. They reduce the total number of HTTP requests a page makes, which can improve load time for pages with many small assets. For a broader overview of the encoding that powers data URIs, see the What is Base64 guide.

What Is the Data URI Syntax?

A data URI consists of 4 components: the data: scheme, an optional MIME type, an optional ;base64 encoding flag, and the encoded content after a comma. Each component serves a specific purpose in telling the browser how to interpret the embedded data.

A complete data URI for a PNG image looks like this:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...

If the MIME type is omitted, it defaults to text/plain;charset=US-ASCII. If the ;base64 flag is omitted, the data portion uses percent-encoding (URL encoding) instead. Text content like HTML or SVG can use either encoding method. Binary content like PNG, JPEG, and WOFF fonts requires Base64 encoding because percent-encoding would produce significantly longer strings.

How Do You Use Data URIs in HTML?

Data URIs can replace any URL in HTML attributes that accept a URI. The 3 most common HTML uses are <img> tags, <a> download links, and <iframe> elements. Each embeds content directly in the markup without referencing an external file.

Image tag: Replace the src attribute with a data URI to embed an image inline.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUh..." alt="Inline icon" width="32" height="32">

Anchor tag: Create a downloadable file link without a server-side file.

<a href="data:text/plain;base64,SGVsbG8gV29ybGQ=" download="hello.txt">Download</a>

Iframe: Embed an HTML document directly inside a page.

<iframe src="data:text/html;base64,PCFET0NUWVBFIGh0bWw+..."></iframe>

The Base64 Embed Code Generator produces ready-to-use HTML snippets with the correct data URI syntax for any uploaded image. You can also encode images to Base64 first, then construct the data URI manually.

How Do You Use Data URIs in CSS?

CSS accepts data URIs anywhere the url() function is used. The 3 primary CSS use cases are background-image, @font-face declarations, and cursor properties. Embedding in CSS eliminates HTTP requests for small assets that would otherwise require separate files.

Background image: Embed a small icon or pattern directly in a stylesheet.

.icon-check {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...');
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
}

Font face: Embed a WOFF2 font file to avoid a separate font request.

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

Custom cursor: Set a custom cursor image without an external file.

.custom-cursor {
  cursor: url('data:image/png;base64,iVBORw0KGgo...'), auto;
}

For generating CSS-specific Base64 code, use the Base64 CSS Background Generator. This tool outputs the complete CSS rule with the data URI already formatted. To calculate the size impact before embedding, use the Base64 Size Calculator.

What Are the Browser Size Limits for Data URIs?

Browser support for data URIs is universal in modern browsers, but maximum size limits vary. Chrome and Edge impose a 2 MB limit on data URIs used in image elements. Firefox and Safari have no documented hard limit. Internet Explorer 11 restricts data URIs to 4 KB in certain contexts.

These limits apply to the total length of the data URI string, including the data: prefix, MIME type, and encoded content. A 1 MB binary file produces approximately 1.33 MB of Base64 text, so the effective binary file limit in Chrome is roughly 1.5 MB. In practice, data URIs are most beneficial for files under 10 KB where the saved HTTP request outweighs the 33% size overhead.

To check the encoded size of your file before creating a data URI, use the Base64 Size Calculator. For files that exceed browser limits, serve them as external binary files instead. See Base64 vs Binary for guidance on choosing between inline and external delivery.

When Should You Use Data URIs Instead of External Files?

Data URIs reduce HTTP requests at the cost of increased document size and lost cacheability. The decision depends on file size, reuse frequency, and delivery context. Files under 10 KB that appear on a single page are the strongest candidates for data URI embedding.

Use data URIs for:

• Images under 10 KB (icons, small logos, UI elements)
• Single-use decorative images that appear on one page
• HTML email templates where external image loading is blocked
• Reducing HTTP/1.1 request overhead on pages with many small assets
• Self-contained single-file HTML documents
• CSS sprites replaced by individual inline icons

Avoid data URIs for:

• Images over 10 KB where the 33% size overhead exceeds the HTTP request cost
• Assets reused across multiple pages (external files cache once, data URIs re-download with each page)
• Frequently updated resources where cache invalidation matters
• Assets that benefit from CDN distribution
• Lazy-loaded images that should not increase initial page weight
• Responsive images that need srcset for different viewport sizes

For a detailed comparison of performance tradeoffs, read the Base64 vs Binary comparison. To convert images for embedding, use the Base64 Image Encoder.

What MIME Types Work with Data URIs?

Data URIs support any valid MIME type registered with IANA. The MIME type tells the browser how to interpret and render the encoded content. The table below lists the MIME types most frequently used in data URIs for web development.

Using the correct MIME type is critical. If the MIME type does not match the actual content, browsers may refuse to render the data URI or display it incorrectly. For example, encoding a JPEG file but specifying image/png as the MIME type can cause rendering failures in strict parsers. The Base64 Image Encoder automatically detects and includes the correct MIME type. For more details on MIME type handling, see Base64 MIME Types.

Frequently Asked Questions