Data URLs

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

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.

A few examples

data:,Hello%2C%20World%21 The text/plain data Hello, World!. Note how the comma is percent-encoded as %2C, and the space character as %20.

data:text/plain;base64,SGVsbG8sIFdvcmxkIQ== base64-encoded version of the above

data:text/html,%3Ch1%3EHello%2C%20World%21%3C%2Fh1%3E An HTML document with

Hello, World!

data:text/html,%3Cscript%3Ealert%28%27hi%27%29%3B%3C%2Fscript%3E An HTML document with

that executes a

JavaScript alert. Note that the closing script tag is required.

Encoding data into base64 format

Base64 is a group of binary-to-text encoding schemes that represent binary data in an 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 on a Unix system

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=

Source