Small Tip:base64:URL background picture and Web page performance optimization--Zhang Xin Xu

First, Base64 Encyclopedia

Base64 is one of the most common encoding methods for transmitting 8Bit bytes of code on the network, and can be used to pass longer identity information in an HTTP environment.

someone : Alas, I completely waste firewood, why the above is clearly Chinese, batting practice but can not understand, why? ~~

Well, I don't like the explanation of the jargon, either. All you need to know is that the Base64 code is the one that looks like this:
thunder://QUFodHRwOi8vd3d3LmJhaWR1LmNvbS9pbWcvc3NsbTFfbG9nby5naWZaWg==

The above code everyone is familiar with it, Thunder download link Oh (cough, the address is very pure), is Base64 encoded address, so later to see this: A pile of consecutive letters, the last one "=" or two of the code is base64.

Base64:url is the URL address is Base64 encoded.

For example, the following:

R0lGODlhAwADAIABAL6+vv///yH5BAEAAAEALAAAAAADAAMAAAIDjA9WADs= "/>

Second, base64 and file data encoding

In the network, files that are transmitted over HTTP can also be transmitted by encoding the data through Base64. Just like this base64 gif format picture above. Of course, files that can be Base64 encoded are not just pictures, they can also be font files, for example (with default in the middle):

@font-face{    font-family:fortest;    Src:url (Data:font/woff;charset=utf-8;base64,d09grgabaaaaaah4 ... rferuenegadl7jly=) format (' Woff ');}

Naturally, for background-image images, we can also use Base64 encoding for transmission, for example:

Background-image:url (Data:image/gif;base64, R0lGODlhBAABAIABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw== );

And the use of Base64 coding as a background-image picture is the focus of this article to elaborate.

Third, how to get the base64 code of the picture

In fact, before me, "preview multi-image Ajax uploads based on HTML5" and "zslide--based CSS3/HTML5 demo document jquery plugin" actually dealt with the acquisition of Base64 encoding of the image. The following local image is converted to a preview Base64 encoded core script:

