Website performance optimization CSS no picture technology

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

　　

No picture technical definition

A technique that produces a picture-like effect without using CSS image (a background image introduced by CSS, excluding images in an IMG tag); in other words, it is the technique of creating a picture effect using pure CSS.

Second, why "no picture"?

First, we through YSlow statistics view Sina Weibo the latest version of the file, Get stylesheet file (CSS files) size 206.8K, CSS image size is 623.8K. It is obvious that CSS files are much smaller than CSS image.

　　

Of course, simply take these two to compare, still can't explain what.

Below we calculate the CSS file and CSS image relationship

CSS image is composed of a series of pictures, each picture, even if the smallest small arrow (as shown below), you save into a picture, how to get 1KB bar.

For example, this small triangular figure of Weibo

　　

If we all imitate this small arrow in the form of CSS, how much is the space resource? Let's figure it out and put the code first.

The HTML code is as follows

　　

The CSS code is as follows

　　

From the above code can be seen in the CSS file in total less than 200 characters, if we are in accordance with 1 characters equals 1B to calculate, 200 characters is probably equal to 0.2KB, than the direct use of the picture to save 4/5 of the download resources, significantly reduce the size of the request resources. If we use no picture technology as much as possible to achieve, obviously can improve the loading speed of the page; second, we know that each CSS image requires an HTTP request to load, the browser each issued a limited number of requests, reduce the number of CSS image, obviously reduce the number of HTTP requests, Also improve the presentation speed of the page; again, often use micro bo students know, Micro Bo can be changed skin, if the use of CSS without picture technology, we need to simply change the CSS properties can be realized, improve the maintenance of the code.

Through the above analysis, using CSS without picture technology, you can summarize the following 3 advantages

Reduce the size of the requested resource

Reduce the number of requests for HTTP

Improve serviceability

Third, CSS no picture technology, micro-blog in what practical applications?

　　

　　

Through the above show, we can see that no picture technology, in micro-blog application is very common.

Four, no picture technology to achieve the way

There are about four ways: one is to generate pictures through Background-color, border, and the other is to generate pictures by character, and three is to generate pictures through CSS3 gradient, etc. (this should consider the problem of incompatible low-level browsers); Four is a custom font for CSS3 (@ Font-face) to generate a picture.

Use the CSS Background-color, border properties to generate some graphics, such as triangles. Pure CSS2 content can be fully compatible with IE6.

1 The small squares generated with background-color, the results are as follows:

　　

CSS code:

　　

2 The small squares generated with border, the results are as follows:

　　

CSS code:

　　

3 The small triangle generated by the border, the effect is as follows:

　　

CSS code:

　　

4 the triangle produced by border, the effect is as follows:

　　

CSS code:

　　

5 The oblique triangle generated by border, the effect is as follows:

　　

HTML structure:

　　

CSS code:

　　

Through the above 5 kinds of graphics, you can get the following graphics, the effect is shown below.

　　

Here only the middle of the graphic code, the other, interested students can study, more interesting graphics waiting for you to complete.

HTML structure:

　　

CSS code:

　　

　　

　　

2. Create pictures by character, such as sharp corners, dots, and arrows, which are also CSS2 categories that are fully compatible with IE6. This is widely used in Bo, here does not write the demo alone.

1) sharp angle, the effect chart is as follows

　　

HTML structure:

　　

CSS code:

　　

　　

2) dot, the effect chart is as follows

　　

HTML structure:

　　

CSS style:

　　

3) arrows, the effect is shown below

　　

HTML structure:

　　

CSS style:

The microblogging Hall of Fame does not have a specific definition, but it is recommended that you make some restrictions on the font style so that you can behave in a variety of browsers.

3.CSS3 to generate graphics, using new properties such as the box-shadow,border-radius,gradient gradient, and other CSS3 to generate a graphic, the use of the gradient background in IE browser uses the IE gradient filter, but the use of filter resources will be very large, so, Balance the use of filters against the actual project.

First look at the Google search button example

　　

CSS style:

　　

Google search This button does not use a filter, IE browser does not do a gradual process, we all know that Google is very concerned about the performance of the company, and sometimes for the ultimate performance, a little sacrifice of the visual experience is acceptable.

Look at the "See more" button on Taobao.

　　

CSS style:

　　

Taobao this button using filters, can be perfectly compatible with IE, of course, this can not guess Taobao does not pay attention to performance, can only say the visual experience and performance of the game results.

4. CSS3 Custom Font (@font-face) to generate pictures, although this method does not belong to the true meaning of no pictures, but easy to edit and maintain, more importantly, its size, color can be controlled through CSS, which indirectly do less use the picture.

Specific application, Micro Bo Micro bar icon

　　

HTML structure:

　　

CSS style:

　　

As for the specific implementation of the theoretical basis, to start writing, but also an article, interested students refer to the @ God Fly wrote "CSS3 icon font Complete guide" http://www.qianduan.net/css3-icon-font-guide.html.

In short, CSS no picture technology, we are in writing CSS style needs to form a concept, I do not have to die without a picture technology, to the actual project to weigh the pros and cons, according to the actual situation, flexible use of no picture technology to do some reasonable and effective performance optimization.

(Weibo UDC original blog http://udc.weibo.com/)