data: URLs, IETF standard (RFC 2397), are a kind of URL (even though they do not locate a resource) 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. For example, URLs in Opera are limited to around 4100 characters.
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:
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, 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');