Shulou(Shulou.com)06/02 Report--

This article mainly explains_"data:image/png;base64 what does it mean", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's learn "data:image/png;base64"!

You may have noticed that some images on the web page have src or css background images with url followed by a long string of characters, such as:

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

So what is this? This is a Data URI scheme.

The Data URI scheme is defined in RFC2397 to embed small pieces of data directly into a web page so that they are no longer loaded from an external file. For example, the string above is actually a small picture. Copy and paste these characters into Firefox's address bar and go to it. You can see it, a white and gray png picture of 1X36.

In the Data URI above, data indicates the contract name of the data obtained, image/png is the data type name, base64 is the encoding method of the data, and the comma is the base64 encoded data of this image/png file.

Currently, the types supported by Data URI schemes are:

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 simply put, it translates some 8-bit data into standard ASCII characters, there are many free base64 encoding and decoding tools on the Internet, in PHP you can use the function base64_encode() to encode, such as echo base64_encode(file_get_contents ('wg.png '));

Currently, IE8, Firefox, Chrome, Opera browsers all support this small file embedding.

An example of a picture:

An image on a web page can look like this:

It can also be displayed like this:

The advantage of writing the content of the image file directly in the HTML file is that it saves an HTTP request. The downside is that browsers don't cache such images.

At this point, I believe that everyone has a deeper understanding of "data:image/png;base64", so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.