data Protocol
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
Tokens
- sMediaType
Optional. An Internet media type specification with optional parameters. If omitted,text/plain;charset=US-ASCII
is assumed. Becausetext/plain
is the default media type, you can specify just thecharset
parameter as a shortcut.- sBase64Encoding
Optional. If set tobase64
, 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, thetext/plain
media type accepts acharset
parameter. Different media types support different parameters.Data URIs are supported only for the following elements and/or attributes.
- object (images only)
- img
- input type=image
- link
- CSS declarations that accept a URL, such as background, backgroundImage, and so on.
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; }