Different image loading methods

In the process of browsing the web, pictures are the easiest to attract users' attention. They can not only give users an intuitive experience, but also clearly express their intentions. Therefore, how to load image resources quickly and effectively is particularly important when making web pages.

Common image loading methods

Generally speaking, the most common way to load images is HTTP URI Scheme abbreviated as HTTP URI. For example: a picture is stored on Cloud Storage, the link is 16108b139eeb3a https://f.lxpzyy.top/upyun/upcdn.svg. We can load the image by introducing the image HTTP link, such as: <img src=”https://f.lxpzyy.top/upyun/upcdn.svg”/>.

In addition, we can introduce images through Data URI Scheme.

<img src=“data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGlu……/>

The way of Data URI Scheme is similar to that of HTTP URI, but it looks a lot more "garbled". So what is the effect of these garbled codes? Compared with HTTP URI, what advantages does it have for us to choose it?

First acquaintance with Data URI

Data URI scheme is abbreviated as Data URI, which is defined in RFC2397. The purpose is to embed some small data directly into the web page, so that there is no need to load it from an external file. Take the above Data URI link as an example:

<img src=“data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGlu……/>

We can see that it is composed of data, image/svg+xml, base64 and the following string.

data:<mime type>[;<encoding>],<encoded data>

These parts are:

• data: represents the name of the agreement to obtain the data, indicating that this is a Data URI.
• mime type: The data type, which is also image/svg+xml. If a png image is passed in, the type can be specified as image/png.
• charset=<charset>: , the default is charset=US-ASCII encoding.
• base64: is the encoding method of data.
• encoded data: The base64

We can see that removing the optional charset=<charset>, the use of Data URI will inevitably use base64 encoding, so how to obtain this?

How to get base64 encoding

The easiest way is to find a coding gadget directly online.

There are many base64 encoding gadgets on the Internet, they can directly decode files or characters to base64.

In addition, the following code languages also have their corresponding base64 encoding methods, which can be easily encoded and decoded:

• JAVA

String test="Upyun";
BASE64Encoder base64Encoder=new BASE64Encoder();
String encode = base64Encoder.encode(test.getBytes("UTF-8"));
System.out.println(encode);

• PHP

$str = 'Upyun';
$encode = base64_encode($str);
echo $encode.'<br>';

• JavaScript

var data=windows.btoa('Upyun');

Data URI usage and advantages

Knowing the general situation of Data URI, let's take a look at how to use it.

There are two main ways to use it. The first is to put the processed Data URI format data into the src attribute of the img tag of the HTML page code. The advantage of this method is that it reduces HTTP requests, but the disadvantage is that it cannot be cached. Another way is to put the Data URI into the css. The advantage is that the browser will actively cache the css file to improve the speed of loading the page. The disadvantage is that the length of the css is increased.

So back to our original question, what are the advantages of Data URI over HTTP URI?

Compared with HTTP URI, Data URI has the following advantages:

• Using Data URI can effectively reduce the number of HTTP requests
• Does not depend on the network environment, that is, the resources in the page can also be loaded when there is no network
• It can save some very small files from occupying HTTP requests

Of course, Data URI also has many disadvantages. The file or data after Base64 encoding is usually about 30% larger than the original file. Then the Data URI is usually written in the css file, which is not easy to maintain. In addition, loading the Data URI resource on the mobile phone also consumes CPU resources. .

In contrast, Data URI is still worth using. Now there are many scenarios where Data URI is used to introduce resources, such as small icons on Baidu's homepage and Google's homepage.

If you want your website to have different loading methods, especially to avoid loading problems caused by poor network conditions, you must try Data URI.

In the process of considering the use of Data URI, we can focus on the following points:

• The actual size of the picture is relatively small
• Resource pictures that are not updated frequently
• Images that need to be used frequently on the page

Recommended reading

simple talk about Rust WebAssembly (1)

go-zero: out-of-the-box