Data: image/PNG; base64

You may have noticed that the URLs of some image SRC or CSS background images on the webpage are followed by a large string of characters, such:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMjAvMTIGkKG+AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAB1JREFUCJljONjA8LiBoZyBwY6BQQZMAtlAkYMNAF1fBs/zPvcnAAAAAElFTkSuQmCC

So what is this? This is data URI scheme. Data URI scheme is defined in rfc2397 to embed small data into a webpage without loading it from an external file. For example, the string above is actually a small image. copy and paste these characters into the address bar of Firefox and go to it to see it, a 1x36 white-gray PNG image. In the preceding data Uri, data indicates the protocol name for obtaining data. Image/PNG indicates the data type name, And base64 indicates the data encoding method, the comma is followed by the base64 encoded data of the image/PNG file. Currently, data URI scheme supports data:, text data: text/plain, text 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: image/PNG; base64, base64 encoded PNG Image Data data: image/JPEG; base64: base64 encoded JPEG image data: image/X-icon; base64: base64 encoded icon image data: base64, it translates some 8-bit data into standard ASCII characters. There are many free base64 encoding and decoding tools on the Internet. In PHP, base64_encode () can be used for encoding, such Echo base64_encode(file_get_contents('wg.png '));Currently, IE8, firfox, chrome, and opera browsers support such small file embedding. For example, an image on a webpage can be displayed as follows:

 

It can also be displayed as follows:

The content of the image file is directly written in the HTML file, which saves an HTTP request. The disadvantage is that the browser does not cache such images.

Data: image/PNG; base64