You may have noticed that the URLs of some SRC or CSS background images on the webpage are followed by a large string of characters, such as data: image/PNG and base64, release/keauffr0cbng3nqpw68arzdalozpppfibhh5eab8b + tlt9myq6i1buqfaq1cksvcxz2acs6406kugpt5/release % 3d % 3d. 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 the following types:
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: To put it simply, it translates some 8-bit data into standard ASCII characters. There are many free base64 encoding and decoding tools on the Internet, and base64_encode () can be used in PHP () encode, such as Echo base64_encode(file_get_contents('wg.png '));
Currently, IE8, firfox, chrome, and opera browsers support such small file embedding.
Example of an image:
An image on the webpage can be displayed as follows:
It can also be displayed as follows:
We directly write the content of the image file in the HTML file, which saves an HTTP request. The downside is that the browser does not cache such images. You can make a choice based on the actual situation.
