DataURIscheme and its usage in CSS

This article shows you DataURIscheme and its use in CSS. The content is concise and easy to understand. It will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

One of the top priorities of web page optimization is to reduce the number of HTTP requests (http request), such as merging multiple JS files and merging CSS style files. In addition, there is a secret trick of data URL, which lets us type the content of the image directly into the web page. The official name of this secret trick is data URI scheme.

What is data URI scheme?

Suppose you have the following image:

A

The standard way to display it on a web page is:

XML/HTML

This method of obtaining data is called http URI scheme, and the same effect can be written using data URI scheme:

XML/HTML

In other words, we built the contents of the image file into the HTML file, saving a HTTP request.

Syntax of Data URI scheme

Let's analyze the syntax of this img tag:

XML/HTML