CSS Sprites (CSS genie) Application

The key to acceleration is not to reduce the weight, but to reduce the number. If the weight is less than kb, as long as the network is not particularly slow, the efficiency is almost the same. However, if the number of images is doubled, the efficiency will be significantly lower.

Traditional cut-down images are fine-grained. The smaller the image type, the better the weight, and the better. In fact, the size of the cut-down images does not matter, and the computers are all computed in bytes. Each time the client displays an image, a request is sent to the server. Therefore, the more images are requested, the higher the latency. Because the transmission time of an image is usually far less than the request wait time.

Three Tips for image reduction (CSS Sprite ):

1. Image Slicing)

For example, in a text editor, there are many small icons. It is difficult for users to open a text editor. If you use a picture to solve the problem, this will not happen, such as Baidu space, 163 blog, and Gmail.

Image Slicing's Kiss of Death
Http://www.alistapart.com/articles/sprites

2. Single-image rolovers)

The traditional scheme needs to request a new image because of network problems. If you combine multiple states into a single image, you can solve the problem perfectly, and then use the background image technology to simulate the dynamic effect.

ColorScheme Ratings
Http://demo.rexsong.com/200608/colorscheme_ratings/

3. Extend Background Image)

If a side of an image can be tiled and extended without any restrictions, you do not need to create a single corner or edge. You can have only one image. 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 Cases

Google Korea (Skills 1 and 2)
Http://demo.rexsong.com/200705/google_korea/

CSS Menus (2 and 3 Tips)
Http://demo.rexsong.com/200705/css_background_menus/

 

Original: http://blog.rexsong.com /? P = 746