1. Introduction to CSS Sprites

Usually translated as "CSS image stitching" or "CSS texture positioning". CSS Sprites is not a new technology. It has been relatively mature in web development. CSS Sprites is not a golden rule, but in many cases, it has certain advantages. The most important thing is that it can reduce the load on the server. , improve web page loading speed.

CSS Sprites allows you to include all the sporadic images involved in a page into one large image. In this way, when the page is accessed, the image loaded will not be the same as before. One by one, they were slowly displayed. For the current popular network speed, the loading time required for a single image not exceeding 200KB is basically the same, so there is no need to worry about this issue.

The key to speed up is not to reduce the quality, but to reduce the quantity. Traditional image cutting pays attention to precision. The smaller the image size, the better, and the smaller the weight, the better. In fact, the size does not matter, computers are all calculated in bytes. Every time the client displays an image, it sends a request to the server. Therefore, the more pictures there are, the more requests there are, and the greater the possibility of delays.

2. CSS Sprites How it works

CSS Sprites actually integrates some background images in the web page into an image file. When an image is needed, it is achieved by combining the CSS attribute background-image with background-repeat, background-position, etc.

By adjusting the value of background-position, the background image can appear in front of you in different appearances. In fact, the overall appearance of the picture has not changed. Due to the change in the position of the picture, you only see what you should see. It's like the date on a watch. You see it as 21 today and 22 tomorrow because its position has jumped up one notch. So you probably know that CSS Sprites can generally only be used in a fixed-size box (box), so that the parts that should not be seen can be blocked.

3. Advantages of CSS Sprites

1. Use CSS Sprites to It can effectively reduce the http requests of web pages, thereby greatly improving the performance of the page. This is also the biggest advantage of CSS Sprites and the main reason why it is widely spread and applied;

2. CSS Sprites can reduce the bytes of images. I have compared the bytes of merging three images into one image many times and the bytes are always smaller than the sum of the bytes of these three images.

3. It solves the problem of web designers in naming pictures. They only need to name a collection of pictures. There is no need to name each small element. This improves the efficiency of web page production.

4. It is easy to change the style. You only need to modify the color or style of the picture on one or a few pictures, and the style of the entire web page can be changed. Maintenance is more convenient.

4. Disadvantages of CSS Sprites

1. When merging images, you need to merge them into one picture in a reasonable order, and leave enough space to prevent unnecessary backgrounds from appearing in the section; these are okay, but the most painful thing is the adaptive page under a widescreen, high-resolution screen. If the picture is not wide enough, it is easy for the background to break;

2. As for maintainability, this is a double-edged sword. Some people may like it and some may not, because every time the image is changed, you have to delete or add content to the image, which seems a bit cumbersome. And calculating the position of pictures (especially pictures with thousands of pixels) is also quite unpleasant. Of course, under the slogan of performance, these can all be overcome.

3. Since the position of the image needs to be fixed to a certain absolute value, flexibility such as center is lost.

4. As we mentioned before, the size of the box must be limited before CSS Sprites can be used, otherwise it may interfere with the image. That is to say, CSS Sprites are not suitable in some situations where non-unidirectional tiled backgrounds and web page scaling are required. YUI's solution is to increase the distance between images so that limited scaling can be maintained.

5. CSS Sprites image cutting technique

1. CSS Sprites image order from top to bottom, Add left to right. The background-position is generally positioned using a combination of numbers, which can reduce unnecessary trouble caused by maintenance.
2. It is not recommended to maintain a certain spacing in CSS Sprites images because the file size increases and the file size increases.

3. Combining close or identical colors together in CSS Sprites images can reduce the number of colors, because the file size of images with a small number of colors will be relatively small.
4. There are large gaps in CSS Sprites images of the same size, which in most cases will increase the size to a certain extent, so CSS Sprites images should not have gaps.

5. Among CSS Sprites images of the same size, vertically arranged images will have larger file sizes than horizontally arranged images.
6. In CSS Sprites images, horizontally arranged images will have larger file sizes than vertically arranged images.

7. Equal merging of images: When applying CSS Sprites images, merge equal and identical images appropriately to save space and reduce volume.
8. Distinguish images that do not need to be merged: If the current user determines that only one state or level will be displayed, there is no need to merge images of other levels or states.
9. Golden cutting position: The most flexible position is the right or left side of the CSS Sprites image, which is the most suitable position for placing the icon in front of the text. Therefore, it will not be interfered by other CSS Sprites images, and there is no need to reserve certain lines. Width.