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. Data URIs are sometimes referred to incorrectly as "data URLs". As of 2015, 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>

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

References

  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.
This article is issued from Wikipedia - version of the Wednesday, April 20, 2016. The text is available under the Creative Commons Attribution/Share Alike but additional terms may apply for the media files.