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:
- or any resource.
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
- charset is a Text - Encoding (Character Set|charset|code page)
- data is the data encoded in the character set in base64 or not
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">
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>
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:
- Plain text base64 encoded
<a href="data:text/plain;base64,SGVsbG8gV29ybGQgIQ==" download="hello-world.txt">Download base64 encoded hello-world.txt</a>
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:
- Create the blob data container with plain text
let textBlob = new Blob( ["Hello World !"], { type: 'text/plain' });
- Create the objectUrl
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: