Data URI scheme

From Wikipedia, the free encyclopedia
  (Redirected from Data URL)
Jump to: navigation, search

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 rather than multiple HTTP requests.[citation needed] Data URIs are sometimes referred to incorrectly as "data URLs".[citation needed] As of 2015, data URIs are fully supported by most major browsers, and partially supported in Internet Explorer and Microsoft Edge.[1]

Syntax[edit]

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 label charset, 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 be US-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 %26 for an ampersand (&).[4]

Examples[edit]

HTML[edit]

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

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

CSS[edit]

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[edit]

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

References[edit]

  1. ^ Deveria, Alexis (July 2015). "Can I use...". Retrieved 31 August 2015. 
  2. ^ Masinter, L (August 1998). "RFC 2397 - The "data" URL scheme". Internet Engineering Task Force. Retrieved 2008-08-12. 
  3. ^ Freed, Ned; Dürst, Martin, eds. (20 December 2013). "Character Sets". Internet Assigned Numbers Authority. Retrieved 31 August 2015. 
  4. ^ Berners-Lee, Tim; Fielding, Roy; Masinter, Larry (January 2005). "Uniform Resource Identifiers (URI): Generic Syntax". Internet Engineering Task Force. Retrieved 31 August 2015.