What role does Data:image/png;base64 have?

Source: Internet
Author: User
Tags base64

What's the effect of data:image/png;base64   

2013-03-27 09:35:57|   category:html+css|   label:data  image/png  base6    Role   | small   subscribe     You may have noticed that some images on the Web page have src or CSS background images followed by a large string of characters, such as: Background-image: URL (data:image/png;base64, Ivborw0kggoaaaansuheugaaaaeaaaakcayaaabidfamaaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaahhjrefueno8zjsoxcambfb /keauffr0cbng3nqpw68arzdalozpppfibhh5eab8b+tlt9myq6i1buqfaq1cksvcxz2acs6406kugpt5/ LCKUVGZ5BDCSB13ZO99ZODCZGVT4MJJZMVKQCHA68IIEPB86GAIOV8CDADLIUQBS7MD3WAAAABJRU5ERKJGGG%3D%3D). 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 supported by data URI scheme are: data:, Text data data:text/plain, text data data:text/html,html code DATA:TEXT/HTML;BASE64, Base64 coded 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, 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: a picture in a Web page can be shown like this:
can also display this:
HTML language: Knowledge Ant blog program design 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 free choice according to the actual situation, O (∩_∩) o~. Original article please note reproduced in the Knowledge Ant blog, this article address: http://www.letuknowit.com/archives/76

On-line Base64 decoding code: http://app.baidu.com/app/enter?appid=284732

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.