The URL value of the src or css background image is base64 encoding code

Author：Eve Cole Update Time：2025-05-11 15:48:02

You may have noticed that some pictures on the web page have a large string of characters followed by the url of the src or css background image, such as: data:image/png;base64, iVBORw0KGgoAAAANSUhEUgnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/KuVgz5BDCSZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAABJRU5ErkJgg%3D. So what is this? This is the Data URI scheme.

The Data URI scheme is defined in RFC2397, with the purpose of embedding some small data directly into a web page, so that it does not need to be loaded from external files anymore. For example, the string of characters above 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 1X36 white gray png picture.

In the above Data URI, data represents the contract name of the data obtained, image/png is the data type name, base64 is the encoding method of the data, and the comma is followed by the data encoded by the base64 of this 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 put, it translates some 8-bit data 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 kind of small file embedding.