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,[1] and used by several browser extensions to package images as well as other multimedia content in a single HTML file for page saving.[2][3] As of 2024, data URIs are fully supported by all major browsers.[4]


The syntax of data URIs is defined in Request for Comments (RFC) 2397, published in August 1998,[5] and follows the URI scheme syntax. A data URI consists of:


Examples of data URIs showing most of the features are:

(outputs: "the data:1234,5678")
data:image/svg+xml;utf8,<svg width='10'... </svg>

The minimal data URI is data:,, consisting of the scheme, no media-type, and zero-length data.

Thus, within the overall URI syntax, a data URI consists of a scheme and a path, with no authority part, query string, or fragment. The optional media type, the optional base64 indicator, and the data are all parts of the URI path.

Examples of use


An HTML fragment embedding a base64 encoded PNG picture of a small red dot:

<img alt="" src="data:image/png;base64,iVBORw0KGgoAAA
5ErkJggg==" style="width:36pt;height:36pt" />

In this example, the lines are broken for formatting purposes. In actual URIs, including data URIs, control characters (ASCII 0 to 31, and 127) and spaces (ASCII 32) are "excluded characters". This means that whitespace characters are not permitted in data URIs. However, in the context of HTML 4 and HTML 5, linefeeds within an element attribute value (such as the "src" above) are ignored[citation needed]. So the data URI above would be processed ignoring the linefeeds, giving the correct result. But note that this is an HTML feature, not a data URI feature, and in other contexts, it is not possible to rely on whitespace within the URI being ignored.

An HTML fragment embedding a utf8 encoded SVG picture of a small red dot:

<img alt="Red dot" src="data:image/svg+xml;utf8,
<svg width='10' height='10' xmlns=''>
 <circle style='fill:red' cx='5' cy='5' r='5'/>

In this example, the image data is encoded with utf8 and hence the image data can broken into multiple lines for easy reading. Single quote has to be used in the SVG data as double quote is used for encapsulating the image source.

A favicon can also be made with utf8 encoding and SVG data which has to appear in the 'head' section of the HTML:

<link rel="icon" href='data:image/svg+xml;utf8,
<svg width="10" height="10" xmlns="">
 <circle style="fill:red" cx="5" cy="5" r="5"/>


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,iVB\
FTkSuQmCC') no-repeat scroll left top;

In this example, the \ + <linefeed> line terminators are a feature of CSS, indicating continuation on the next line. These would be removed by the CSS stylesheet processor, and the data URI would be reconstituted without whitespace, making it correct, since whitespace is not allowed within the data component of a data: URI.


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>'+


Example of an SVG image with embedded JPEG images

A Scalable Vector Graphic image containing an embedded JPEG image encoded in Base64:

<image width="64" height="24" href="data:image/jpeg;base64,

Malware and phishing

The data URI can be utilized to construct attack pages that attempt to obtain usernames and passwords from unsuspecting web users. It can also be used to get around cross-site scripting (XSS) restrictions, embedding the attack payload fully inside the address bar, and hosted via URL shortening services rather than needing a full website that is controlled by a third party.[8] As a result, some browsers now block webpages from navigating to data URIs.[9]


  1. ^ "Using Data URIs to Speed Up Your Website". Treehouse Blog. 27 March 2014.
  2. ^ "SingleFile - Chrome Web Store". Chrome Web Store. Retrieved 25 August 2018.
  3. ^ "SingleFile – Add-ons for Firefox". Firefox Add-ons. Retrieved 25 August 2018.
  4. ^ Deveria, Alexis (July 2015). "Can I use..." Retrieved 31 August 2015.
  5. ^ Masinter, L (August 1998). "RFC 2397 - The "data" URL scheme". Internet Engineering Task Force. Retrieved 2008-08-12.
  6. ^ Freed, Ned; Dürst, Martin, eds. (20 December 2013). "Character Sets". Internet Assigned Numbers Authority. Retrieved 31 August 2015.
  7. ^ Berners-Lee, Tim; Fielding, Roy; Masinter, Larry (January 2005). "Uniform Resource Identifiers (URI): Generic Syntax". Internet Engineering Task Force. Retrieved 31 August 2015.
  8. ^ Phishing without a webpage – researcher reveals how a link itself can be malicious, Naked Security by Sophos, 31 AUG 2012
  9. ^ "Data URLs - HTTP | MDN". MDN Web Docs. Mozilla. Retrieved 11 May 2018.