Data URLs, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents.

Note: Data URLs are treated as unique opaque origins by modern browsers, rather than inheriting the origin of the settings object responsible for the navigation.

Syntax

Data URLs 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 URL will use the encoded data after the initial header line.

In a Web page, using JavaScript

The Web APIs have native methods to encode or decode to base64: Base64 encoding and decoding.

Common problems

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

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
Syntax
The format for data URLs 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 URL 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 Firefox supports data URLs of essentially unlimited length, browsers are not required to support any particular maximum length of data. For example, the Opera 11 browser limited URLs to 65535 characters long which limits data URLs to 65529 characters (65529 characters being the length of the encoded data, not the source, if you use the plain data:, without specifying a MIME type).
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 URL is opaque, so an attempt to use a query string (page-specific parameters, with the syntax <url>?parameter-data) with a data URL will just include the query string in the data the URL represents.

Security issues
A number of security issues (e.g. phishing) have been associated with data URLs, and navigating to them in the browser's top level. To mitigate such issues, top-level navigation to data:// URIs has been blocked in Firefox 59+ (release version, Nightly/Beta from 58), and we hope to see other browsers follow suit soon. See Blocking Top-Level Navigations to data URLs for Firefox 58 for more details.

Specifications

Specification Title
RFC 2397 The "data" URL scheme

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support YesEdge Full support 12
Notes
Full support 12
Notes
Notes The maximum size supported is 4GB
Firefox Full support YesIE Full support 8
Notes
Full support 8
Notes
Notes The maximum size supported is 32kB
Opera Full support 7.2Safari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support Yes
Notes
Full support Yes
Notes
Notes The maximum size supported is 4GB
Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
CSS filesChrome Full support YesEdge Full support 12
Notes
Full support 12
Notes
Notes The maximum size supported is 4GB
Firefox Full support YesIE Full support 8
Notes
Full support 8
Notes
Notes The maximum size supported is 32kB
Full support 9
Notes
Notes The maximum size supported is 4GB
Opera Full support 7.2Safari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support Yes
Notes
Full support Yes
Notes
Notes The maximum size supported is 4GB
Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
HTML filesChrome ? Edge No support NoFirefox ? IE No support NoOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile No support NoFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
JavaScript filesChrome Full support YesEdge Full support 12
Notes
Full support 12
Notes
Notes The maximum size supported is 4GB
Firefox Full support YesIE Full support 9
Notes
Full support 9
Notes
Notes The maximum size supported is 4GB
Opera Full support 7.2Safari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support Yes
Notes
Full support Yes
Notes
Notes The maximum size supported is 4GB
Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
Top-level navigation blocked to data:// URIsChrome Full support 60Edge ? Firefox Full support 59IE No support NoOpera Full support 47Safari ? WebView Android No support NoChrome Android Full support 60Edge Mobile ? Firefox Android Full support 59Opera Android Full support 47Safari iOS ? Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

See also