First, the main idea of this paper

Here is the central idea of this article, so that readers who are not familiar with this content are interested, and then go to see the content with questions.

When a web page is loaded, it will initiate multiple network requests, which can be divided into HTML, CSS, JS, images, XHR and other types of requests according to different types. And every request from a request to receive the response data will have certain time consuming (network transmission time, DNS time, TCP/UDP, etc.), if a full display of the page needs to be done depends on the multiple requests, then this page may be loaded for a long time even too long.

If you want to reduce the load time of a page, there are many things you can do, and sometimes even a combination of them is needed to make the optimization more effective. I’m only going to cover one point here, but we can work with small img images, such as an IMG SRC image, and a background image for another element. Instead of using data as their SRC or URL, we used data as the IMG SRC or background URL, which is like embedding the image directly inside the HTML or CSS file. This eliminates individual network requests for these images.

So the main idea of this article is: use the SRC attribute of the img tag, or use background: URL (…). Introduction of some small pictures, you can use the data protocol to introduce these pictures, so as to reduce the number of network requests, improve the speed of page loading.

What is a Data URL

Both the SRC of the IMG tag and the background URL of the background image are the URL of the image. The URL that uses the Data protocol is called the DATA URL. The data URL of the image can be written as follows:

<img src="data:image/gif; base64,R0lGODlhEAAQ..."/>
Copy the code
li {
  background: url(data:image/gif; base64,R0lGODl...) no-repeat;
}
Copy the code

The Data URL of MDN is described as follows:

Data URLs, URLs prefixed with the Data: protocol, allow content creators to embed small files into documents. Data URLs are made up of four parts: a prefix (Data :), a MIME type that indicates the Data type, an optional Base64 tag if it’s not text, and the Data itself:

data:[<mediatype>][;base64],<data>
Copy the code

Mediatype is a string of MIME type, such as “image/ JPEG “for A JPEG image file. If omitted, the default is text/plain; charset=US-ASCII

If the data is of text type, you can embed the text directly (using the appropriate entity character or escape character, depending on the document type). For binary data, you can base64 encode the data and then embed it.

As plain text files are rarely embedded in web pages, they are mainly binary files such as pictures, audio and video. I don’t know much about audio and video files, so this article will not talk about them for the moment, but only pictures (technically speaking, it is theoretically possible to embed some small audio and video files through data URL).

An image is a binary file, not a plain text file. Any binary file transferred from the server to the client browser essentially encodes the image into a series of characters, and then these encoded characters are transmitted through the IO stream, which is received by the client and then decoded into images for rendering on the page. Base64 is one of the encoding methods. Data URL uses Base64 encoding for binary files such as pictures, and then uses a series of encoded characters as the content of the fourth part (data part) of the above data URL. (Side note: The number of encoded characters depends on the size of the file, which can be very large if the file is large)

How to calculate the Data URL of the image

Some websites automatically provide this function, you can upload the image that needs to use the data URL to these websites first, after the website analysis, it will generate different data URL for different scenarios, for example: there are used in Scene or background: url(…) Data URL in the scenario. Just copy and paste it into the code. Examples of these sites are:

  • Websemantics. UK/tools/image…
  • Jpillora.com/base64-enco…

Disadvantages of Data URLS

  • Because the base64 encoding of the file is hardcoded into the code, the code is not easy to maintain
  • You cannot use Data urls for files that are too large, because some browsers have limits on the size of Data urls
  • There is the possibility of XSS attacks

Reference documentation

  • MDN – Data URLs
  • CSS-TRICKS – Data URIs
  • Why The data: URI Scheme Could Help Save Your Slow Site
  • Make fewer HTTP requests: What this means and how to do it
  • Wikipedia-Base64