Write the picture directly in Src via data:image/png;base64

Source: Internet
Author: User

From the web down a source file view time found that the address of the reference image is not local, but followed by a large string of characters data:image/png;base64 ... Check the data analysis as follows:

About storing pictures with base64

Some images on the Web page src or CSS background image URL followed by a large string of characters, such as: 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 a Web page, eliminating the need to load it from an external file. For example, the above string of characters, is actually a small picture, the characters copied and pasted into the address bar of Firefox and go to, you can see it, a 1x36 lime png image.

The data URI scheme is defined in RFC2397 to embed some small data directly into a Web page, eliminating the need to load it from an external file .

Data URI, data represents the contract name to get the data, Image/png is the data type name, base64 is the data encoding method, the comma is followed by the Image/png file Base64 encoded data

Data:, Text
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 coded 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 on the Web that can be encoded in PHP with function Base64_encode (), such as Echo Base64_encode ( file_get_contents (' wg.png '));
Currently, IE8, Firfox, Chrome, and opera browsers support this small file embedding.

We write the contents of the image file directly in the HTML file, and the advantage is that it saves an HTTP request. The downside is that the browser doesn't cache this image.

Write the picture directly in Src via 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.