Website Speed optimization: Using the data type picture

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

With the continuous progress of the search engine, the external chain in the SEO optimization of the proportion of the decline in the trend, while other factors affecting the user experience slowly approached Seoer vision. Through the introduction of some products Baidu (Baidu Webmaster platform, Baidu Statistics) we can see that the site's loading speed has become one of the factors affecting the ranking. Also, the ability to load Web pages as quickly as possible affects the user experience, which affects the time and bounce rate of users staying on the site. So, optimizing the loading speed of the website is very necessary.

May slightly understand some of the front end of the webmaster know, to improve the speed of the Web page to load a way to reduce the number of HTTP requests. Sprite map (CSS sprites) is the product of this idea, will be merged into a picture of many pictures, so that multiple requests to merge into a request, to achieve the goal of fast loading Web pages. But Sprite Pictures merged into the Web page changes brought trouble, want to delete or add pictures must be merged once again, this undoubtedly increased the workload and reduce the efficiency. So what can replace Sprite, the same to reduce the HTTP request? The answer is: data type picture.

The so-called "data" type of URL format, is proposed in the RFC2397, for some "small" data can be embedded directly in the Web page, rather than from the external file load. For example, the IMG tag, even if the picture is very small, small to only one point, but also from another external image file such as GIF file read, if the browser implementation of the data type URL format, this file can be directly from the page file to read. The URL format of the data type was proposed as early as 1998, and today, Firfox, Opera, Safari and Konqueror browsers have been supported, but IE until the 7.0 version has not supported, IE does not support things too much, not bad this one. :(

How is the data type picture generated?

After encoding the picture data base64, add the preceding: Data:image/jpeg;base64, (which JPEG please replace your own picture type), you can use the CSS file (directly to the CSS file in the picture path to the processing of the string can be, Please refer to the picture above.

What are the advantages of the data type picture?

The data type picture can put all the pictures in the CSS in the CSS file without requiring a request to be loaded, that is to say, just request the CSS file is enough, reduce the number of HTTP requests. and add pictures or delete pictures can be directly added and deleted, unlike Sprite map needs to be synthesized. Very convenient.

Disadvantages of the data type picture

The data type picture has a disadvantage that the data type picture is about One-third larger than the size of the file picture. Therefore, it is not recommended to use the data type for very large pictures, which is more advantageous for the small picture data type. For some simple pages of the blog, all the icons into the data type and put into the CSS file, you can only load a CSS file can handle the entire page style.

This article by: http://www.5177game.com/, reproduced please specify the copyright. And I wrote a PHP version of a gadget that converts a normal picture to a data-type picture: http://pan.baidu.com/share/link?shareid=332748&uk=1882584266