data URI scheme

data: URLs, IETF standard (RFC 2397), are a kind of URL that allows inclusion of small data items inline, as if they had been included externally. They tend to be far simpler than alternative inclusion methods, such as MIME with cid: or mid:.

It is currently supported by Mozilla (and its derivatives like Firefox), Opera, Safari and Konqueror. Microsoft's Internet Explorer, as of version 6, does not support data: URLs.

Advantages

HTTP headers are not required for embedded data, so data: URLs can use fewer network resources when the overhead of encoding the inline content as a data: URL 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: URLs.
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: URL 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: URLs are roughly 50% larger in size than their binary equivalent.
URL-encoded data: URLs can be up to three times 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 does not benefit from the browser's cache.
Browser limits to URL length provide a maximum data size.

Format

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

The <mediatype> is an internet media type specification (with optional parameters.) The appearance of ";base64" means that the data is encoded as base64. Without ";base64", 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, "text/plain" can be omitted but the charset parameter supplied.

The "data" URL scheme has no relative URL forms.

Examples

XHTML

An XHTML fragment embedding a small image (newlines added for clarity):

<img
src="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw
AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz
ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp
a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl
ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis
F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH
hhx4dbgYKAAA7"
alt="Larry" />

A compatible browser should display this image:

File:DataUrlLarry.gif

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

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:

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');

Limitations

While a URL should be essentially unlimited in length, some web browsers do not support this. For example, URLs in Opera are limited to around 4100 characters. Authors should restrict the use of data: URLs to small files only.

External links