Data: image/PNG; base64

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.