Data URI scheme

From Infogalactic: the planetary knowledge core
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 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]


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]



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

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


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
P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top;


A JavaScript statement that opens an embedded subwindow, as for a footnote link:'data:text/html;charset=utf-8,' +
    encodeURIComponent( // Escape for URL formatting
        '<!DOCTYPE html>'+
        '<html lang="en">'+
        '<head><title>Embedded Window</title></head>'+


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