Data URI

Data URI is a Data uniform resource identifier, also known as Data URL, method of including images and other binary objects inside the same HTML document that has the text. This is also a feature of HTML5

Overview

Standard HTML documents are often augmented with additional files that are used in displaying the page. These include information such as CSS or Images.

There is sometimes a need for to combine all the data into one file. This is handy for uploading the full content in one step or to ensure that all the data is present if someone downloads a file. This is especially useful for email attachments. Most modern browsers support the use of Data URIs as does WebKit tools. The method includes translating binary data to base64 format.

Images

Images need special support to be included in the document due to their binary nature.

HTML

An HTML fragment embedding a picture of small red dot: Red-dot-5px.png

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

As demonstrated above, data URIs encoded with base64 may contain whitespace for readability.

CSS

Most satellite data is easily incorporated into the document itself. CSS data for example can be added in the head area using the style keyword. However CSS itself can also include references to images.

ul.checklist li.complete {
   padding-left: 20px;
   background: white url('data:image/png;base64,iVBORw0KGgoAA
AANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0l
EQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6
P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top;
}

In Mozilla Firefox 5, Google Chrome 17, and IE 9 (released June, 2011), encoded data must not contain newlines.

Because user agents must ignore a declaration with an unknown property, a fallback to a regular url is possible using standard CSS:

div.menu {
   background-image: url('elephant.png');
   background-image: url('data:image/png;base64,iVBORw0KGgoAA
AANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0l
EQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6
P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC');
}

For more information

• http://en.wikipedia.org/wiki/Data_URI_scheme
• http://dataurl.net/ open source tools for working with Data URI.
• The opposite of Data URI is HTMLZ where all of the files are placed in a single ZIP file.