Your Search Results

    data URIs

    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.

    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[";1"]
      var inputStream = Components.classes[";1"]
      inputStream.init(file, 0x01, 0600, 0);
      var stream = Components.classes[";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: Emmanuel_Vallois,