Share via

data Protocol

  • Article

Specifies a data URI, which is a resource, typically an image, embedded in the URI as opposed to one loaded from an external URL.

Syntax

data:[sMediaType;][sBase64Encoding;],sResourceData

sMediaType Optional. An Internet media type specification with optional parameters. If omitted, text/plain;charset=US-ASCII is assumed. Because text/plain is the default media type, you can specify just the charset parameter as a shortcut.

sBase64Encoding Optional. If set to base64, this parameter specifies that the data specified by the sResourceData parameter is encoded as base64; otherwise, the data is assumed to be percent-encoded.

sResourceData A text-representation of the data of the resource, where content is represented as URL-allowed characters. Unsafe characters must be percent-encoded. If sBase64Encoding is set, the data must be Base64 encoded; otherwise, the data is assumed to be represented in ASCII encoding.

Remarks

In general, the sMediaType parameter is similar to the HTTP content-type header. The default media type is text/plain;charset=US-ASCII. Depending on the media type, you may also be able to specify additional parameters. For example, the text/plain media type accepts a charset parameter. Different media types support different parameters.

Data URIs are supported only for the following elements and/or attributes.

Data URIs can be nested.

For security reasons, data URIs are restricted to downloaded resources. Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements.

Data URIs cannot be larger than 32,768 characters.

The resource data must be properly encoded; otherwise, an error occurs and the resource is not loaded. The "#" and "%" characters must be encoded, as well as control characters, non-US ASCII characters, and multibyte characters.

For more information, see RFC2397: The "data" URL scheme.

Available as of Windows Internet Explorer 8 or later.

Examples

The following example uses a data URI to display a red box.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAI
AAAFSDNYfAAAAaklEQVR42u3XQQrAIAwAQeP%2F%2F6wf8CJBJTK9lnQ7FpHGaOurt1
I34nfH9pMMZAZ8BwMGEvvh%2BBsJCAgICLwIOA8EBAQEBAQEBAQEBK79H5RfIQAAAAA
AAAAAAAAAAAAAAAAAAAAAAID%2FABMSqAfj%2FsLmvAAAAABJRU5ErkJggg%3D%3D">

The following example uses a data URI to declare an background image.

.picture { background: url(data:image/png;base64,iVBORw0KGgoAAAANSU
hEUgAAAAIAAAACCAIAAAD91JpzAAAABnRSTlMAAAAAAABupgeRAAAABmJLR0QA%2FwD
%2FAP%2BgvaeTAAAAEUlEQVR42mP4%2F58BCv7%2FZwAAHfAD%2FabwPj4AAAAASUVO
RK5CYII%3D) fixed 1px 0; }