CSS Sprites Introduction

First, CSS sprites introduction

It is often translated as "CSS image flattening" or "CSS map positioning". CSS sprites is not a new technology, at present it has developed in the web development more mature, CSS sprites is not a golden rule, but in many cases, it has a certain advantage, the most important thing is that it can reduce the load of the server, improve page loading speed.

CSS sprites allows you to include all the scattered images of a page in a larger image, so that when you visit the page, the loaded picture will not appear as it was in the previous image. For the current popularity of the network speed, no more than 200KB of a single picture of the required loading time is basically the same, so there is no need to worry about this problem.

The key to acceleration is not to reduce quality, but to reduce the number. Traditional cut drawings pay attention to fine, picture specifications smaller the better, the smaller the weight of the better, in fact, size does not matter, computer unification is calculated in bytes. The client sends a request to the server for each picture that is displayed. As a result, the more images you request, the greater the likelihood of delay. Second, CSS Sprites Working principleCSS sprites is actually the Web page in a number of background images integrated into a picture file, when needed to use the picture, through the CSS properties background-image combination background-repeat, Background-position and so on to achieve. By adjusting the values of the background-position, the background image can appear in front of you in different ways. In fact, the overall image of the picture has not changed, because the picture position changes, you see only should see only. Just like the date on the watch, you see today is 21, see tomorrow is 22, because its position jumped up a grid. So you probably know that CSS sprites can only be used in a fixed-size box (box), so that it can block the parts that should not be seen.

Third, the advantages of CSS sprites

　　

1, the use of CSS sprites can be a good way to reduce the Web page HTTP requests, thereby greatly improve the performance of the page, which is the greatest advantage of CSS sprites, but also its widely spread and application of the main reason; 2, CSS sprites can reduce the byte of the picture, The bytes that were once compared to 3 pictures merged into 1 images are always smaller than the sum of the bytes of these 3 pictures. 3, solve the web designer in the image naming problems, just a set of pictures on the name on it, do not need to name every small element, thus improving the production efficiency of the page. 4, change the style convenient, only need to change the color or the style of the picture on one or less picture, the whole page style can change. More convenient to maintain.

Iv. Limitations of CSS Sprites

1, in the picture merger, you want to put more than a reasonable number of pictures in order to merge into a picture, but also to leave enough space to prevent unnecessary background in the plate; These fortunately, the most painful is in the widescreen, high-resolution screen of the adaptive page, your picture if not wide enough, it is easy to appear background break;

2, as for maintainability, this is a general double-edged sword. Some people may like, some people do not like, because every time the picture changes have to go to the picture to delete or add content, appear a little cumbersome. And the location of the picture (especially the thousand PX chart) is a rather unpleasant thing. Of course, under the slogan of performance, these can be overcome.

3, because the position of the picture needs to be fixed to an absolute value, this loses the flexibility such as center.

4, we also mentioned earlier, we must limit the size of the box to use CSS Sprites, otherwise there may be interference with the picture of the situation. This means that CSS sprites are not appropriate in some cases where a non-directional tiling background is required and the page scaling is required. Yui's solution is to increase the distance between pictures, so that you can maintain a limited scale.

Five, CSS sprites picture cutting technique

1, CSS sprites picture sequence pictures from top to bottom, left to right to add. The background-position is generally used in the form of digital combination, which can reduce the maintenance of unnecessary trouble.
2, does not recommend the CSS sprites the picture to maintain certain spacing, because the file size increases and increases the file volume.

3, CSS sprites pictures in the color of the closer or the same combination can reduce the number of colors, because the image of a few color number of file size will be relatively small.
4, size of the same CSS sprites picture left a large gap, to a certain extent, most of the situation will increase the volume, so csssprites pictures do not have gaps.

5, in the same size CSS sprites picture, vertically arranged pictures will be larger than the horizontal arrangement of the file size.
6, in the CSS sprites picture, the horizontal arrangement picture will be larger than the vertical arrangement file volume.

7. Picture equivalence Merge: When applying CSS sprites images, combine the same images appropriately to save space and reduce volume.
8. Images that do not need to be merged: If the current user determines that only one state or one level is displayed, it is not necessary to merge the pictures of other levels or States.
9, the gold cutting bit: In the CSS sprites picture of the right or left for the most flexible position of the most suitable to put the text before the icon, so will not be affected by other csssprites picture intervention, do not need to reserve a certain line width.

CSS Sprites Introduction