Data URIs, URLs prefixed with the data:
scheme, allow content creators to embed small files inline in documents.
Syntax
Data URIs are composed of four parts: a prefix (data:
), a MIME type indicating the type of data, an optional base64
token if non-textual, and the data itself:
data:[<mediatype>][;base64],<data>
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:
data:,Hello%2C%20World!
- Simple text/plain data
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D
- base64-encoded version of the above
data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E
- An HTML document with
<h1>Hello, World!</h1>
data:text/html,<script>alert('hi');</script>
- An HTML document that executes a JavaScript alert. Note that the closing script tag is required.
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 YSBzbGlnaHRseSBsb25nZXIgdGVzdCBmb3IgdGV2ZXIK ====
The data URI will use the encoded data after the initial header line.
In a Web page, using JavaScript
The Web APIs has primitives to encode or decode to base64: Base64 encoding and decoding.
Common problems
This section describes problems that commonly occur when creating and using data
URIs.
- Syntax
- 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, thedata
should be formatable with whitespace (linefeed, tab, or spaces), but there are practical issues that arise when using base64 encoding. - Length limitations
- Although Firefox 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 limiteddata
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
Specifications
Specification | Title |
---|---|
RFC 2397 | The "data" URL scheme" |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Edge | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | 12[2] | 8[1][2] | 7.20 | (Yes) |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
[1] IE8 only supports data URIs in CSS files, with a max size of 32kB.
[2]IE9 and later, as well as Edge, supports data URIs in CSS and JS files, but not in HTML files, with a max size of 4GB.