Data URI Structure and Components

Data URIs

Data URIs allow you to embed small files directly into HTML, CSS, or JavaScript as a URL string, eliminating the need for a separate HTTP request.

Syntax

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

data:text/html;charset=utf-8,<h1>Hello</h1>
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
data:application/json,{"key":"value"}
data:text/plain;charset=utf-8,Hello%20World

Components

Component	Required	Example
Scheme	Yes	data:
Media type	No (defaults to text/plain;charset=US-ASCII)	image/png, text/html
Base64 flag	No	;base64
Data	Yes	The actual content

Common Uses

Inline images in CSS:

.icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");
}

Small images in HTML:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
     alt="transparent pixel">

JSON in script tags:

<script src="data:application/javascript,console.log('hello')"></script>

Size Considerations

• No hard limit in the spec, but browsers have practical limits
• Internet Explorer limited data URIs to 32KB
• Modern browsers handle several MB but performance degrades
• Data URIs are 33% larger than the original binary when base64-encoded
• They cannot be cached independently — they are cached with the containing document

When NOT to Use Data URIs

• Images larger than ~2-5KB (use regular URLs)
• Resources that should be cached independently
• Content that changes frequently
• When Content Security Policy restricts data: sources

Security

• data: URIs can be used in phishing attacks (e.g., data:text/html,... in the address bar)
• Modern browsers block top-level navigation to data: URIs
• CSP can restrict data: URI usage with default-src and specific directives