What is the data URL

Data URL is a URI scheme that provides a way to inline data in a document, usually used to embed images in HTML and CSS

Introduction

The data URL is a URI scheme that provides a way to inline data in an HTML document.

Suppose you want to embed a small image. You can upload it to the folder in the usual way and useimgMark it so that the browser refers to it from the web:

<img src="image.png" />

Or you can use a special format called data URL to encode it, so that the image can be directly embedded in the HTML document, so the browser does not have to request it to get it.

Data URLs may save some time for small files, but for larger files, the size of HTML files will increase, and if images are reloaded on all pages, they will be especially problematic because you can’t use the browser Cache capacity.

Similarly, an image encoded as a data URL is usually a bit larger than the same image in binary format.

If you edit images often, they are not practical, because every time you change the image, you have to re-encode.

In other words, they have a place on the Web platform.

The appearance of the data URL

The data URL is a string beginning withdata:Followed by the MIME type format. For example, PNG images have mime typeimage/png.

After this is a comma, and then the actual data.

Text is usually transmitted in plain text format, while binary data is usually encoded in base64.

The following is an example of the appearance of such a data URL:

<img src="data:image/png,%89PNG%0D%0A..." />

withThis is a small version of the banner image of this article coded in the link

This is the appearance of the base64 encoded data URL. Note that it ends withdata:image/png;base64:

<img src="data:image/png;base64,iVBORw0KGgoAA..." />

withThis is a small version of the base64 banner image of this article, encoded as a link.

This site has a very good data URL generator:https://dopiaza.org/tools/datauri/index.phpYou can use it to convert any image on the desktop into a data URL.

Data URLs can be used wherever URLs can be used. As you can see, you can use them for links, but it is also common to use them in CSS:

.main {
    background-image url('data:image/png;base64,iVBORw0KGgoAA...');
}

Browser support

they areAll modern browsers support.

Safety

Data URLs can not only encode images, but also encode any type of information, so they carry a series of security risks.

Fromhref="Wikipedia:

Data URIs can be used to construct attack pages that attempt to obtain usernames and passwords from unsuspecting Web users. It can also be used to solve cross-site scripting (XSS) Restriction, the attack payload is completely embedded in the address bar and hosted through a URL shortening service, without the need for a complete website controlled by a third party.

ViewThis article in the Mozilla Firefox blogMore information on how malicious users can use data URLs for bad actions and how the Firefox browser can mitigate such risks.

The data URL is atRFC 2397.

Download mine for freeJavaScript beginner's manual


More browser tutorials: