Table of Contents

About

The data scheme is a scheme that can be used in a URL in order to embed (small) media resources data directly such as:

The benefit is that there is no need for extra HTTP requests in order to fetch the resource, making the page load more efficient.

As for all performance optimizations, there is a trade off between growing the size of your page by inlining all resources and fetching asynchronously the resources. Generally, the inlined media resources are of small size (ie <2kb)

Syntax

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

where

Note that you can create data URL programmatically with the URL.createObjectURL function. See the example below

Example

Jpeg - Base 64

The HTML fragment could be used for a small inline image in a HTML document. (The embedded image is probably near the limit of utility. For anything else larger, data URLs are likely to be inappropriate.)

Image in What is Base64? (Cryptography Cipher) 

<img src="data:image/jpg;base64,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"
ALT="Nico">
Rendered by WebCode

Svg

The svg is used in an URL and should then be url encoded. (You can grab a background css directly via this codepen) 

.navbar-toggler-icon {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' viewBox='0 0 17 17'%3E%3Cg%3E%3C/g%3E%3Cpath d='M17 16v1h-17v-1h17zM12 10h2v5h1v-6h-4v6h1v-5zM7 7h2v8h1v-9h-4v9h1v-8zM2 3h2v12h1v-13h-4v13h1v-12z' /%3E%3C/svg%3E");
}

.navbar-toggler-icon {
    display: inline-block;
    width: 3em;
    height: 3em;
    vertical-align: middle;
    content: "";
    background-size: 100% 100%;
}

<span class="navbar-toggler-icon"></span>
Rendered by WebCode

Plain Text to download

Example with the anchor download attribute

  • Plain text
<a href="data:text/plain,Hello World" download="hello-world.txt">Download hello-world.txt</a>
  • Result:
Rendered by WebCode
<a href="data:text/plain;base64,SGVsbG8gV29ybGQgIQ==" download="hello-world.txt">Download base64 encoded hello-world.txt</a>
Rendered by WebCode

How to create data url with the URL.createObjectURL

The javascript browser api function URL.createObjectURL permits to create data uri programmatically directly. You don't need to form a data url or transform the payload in base64

Example: The same example than above to download a text file can rewritten: 

let textBlob = new Blob( ["Hello World !"], { type: 'text/plain' });

let objectUrl = URL.createObjectURL(textBlob);
  • Create the anchor with its attribute
let a = document.createElement("a");
document.body.append(a);
a.href=objectUrl;
let fileName = "hello-world.txt";
a.setAttribute("download",fileName);
a.innerText = `Download ${fileName}`;
// To prevent memory leaks, always revoke the URL after the download.
a.addEventListener('click', (e) => {
    setTimeout(() => URL.revokeObjectURL(e.target.href), 30 * 1000);
});
  • Result:
Rendered by WebCode

Documentation / Reference