HTML img SRC base64 picture Display __html

You may notice that some of the images on the Web page have src or CSS background images followed by a large string of characters.
For example: Data:image/png;base64, Ivborw0kggoaaaansuheugaaaaeaaaakcayaaabidfamaaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaahhjrefueno8zjsoxcambfb　/keauffr0cbng3nqpw68arzdalozpppfibhh5eab8b+tlt9myq6i1buqfaq1cksvcxz2acs6406kugpt5/ lckuvgz5bdcsb13zo99zodczgvt4mjjzmvkqcha68iiepb86gaiov8cdadliuqbs7md3waaaabjru5erkjggg==.

So what is this?
This is the data URI scheme.
The data URI scheme is defined in RFC2397 to embed some small data directly into the Web page without having to load it from an external file. For example, the above string of characters, in fact, is a small picture, the characters copied sticky paste into the address bar of Firefox and go to, you can see it, a 1x36 of the lime png picture.
In the data URI above, data represents the contract name for the acquisition, Image/png is the data type name, base64 is the encoding method of the data, followed by the Image/png file Base64 encoded data.

Currently, the types that Data URI scheme supports are:
Data:, Text data
Data:text/plain, Text data
; javascript:;,html Code
; javascript:;; Base64,base64 coded HTML code
DATA:TEXT/CSS,CSS Code
Data:text/css;base64,base64 coded CSS Code
Data:text/javascript,javascript Code
Data:text/javascript;base64,base64 coded 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, it translates some 8-bit data into standard ASCII characters, and there are many free base64 encoding and decoding tools that can be encoded in PHP using function Base64_encode (), such as Echo Base64_encode ( file_get_contents (' wg.png '));
At present, IE8, Firfox, Chrome, opera browsers support this small file embedding.

Example of a picture:

You can also display this:

　　
The benefit of this is that we have written the contents of the image file directly in the HTML file, saving an HTTP request. The downside is that browsers do not cache this image. We can make a free choice according to the actual situation.