Data URI scheme
The data URI scheme is a uniform resource identifier (URI) scheme that provides a way to include data in-line in web pages as if they were external resources. It is a form of file literal or here document. This technique allows normally separate elements such as images and style sheets to be fetched in a single Hypertext Transfer Protocol (HTTP) request, which may be more efficient than multiple HTTP requests.[citation needed] Data URIs are sometimes referred to incorrectly as "data URLs".[citation needed] As of 2015[update], data URIs are fully supported by most major browsers, and partially supported in Internet Explorer and Microsoft Edge.[1]
Syntax
The syntax of data URIs was defined in Request for Comments (RFC) 2397, published in August 1998,[2] and follows the URI scheme syntax. A data URI consists of:
data:[<media type>][;charset=<character set>][;base64],<data>
- The scheme,
data. It is followed by a colon (:). - An optional media type. If one is not specified, the media type of the data URI is assumed to be
text/plain. - An optional character set parameter, separated from the preceding part by a semicolon (
;) . A character set parameter comprises the labelcharset, an equals sign (=), and a value from the IANA list of official character set names.[3] If this parameter is not present, the character set of the content is assumed to beUS-ASCII(ASCII). - The optional base64 extension
base64, separated from the preceding part by a semicolon. When present, this indicates that the data content of the URI is binary data, encoded in ASCII format using the Base64 scheme for binary-to-text encoding. Data URIs encoded in Base64 may contain whitespace for human readability. - The data, separated from the preceding part by a comma (
,). The data is a sequence of octets represented as characters. Permitted characters within a data URI are the ASCII characters for the lowercase and uppercase letters of the modern English alphabet, and the Arabic numerals. Octets represented by any other character must be percent-encoded, as in%26for an ampersand (&).[4]
Examples
HTML
An HTML fragment embedding a picture of a small red dot: 
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
CSS
A Cascading Style Sheets (CSS) rule that includes a background image:
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;
}
JavaScript
A JavaScript statement that opens an embedded subwindow, as for a footnote link:
window.open('data:text/html;charset=utf-8,' +
encodeURIComponent( // Escape for URL formatting
'<!DOCTYPE html>'+
'<html lang="en">'+
'<head><title>Embedded Window</title></head>'+
'<body><h1>42</h1></body>'+
'</html>'
)
);
