The url value of src or css background image is base64 encoding code_HTML/Xhtml_web page production

You may have noticed that the url of some pictures on the web page is followed by a long string of characters, such as: data:image/png;base64, iVBORw0KGgoAAAANSUhEUgnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b Tlt9MYQ6i 1BuqFaq1CKSVcxZ2Acs6406KUgpt5/KuVgz5BDCSZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg==. So what is this? This is the Data URI scheme.

Data URI scheme is defined in RFC2397. The purpose is to embed some small data directly into web pages, so that there is no need to load it from external files. For example, the string of characters above is actually a small picture. Copy and paste these characters into Firefox's address bar and go to it, and you will see it, a 1X36 white and gray png picture.

In the above Data URI, data represents the protocol name for obtaining data, image/png is the data type name, base64 is the encoding method of the data, and what follows the comma is the base64-encoded data of the image/png file.

Currently, the types supported by Data URI scheme are:
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

base64 simply puts some 8-bit data is translated into standard ASCII characters. There are many free base64 encoding and decoding tools on the Internet. In PHP, you can use the function base64_encode() to encode, such as echo base64_encode(file_get_contents('wg.png'));
Currently, IE8, Firfox, Chrome, and Opera browsers all support this small file embedding.

As an example of a picture:

A picture on a web page can be displayed like this:

Copy code

The code is as follows ; /KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU 5ErkJggg==”/>