The URL value of SRC or CSS background image is Base64 encoding code

Time:2020-11-22

You may have noticed that the URL of SRC or CSS background image of some images on the web page is followed by a large string of characters, such as: data:image/png;base64 ,  iVBORw0KGgoAAAANSUhEUgnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/KuVgz5BDCSZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D。 So what is this? This is the data URI scheme.

Data URI scheme is defined in rfc2397 to embed some small data directly into the web page, so as to avoid loading from external files. For example, the above string of characters is actually a small picture. Copy and paste these characters into the address bar of Firefox and go to it. You can see it, a gray PNG picture of 1×36.

In the above data URI, data represents the name of the contract to obtain the data, image / PNG is the name of the data type, Base64 is the encoding method of the data, and after the comma is the data encoded by Base64 of the image / PNG file.

Currently, the data URI scheme supports the following types:
Data: text data
data:text/plain , text data
data:text/html HTML code
data:text/html;base64 , Base64 encoded HTML code
data:text/css , CSS code
data:text/css;base64 , Base64 encoded CSS code
data:text/javascript , JavaScript code
data:text/javascript;base64 , Base64 encoded JavaScript code
data:image/gif;base64 , Base64 encoded GIF image data
data:image/png;base64 , Base64 encoded PNG image data
data:image/jpeg;base64 , Base64 encoded JPEG image data
data:image/x-icon;base64 , Base64 encoded icon image data

In short, Base64 translates some 8-bit data into standard ASCII characters. There are many free Base64 encoding and decoding tools on the Internet. You can use the function Base64 in PHP_ Encode() to encode, such as echo Base64_ encode(file_ get_ contents(‘ wg.png ’));
At present, IE8, firbox, chrome, opera browsers all support this kind of small file embedding.

Take an example of a picture:

A picture on a web page can be displayed as follows:
<img src=“https://imgs.developpaper.com/imgs/wg.png”/>
It can also be displayed as follows:

Copy code

The code is as follows:

<img src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D”/>

We write the content of the image file directly in the HTML file, which saves an HTTP request. The disadvantage is that browsers don’t cache such images. We can choose freely according to the actual situation.

Recommended Today

Explain module, import and export in JavaScript

Author: Tania rascia Crazy technology house Original text:https://www.taniarascia.com/j… In the era of the Internet, websites are mainly developed with HTML and CSS. If you load JavaScript into a page, it usually provides effects and interactions in the form of small fragments. Generally, all JavaScript code is written in a file and loaded into a filescriptTag. […]