URL - The data URL scheme

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">

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:
<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:

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:

Documentation / Reference





Discover More
Blob Url In Browser Address
Browser / Javascript - Object URL (createObjectURL / revokeObjectURL)

An ObjectUrl is the representation of blob object as a data URL strings that can be used with any fetch HTML element that accepts an URL as an attribute. HTML Example: This HTML was generated with...
Boxdim
CSS - Background (Image)

The background of an element is the total size of the element: including padding and border but not the margin. The margin is transparent. When two element overlap, you can send one element to...
Card Puncher Data Processing
Datacadamia - Data all the things

Computer science from a data perspective
HTML - How to render SVG in HTML

How to render svg markup in a HTML page. You can render SVG markup via: object, embed, iframe, img, CSS background-image and svg inclusion. HTML A svgSVG element represents the root...
HTML - Image (Img tag)

img is an fetch element that represents an image. An image in HTML can also be represented with a picture element that defines logically the same image but may have different physical image (different...
Html Input File Multiple Warning Dialog
How to handle files in Javascript with the File API of the Browser?

The file api is a browser javascript api that allows file system operation in the browser. FileApiopeneditsave Uploading a file: You can open and read files via the input of type file The...
How to store and use data in HTML

This article shows where you can store and use data
Card Puncher Data Processing
UI - Icon

A page icon. Google Cloud Platform icon: svg: 128×115, png: 256×256 Icon font Unicode Block Miscellaneous_SymbolsMiscellaneous Symbols From 2600U+2600 to 26FFU+26FF See also: Icon font...



Share this page:
Follow us:
Task Runner