We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

The data URL scheme

data URIs, defined by RFC 2397, allow content creators to embed small files inline in documents.


The data URIs have the following syntax:


The mediatype is a MIME type string, such as "image/jpeg" for a JPEG image file. If omitted, defaults to text/plain;charset=US-ASCII

If the data is textual, you can simply embed the text (using the appropriate entities or escapes based on the enclosing document's type). Otherwise, you can specify base64 to embed base64-encoded binary data.

A few examples:

Simple text/plain data
base64-encoded version of the above
An HTML document with <h1>Hello, World</h1>

Encoding data into base64 format

This can be done easily using the command-line uuencode utility on Linux and Mac OS X systems:

uuencode -m infile remotename

The infile parameter is the name of the file you wish to encode into base64 format, and remotename is the remote name for the file, which isn't actually used in data URLs.

The output will look something like this:

begin-base64 664 test

The data URI will use the encoded data after the initial header line.

You can experiment with data URI construction using the data URI kitchen, which lets you provide the data and creates the data URI for you.

When maintaing large sets of data URIs, batch data URI encoders such as datauri.net provide customizable tools for automatically embedding data URIs in CSS stylesheets.

In JavaScript

Please, read the article about Base64 encoding and decoding.

Converting an nsIFile to a data URI

This function returns a base 64-encoded data URI from the passed nsIFile.

function generateDataURI(file) {
  var contentType = Components.classes["@mozilla.org/mime;1"]
  var inputStream = Components.classes["@mozilla.org/network/file-input-stream;1"]
  inputStream.init(file, 0x01, 0600, 0);
  var stream = Components.classes["@mozilla.org/binaryinputstream;1"]
  var encoded = btoa(stream.readBytes(stream.available()));
  return "data:" + contentType + ";base64," + encoded;


Note: Prior to Gecko 6.0, data URIs inherited the security context of the page currently in the browser window if the user enters a data URI into the location bar. Now data URIs get a new, empty, security context.

Common problems

This section describes problems that commonly occur when creating and using data URIs.

The format for data URIs is very simple, but it's easy to forget to put a comma before the "data" segment, or to incorrectly encode the data into base64 format.
Formatting in HTML
A data URI provides a file within a file, which can potentially be very wide relative to the width of the enclosing document. As a URL, the data should be formatable with whitespace (linefeed, tab, or spaces), but there are practical issues that arise when using base64 encoding.
Length limitations
Although Mozilla supports data URIs of essentially unlimited length, browsers are not required to support any particular maximum length of data. For example, the Opera 11 browser limits data URIs to around 65000 characters. 
Lack of error handling
Invalid parameters in media, or typos when specifying "base64", are ignored, but no error is provided.
No support for query strings, etc.

The data portion of a data URI is opaque, so an attempt to use a query string (page-specific parameters, with the syntax <url>?parameter-data) with a data URI will just include the query string in the data the URI represents. For example:

data:text/html,lots of text...<p><a name%3D"bottom">bottom</a>?arg=val

This represents an HTML resource whose contents are:

lots of text...<p><a name="bottom">bottom</a>?arg=val

Note: as of Firefox 6, fragments (anchors) are processed consistent with other URI schemes, thus a bare "#" in the content needs to be escaped as '%23'.

Support in other browsers

The data scheme is supported by Opera 7.20 and above, as well as Safari and Konqueror. Internet Explorer 7 and below, however, do not currently support it. Internet Explorer 8 and above only supports data URIs for images in CSS, <link>, and <img>.

See also


Document Tags and Contributors

Last updated by: Sevenspade,