data URI scheme

The data: URI scheme, as defined by IETF standard RFC 2397, is a URI scheme that allows inclusion of small data items inline, as if they were being referenced in an external resource. They tend to be far simpler than alternative inclusion methods, such as MIME with cid: or mid:. According to the wording in the RFC, data: URIs are in fact URLs (Uniform Resource Locators), although they do not actually locate anything.

data: URIs are currently supported by:

Gecko and its derivatives, such as Firefox)
Opera
KHTML and derivatives - Safari and Konqueror

Microsoft's Internet Explorer, as of version 7, does not support data: URIs. Early versions of Internet Explorer treated unrecognised about: URIs as HTML source, so something like about:<b>bold</b> in these versions was broadly equivalent to data:text/html,<b>bold</b> in browsers that support data: URIs

Advantages

HTTP headers are not required for embedded data, so data: URIs can use fewer network resources when the overhead of encoding the inline content as a data: URI is smaller than the HTTP headers that would otherwise be required.
Web browsers are typically limited to four concurrent connections to a server, so inline data frees up a download connection for other content.
Browsers manage fewer cache entries for a file that contains data: URIs.
Environments with limited or restricted access to external resources may embed content when it is disallowed or impractical to reference externally. For example, an advanced HTML editing field could accept a pasted or inserted image and convert it to a data: URI to hide the complexity of external resources from the user.

Disadvantages

Embedded content must be extracted and decoded before changes may be made, then re-encoded and re-embedded afterward.
Base64-encoded data: URIs are roughly 33% larger in size than their binary equivalent.
URL-encoded data: URIs can be up to 200% larger (in extreme cases) than the original text content.
Information that is embedded more than once is redownloaded as part of the containing file, and thus does not benefit from the browser's cache.
Browser limits to URI length provide a maximum data size. For example, URIs in Opera used to have limit of 4kb.
Data is included as a simple stream, and many processing environments (such as web browsers) may not support using containers (such as multipart/alternative or message/rfc822) to provide greater complexity such as metadata, data compression, or content negotiation.

Format

data:[<MIME-type>][;base64],

The appearance of ";base64" means that the data is encoded as base64. Without it the data (as a sequence of octets) is represented using ASCII encoding for octets inside the range of safe URL characters and using the standard %xx hex encoding of URLs for octets outside that range. If <mediatype> is omitted, it defaults to text/plain;charset=US-ASCII. (As a shorthand, the type can be omitted but the charset parameter supplied.)

Examples

HTML

An HTML fragment embedding the Wikipedia logo:

Note that as an URI, the data: URI should be formattable with whitespaces, but there are practical issues with how that relates to base64 encoding [1]. Authors should avoid using whitespaces for base64 encoded data: URIs.

CSS

A CSS rule that includes a background image (again, newlines added for clarity):

ul.checklist > li.complete { margin-left: 20px; background:
  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAA
    ABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeN
    Ge4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC) top left no-repeat; }

JavaScript

A JavaScript statement that opens an embedded subwindow, as for a footnote link:

window.open('data:text/html;charset=utf-8,%3C!DOCTYPE%20HTML%20PUBLIC%20%22-'+
  '%2F%2FW3C%2F%2FDTD%20HTML%204.0%2F%2FEN%22%3E%0D%0A%3Chtml%20lang%3D%22en'+
  '%22%3E%0D%0A%3Chead%3E%3Ctitle%3EEmbedded%20Window%3C%2Ftitle%3E%3C%2Fhea'+
  'd%3E%0D%0A%3Cbody%3E%3Ch1%3E42%3C%2Fh1%3E%3C%2Fbody%3E%0D%0A%3C%2Fhtml%3E'+
  '%0D%0A','_blank','height=300,width=400');

External links