"Front-end Raiders": Base64 encoding for playing with pictures

Original: "Front-end strategy": Play the picture Base64 code

　　Introduction　　

Figure chip processing in the front-end work is a very important to occupy a wall of Jiangshan. and the picture of Base64 coding may be relatively unfamiliar to some people, this article is not from a purely technical point of view to discuss the image of Base64 coding. The title is slightly larger, but just hope that through some superficial discussion, let you know what is the base64 encoding of the picture, why we use it, how we used it, and how to use it conveniently, and let you know how to use it in the actual work of the front end.

What is base64 encoding?　　

　　I'm not going to talk about the concept, just cut to the chase, the base64 encoding of a picture is the ability to encode a picture data into a string, using that string instead of the image address.

What is the point of doing this? We know that every image we see on a webpage is downloaded from an HTTP request (all Csssprites technology comes into being, but Csssprites has its limitations, as mentioned below).

Yes, anyway, the download of the picture always has to make a request to the server, if the picture download does not need to make a request to the server, but can be downloaded at the same time as the HTML download to the Local that is very good, and Base64 just can solve this problem.

So what does the Base64 code look like? Give me a chestnut. The search small icon on the right side of the www.google.com Home search box uses base64 encoding. We can see:

　　

 1  //the syntax in CSS  2   #fkbx-spch, #fkbx-hspch  {3   background :  URL (data:image/gif ; base64,r0lgodlhhaamakihakqqqsvly0hisobm5vf394uliwaaap///yh5b ... eoqqqjkaibaqovkhaxr3t7txgbjbosvb8eplofzywoao3lfe5lys/qw9lt1trk1v7s2xyjads=) No-repeat Center;  4   ... /span>6 } 

1 //In the HTML code IMG tag of the wording 2 <  src= "data:image/gif;base64,r0lgodlhhaamakihakqqqsvly0hisobm5vf394uliwaaap///yh5b ... eoqqqjkaibaqovkhaxr3t7txgbjbosvb8eplofzywoao3lfe5lys/qw9lt1trk1v7s2xyjads= ">

The above is the image of the Base64 code in the CSS and the wording in the html tag. Base64 code is this way, of course, base64 encoding is not only used in the image encoding, but also can:

　　THUNDER://QUFODHRWOI8VZG93BI5ZYW5KYWKUBMV0L3RODW5KZXI3L1RODW5KZXI3LJEUNS4YMTUYLMV4ZVPA ( don't copy me I'm not really a seed ）

Hey, yes, Thunderbolt's "dedicated address" is also encrypted with Base64, interested in Google, do not repeat.

Why use BASE64 encoding?

So why use Base64:url to transfer picture files? Also mentioned above, as this saves an HTTP request. The base64 encoding of a picture can be considered as a link to the front-end optimization. The benefits are small, but the lack of it can make up.

Here, we have to mention the Csssprites technology, which is also to reduce the HTTP request, but the page of many small pictures into a large picture. So what are the similarities and differences between the Base64 coding and the csssprites of the picture, and how to choose?

So, one of the prerequisites for a clear use of Base64 here is that the Base64 encoded image is small enough to be sized. Take the logo of the blog Park as an example:

　　

As shown, the blog Park logo is only 3.27KB, is very small, but if its production into Base64 encoding, generated Base64 string encoding a full 4406 . Even if the Base64 encoding can be gzip compression, compression rate can reach more than 50%, imagine that an element of CSS style is actually more than 2000 characters, that the overall readability of the CSS will have a very large impact, the code redundancy makes use of base64 encoding will outweigh the gains.

So, does it mean that base64 coding is useless? Or. When the picture on the page meets the following requirements, base64 can be a novice.

　　If the picture is small enough and because the usefulness of the special can not be made into Sprite (csssprites), the entire site is highly reusable and will not be updated . So at this time using Base64 encoding transmission picture is good steel used in the blade, after thinking, in line with this rule, there is a we often encounter, is the page background map background-image. In many places, we will make a very small picture about a few px* a few px, and then tile it page when the background map. Because it is the background map, it is not possible to put it into Sprite, and it exists on many pages of the site, this image is often only dozens of bytes, but requires an HTTP request, it is not worth it. So turn it into Base64 code at this point, why not?

Below is a background map with only 50 bytes of 2*2. Converting it to base64 encoding, with more than 100 characters, is undoubtedly more worthy of being admired than an HTTP request.

　　

Csssprites and Base64 Coding　

Briefly state my views on when this uses these two optimization methods.

　　Use Csssprites to merge into a larger picture:

• The page has a variety of styles, need to change the skin function, can use Csssprites
• The site has become perfect, no more Zooey changes (such as button size, color, etc.)
• No duplication of graphics content when used
• There is no base64 coding cost to reduce the maintenance difficulty of image updating. (but note that sprites also modifies the CSS and the picture at some point may cause a burden)

　　Use base64 to encode a picture into a string directly into a CSS file:

• No additional requests
• For very small or very simple images to
• can be gzip. (The ability to compress Base64 data by gzip is usually similar to or stronger than a picture file)
• Reduce the difficulty of CSS maintenance
• Can be used like a separate picture, such as a background image re-use, etc.
• No cross-domain issues, no cache, file header or cookie issues to consider

More convenient to convert images to BASE64 encoding

　　There are many tools for converting pictures to base64 encoding, such as the http://www.pjhome.net/web/html5/encodeDataUrl.htm I use in this article, But many of these sites are foreign sites, They are often not landed by the wall. Here's a much quicker way to take advantage of the Chrome browser (I think feer should have chrome). =).

Create a new window under Chrome, then drag the image you want to convert directly into the browser, open the console, point to Source, as shown, click on the image, the right side will show the image of the Base64 encoding, is not very convenient.

　　

　　

Original article, writing Limited, Caishuxueqian, if there is not in the text, million hope to inform.

Front end Raiders: play a picture Base64 encoding