CSS Sprites are called css sprites by many people in China, and are a kind of web page image application processing method. It allows you to include all the sporadic pictures involved in a page into a large picture, so that when visiting the page, the loaded pictures will not be displayed slowly one by one as before . For the current popular speed of the network, the required loading time of a single image not higher than 200KB is basically the same, so there is no need to worry about this problem.
The key to acceleration is not to reduce weight, but to reduce the number. The traditional cutting plan pays attention to meticulousness. The smaller the picture size, the better, and the smaller the weight, the better. In fact, the size does not matter, and the computer is uniformly calculated by byte. The client sends a request to the server every time a picture is displayed. Therefore, the more pictures, the more requests, and the greater the possibility of delay.
Principle of CSS Sprites
CSS Sprites is actually to integrate some background images in a web page into a single image file, and then use the combination of CSS "background-image", "background-repeat" and "background-position" for background positioning, background-position can be used The numbers can pinpoint the location of the background image.
Advantages of CSS Sprites
The use of CSS Sprites can greatly reduce the http requests of web pages, thereby greatly improving the performance of the page, which is also the biggest advantage of CSS Sprites, and the main reason why it is widely spread and applied;
CSS Sprites can reduce the bytes of pictures , it has been compared many times that the bytes of 3 pictures combined into 1 picture are always less than the sum of the bytes of these 3 pictures.
Disadvantages of CSS Sprites
It is true that CSS Sprites are so powerful, but there are also some shortcomings that cannot be ignored.
When merging pictures, you should combine multiple pictures into one picture in an orderly and reasonable manner, and leave enough space to prevent the plates from being inconsistent. Unnecessary backgrounds will appear; these are okay, the most painful thing is adaptive pages under widescreen, high-resolution screens, if your pictures are not wide enough, it is easy to have background breakage;
CSS Sprites are more troublesome when developing , you need to use photoshop or other tools to measure and calculate the exact position of each background unit. This is needlework, not difficult, but very cumbersome; fortunately, Tencent's ghost brother has developed a CSS Sprites style generation tool with RIA, although there are still some It is inflexible to use, but it is much more convenient than photoshop to measure, and the style is directly generated, copied, and copied!
CSS Sprites are more troublesome to maintain. If the background of the page is slightly changed, generally this merged image should be changed. It is best not to change the place that does not need to be changed, so as to avoid changing more CSS. If it cannot be placed in the original place , and you can only (best) add pictures down, so that the bytes of the picture will increase, and you will need to change the css.
CSS Sprites are very worth learning and applying, especially if the page has a bunch of icos (icons). In short, many times we have to weigh the pros and cons before deciding whether to apply CSS Sprites.
Use of CSS Sprite
There are several articles about CSS Sprites, which basically explain the principle and mechanism very clearly.
What Are CSS Sprites?
How to create CSS sprites
Creating Rollover Effects with CSS Sprites
Building a Dynamic Banner with CSS Sprites
High Performance Web Sites About CSS Sprites 3.2. CSS Sprites
Example of CSS Sprite
1. Image Slicing [1]
is typically a text editor, with a lot of small icons, which run out one by one when opened, giving users a bad feeling. If it can be solved with a picture, there will be no such problem. For example, Baidu Space, 163 Blog, and Gmail do this.
Image Slicing's Kiss of Death
http://www.alistapart.com/articles/sprites
2. Single-image Rollovers[1]
triggers the need to switch images, the traditional solution has to re-request a new image because of network problems Often causes a stop or wait. If you can combine multiple states into one image, you can solve it perfectly, and then use background image technology to simulate dynamic effects.
ColorScheme Ratings
http://demo.rexsong.com/200608/colorscheme_ratings/
3. Extend Background Image[1]
If one side of the picture can be extended infinitely with the background tile, you do not need every corner, every side If you do it alone, you can have one less picture. In fact, this theory can also be extended to the four-corner container, the advantage is that it can greatly simplify the HTML Structure.
Extend Background Image
http://demo.rexsong.com/200705/extend_background_image/
Comprehensive case
Google Korea (1 and 2 tips)
http://demo.rexsong.com/200705/google_korea/
CSS Menus (2 and 3 tricks)
http://demo.rexsong.com/200705/css_background_menus/
Problems with CSS Sprites
Due to the background flicker problem that exists in IE6/IE6/Win, background image on , cache='check every visit': flicker!, someone proposed a solution to this problem Fast Rollovers Without Preload
About the flicker problem of IE6, there is a flicker problem on fivesevensix.com A very good research article Minimize Flickering CSS Background Images in IE6
Also: CSS tests and experiments at brunildo.org is a good reference manual and testing tool for various CSS functions.
Image optimization
1. For non-animated GIFs, PNG8 is more recommended because it can also achieve the same effect, and can save you 10%-30% of the file size.
2. Compared with Fireworks, Photoshop will export a PNG image of the same quality, but the volume will be slightly larger. While Fireworks has done the corresponding compression optimization, it has not achieved the best compression.
3. None of the design software I know has the best compression for PNG image processing, and there is still a certain amount of compression space for the image volume. You can try to use the "image optimization tool" described below to do distortion-free compression optimization.
4. In terms of image volume and size, it is recommended that the volume should be kept within 100K (which is more in line with the best SIZE required by national conditions), and the size should be 800px (the best size). (It was learned from an authoritative personnel, the specific cannot be verified)
CSS Sprites Image Slicing
1. CSS Sprites images are added in order from top to bottom and left to right. The background-position is generally positioned in the form of a combination of numbers, which can reduce unnecessary troubles 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. In CSS Sprites images, combining colors that are closer or the same 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 will increase the volume to some extent in most cases, so the images of CSS Sprites should not have gaps.
5. In CSS Sprites images of the same size, vertically arranged images will be larger than horizontally arranged files.
6. In CSS Sprites images, horizontally arranged images will be larger than vertically arranged files.
7. Image equivalence merging: When applying CSS Sprites images, appropriately merge identical images to save space and reduce volume.
8. Distinguish images that do not need to be merged: if the current user decides to display only one state or one level, it is not necessary to combine images of other levels or states.
9. Golden cut position: The rightmost or left side of the CSS Sprites image is the most flexible position to place the icon in front of the text, so it will not be interfered by other CSS Sprites images, and there is no need to reserve a certain line width.
Fill two
10. Some say to avoid using bottom or right when positioning. When using CSS sprite, it is very easy to only use background-position: bottom -300px or background-position: right -200px;. This works at first, but the problem is that when you expand the related sprite image in width or height, the original position may be wrong, because that image is no longer at the bottom or right of the sprite image . Use the exact location to avoid this problem.
In fact, I feel that in general, the width map will not change the strain. It is quite convenient to use RIGHT and LEFT, but from the overall consideration, it has been upgraded. Revised. The image width may still change. After all, making it too wide at first doesn't do any good, and it wastes a lot of space. Just take a little more time to match the coordinates, it is best not to use RIGHT and LEIFT.
12 Some say enough space for each image
As you can see in the example image at the top of this article, there is enough space reserved for those small images. Why not cram them together to make the sprite image smaller? Because the elements that use these images usually have a lot of content and may require extended spacing so that other images don't accidentally appear.
I support this, it must be more empty, and it won't take up much space. If you want to pursue perfection, then adjust it slowly. Exhausted. In addition to browser compatibility issues, it is best to have more space. Small errors are also ignored.