Data URLs

A Data URL is a URI scheme for embedding small documents directly in a web address.

Usage

Data URLs (formerly known as data URIs) embed arbitrary data inside a URL using the data: scheme. Common uses include inline images in CSS background-image declarations, small SVG icons in HTML, and embedded assets in email templates.

Embedding a resource as a Data URL eliminates the need for a separate HTTP request. With older versions of the HTTP protocol where each resource required a new TCP connection, this reduced the overhead of additional connection setup. Modern protocols like HTTP/2 multiplex requests over a single connection, reducing the performance benefit.

The tradeoff is size. Inline data increases the parent document and is not cacheable as a standalone resource. The embedded content is fetched every time the containing document is requested, based on the document's own Caching headers. For small assets under a few kilobytes, the saved round-trip often outweighs the size cost.

Syntax

Data URLs follow a format defined by the data: scheme:

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

mediatype

An optional MIME type string such as image/png or text/html;charset=utf-8. A full list of registered media types is maintained by IANA. When omitted, the type defaults to text/plain;charset=US-ASCII.

base64

An optional token preceded by a semicolon ;, indicating the data is binary-encoded using base64. Base64 encoding increases size by approximately 33% (every 3 input bytes become 4 output characters). Text-based data does not need this flag and is instead percent-encoded.

data

The actual payload, either as percent-encoded text or as a base64-encoded string.

Example

These examples show different ways to embed the text "Visit example.re" as a Data URL.

A plain-text Data URL with the space character percent-encoded as %20:

data:text/plain,Visit%20example.re

The same content encoded as base64 with the media type omitted (defaults to text/plain):

data:;base64,VmlzaXQgZXhhbXBsZS5yZQ

The base64 data portion (VmlzaXQgZXhhbXBsZS5yZQ) is 24 characters compared to 18 for the percent-encoded version (Visit%20example.re). This overhead grows with larger payloads, converging on the 33% increase inherent to base64.

An HTML document embedded as a Data URL with a link:

data:text/html,<a%20href=https://example.re>Visit%20example.re</a>

Security

Browsers restrict Data URLs in several ways to limit abuse.

Top-level navigation

Chromium-based browsers and Firefox block top-level navigation to data: URLs initiated by scripts or links. Typing a data: URL directly into the address bar still works in most browsers. This restriction prevents phishing pages rendering a fake login form from a data: URL, making the origin difficult to verify.

Content Security Policy

A Content Security Policy blocks data: URLs by default. To allow them for specific resource types, the data: scheme needs to be listed explicitly in the relevant directive (for example, img-src data:). Allowing data: in script-src is risky because attackers who find an injection point gain the ability to execute arbitrary inline scripts.

Size limits

The specification does not define a maximum length. In practice, Chromium and Firefox accept Data URLs up to 512 MB, and WebKit-based browsers accept up to 2 GB. The practical limit is often determined by available memory and the context where the URL is used.

Takeaway

A Data URL embeds a resource directly in a URI using the data: scheme, avoiding a separate HTTP request. The payload is either percent-encoded text or base64-encoded binary data, identified by an optional MIME type.

See also

• RFC 2397: The "data" URL Scheme
• Uniform Resource Identifier
• Uniform Resource Locator
• Percent-Encoding
• Content-Type
• Content-Security-Policy
• HTTP Caching
• HTTP headers