Web page speed: Using CSS sprites to reduce picture requests

In the era of "user experience" as the center of the network, do you close the page because it is too slow to open the page? I believe many people's answer is yes. In the high-speed network era, do not challenge the patience of Guangdong netizens, or will only lead to users away from your site.

There are many ways to speed up a Web page, one of which is to reduce HTTP requests. Each site will use the picture, when a site has 10 separate pictures, it means that when browsing the site will be sent to the server 10 times HTTP request to load the picture. Here are some ways to reduce the picture request.

CSS Sprites: Most of the front-end developers called "CSS Wizard", the popular understanding is: More than a small picture together into a large picture, reduce the number of HTTP requests to reach the page speed. The following Taobao as an example, for you to explain the next CSS sprites how to achieve. If we want to display on the webpage "Today Taobao activity" this picture.

Code:

Width: To position the picture. Height: To locate the height of the picture. (CSS sprites must define the size of the container, otherwise an error will be displayed)

Background:url (sprites.gif) The path to the background picture. No-repeat: Background does not repeat. The position of the -133px:x coordinate position -153px:y coordinates.

Some people may not understand this -133px and -153px is how to come, this coordinates is the small picture in the big picture The x coordinates and the y left coordinates, the following figure, the red point coordinates is in the big picture the x-coordinate coordinates is 133px y coordinates to 153PX. (coordinates can also be expressed as a percentage, such as: 50% 50%) Some people will ask why the coordinates are positive, but you write a negative number? Because the background picture is defined in background this way, the default x y coordinate is 0 0. The following figure today Taobao activity picture coordinates are 133px 153px, so to use -133px-153px to zero to correctly display the picture.

The advantages of CSS sprites: You can reduce the number of HTTP requests, such as 10 separate images will be issued 10 HTTP request, combined into a large picture, only send an HTTP request, thereby increasing the load speed of the Web page.

The disadvantage of CSS sprites: Everything is good and there are drawbacks. Some people may like, some do not like, because every time the picture changes to this picture to add content, the image of the coordinate positioning to be very accurate will be slightly cumbersome. The coordinate positioning is fixed to an absolute value and therefore loses some of the flexible attributes of center.

CSS sprites has both advantages and disadvantages. If you want to use, you should look at the Web page to load speed mainly or to maintain easy to the main.