docs.rodeo

MDN Web Docs mirror

data: URLs

Data URLs, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents. They were formerly known as “data URIs” until that name was retired by the WHATWG.

[!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:[<media-type>][;base64],<data>

The media-type 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 contains characters defined in RFC 3986 as reserved characters, or contains space characters, newline characters, or other non-printing characters, those characters must be {{Glossary("Percent-encoding", "percent-encoded")}} .

If the data is textual, you can 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. You can find more info on MIME types here and here.

A few examples:

Encoding data into base64 format

Base64 is a group of binary-to-text encoding schemes that represent binary data in an {{Glossary("ASCII")}}  string format by translating it into a radix-64 representation. By consisting only of characters permitted by the URL syntax (“URL safe”), we can safely encode binary data in data URLs. Base64 uses the characters + and /, which may have special meanings in URLs. Because Data URLs have no URL path segments or query parameters, this encoding is safe in this context.

Encoding in JavaScript

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

Encoding on a Unix system

Base64 encoding of a file or string on Linux and macOS systems can be achieved using the command-line base64 (or, as an alternative, the uuencode utility with -m argument).

echo -n hello|base64
# outputs to console: aGVsbG8=

echo -n hello>a.txt
base64 a.txt
# outputs to console: aGVsbG8=

base64 a.txt>b.txt
# outputs to file b.txt: aGVsbG8=

Encoding on Microsoft Windows

On Windows, Convert.ToBase64String from PowerShell can be used to perform the Base64 encoding:

[convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes("hello"))
# outputs to console: aGVsbG8=

Alternatively, a GNU/Linux shell (such as WSL) provides the utility base64:

bash$ echo -n hello | base64
# outputs to console: aGVsbG8=

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</p>

This represents an HTML resource whose contents are:

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

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

In this article

View on MDN