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.
Take an example of a picture:An image on the web page can be displayed like this:
<img src=http://www.letuknowit.com/images/wg.png/>
It can also be displayed like this:
Copy the code