var reader = new FileReader (), htmlimage;reader.onload = function (e) {    htmlimage = ' e.target.result is Base64 encoded}reader.readasdataurl (file);

You just need to understand, in fact, there are many base64 coding tools, for our front-end production, the following local image base64 code to get the page is recommended: Encode Data URL by Puterjam

Drag the desktop picture directly into the strips to have the response background-image url properties available for the Base64 address:

The principle of the conversion page is the above-mentioned HTML5 file local preview principle, in particular, you can check the data.

Iv. advantages and disadvantages of using Base64:url

Personally feel that base64:url the benefits of transferring picture files are:

1. Reduced HTTP Requests
2. Some files can avoid cross-domain issues
3. There is no picture update to re-upload, but also to clean up the cache problem

The shortage is:

1. Browser support
   This technique of using Base64 encoded images as background images Ie6/ie7 browser is not supported (IE9 browser IE7 mode support, here by @ front of that dissected thing despised). For the current PC page, the compatibility issue makes no file upload and no need to update the benefits of the cache does not exist.
2. Added the size of the CSS file
   Base64 encoded picture is essentially the binary size of the picture is displayed in some letters, such as a 1024-byte picture, Base64 encoded at least 1024 characters, this size will be fully embedded in the CSS file (but fortunately, can also be gzip, and the picture file is gzip effect is not obvious).
3. Coding cost
   After the completion of the picture also need base64 coding, currently estimated manual completion of more, therefore, increased a certain amount of work, although not much.

The practical application value under the balance of advantages and disadvantages

Weigh the advantages and disadvantages shown above, seemingly base64:url pictures do not have anything to use Ah, in fact, there is a situation when there is a base64 code as background-image background picture benefits far outweigh the disadvantages. What kind of situation?

In the Web page production, due to some practical reasons, we can use the following type of Image:

• This kind of picture can not be in the form of CSS Sprite with other pictures, can only walk alone
• Since the date of birth, this kind of image has rarely been updated
• The actual size of this kind of picture is very small
• This type of image is used on a large scale in the website

Think about it, do you have a website that meets the above four background images at the same time?

Zxx: Suppose the time has passed for the North Korean rocket erection today

What, did you think about it? Mention the following, for example, the loading GIF image in the Penguin microblog below (537 bytes, barely counted):

The size of the 537 bytes is actually a little bit larger, let's look at a more better example, we can go to the Watercress homepage, you can see the vertical line shown:

For the background-image picture (for the high layout):

From bg_line.png such a name can be predicted (not: home_bg_line.png ), the background image will be in (can be in) the site in many places to use.

Icon Tile Image address: http://img3.douban.com/pics/bg_line.png

Size 1 * 1 pixels, PNG format, size 88 bytes. //zxx: When the picture color is simple to a certain extent, GIF format picture size is smaller than png8, so, this point if saved in GIF format, only need 43 bytes, half the size of PNG

Like this image size is very small, but also occupy an HTTP request, while not with other background picture Sprite, and the site is used in many places. Therefore, there is no background image than this is more appropriate to use the "Base64:url picture" technology of this article to optimize!

To compare the benefits of optimization, let's take a look at the actual demo.

Vi. practical application of Base64:url pictures

My blog Home page of the personal information on the virtual point is the use of background images to achieve (considering the IE6 dot border with dashed, different browser virtual point spacing difference, etc.).

Now, the demo will show how to use the Base64:url image to achieve the virtual point effect.

You can fiercely click here: Base64 URL Virtual dot background demo

The relevant CSS code is as follows:

. dot {    Background-image:url (data:image/gif;base64, r0lgodlhbaabaiabamlbwflx8sh5baeaaaealaaaaaaeaaeaaaicrf4aow==);   *background-image:url (http://www.zhangxinxu.com/wordpress/wp-content/themes/default/images/zxx_dotted.gif);    Ie6~ie7    background-repeat:repeat-x;    Background-position:left Bottom;}

As you can see, the amount of CSS code using Base64 is basically the same as the following using the full address, so, for some small-size images, the so-called increase in the size of the CSS file can be ignored (again considering the gzip), while reducing the 1 HTTP requests, plus this image site used in many places, so , the cumulative savings of HTTP requests are staggering.

Of course, the only drawback is that for the Ie6~ie7 browser can not enjoy this "hundred profit only Harm" optimization technology, we also need to specifically wipe their asses. However, the tradeoff is still very worthwhile, after all, at present, in China IE8 Browser is the big head (just recently), IE6, IE7 obediently to diarrhea down ~ ~

Finally, show the next demo page YSlow Analysis Chart bar, you can see, there is no CSS background-image request ~ ~

Seven, although it is a small essay, the end of the father-in-the-pain

Ie6/ie7 once again exposed his cock silk image, to its, I have no ability to spit again, but, after all, the history of the active people, and so it quietly exit the historical stage bar.

Again, the use of base64 encoding instead of a CSS background image is limited, and not all images are suitable for using Base64 encoding technology. For example:
1. CSS Sprite Pictures later maintenance will be dead, can only be independent pictures
2. The image size is too large, the CSS file will become a bloated big stick, but unfavorable to load
3. The advantage of CSS files is reuse, so if the background picture is used in one place, reduce the number of requests is limited, considering the other costs, it is better to directly use the normal URL image address
4. If the picture is constantly changing, okay, man, the hard-working front-end overtime has one more of your

Therefore, although the technology itself is good, it needs to be well-placed and can be used.

On the microblog, @ Pauling over the MHTML this east, as if related to the Base64 coding, I almost know nothing about it, I hope that the relevant people can add.

In addition, the weekend, think of the morning can sleep to wake up, writing too hasty, errors are unavoidable, the text is not accurate in the place to welcome correct, thank you for reading, I wish you a happy weekend!

Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]
This address: http://www.zhangxinxu.com/wordpress/?p=2341

(End of this article)

Small Tip:base64:URL background picture and Web page performance optimization--Zhang Xin Xu