Web speed use CSS sprites to reduce picture requests

in the "high user experience" centric network era, do you open web pages too slowly to close the web? I believe many people answer yes. In the high-speed network era, do not challenge the patience of Internet users in Guangdong, otherwise it will only lead to the Internet users away from your site.

There are many ways to speed up

pages, one of which is to reduce http requests. Every website uses pictures, and when a website has 10 separate pictures, it means that when browsing the site, you ask the server for 10 HTTP requests to load the picture. Here’s how to reduce picture requests.

CSS sprites: most developers at the front end of the website call it "CSS Wizard". The popular understanding is that many small pictures are combined into a large picture, which reduces the number of HTTP requests and speeds up the page. Here to Taobao as an example, for everyone to explain how CSS sprites is achieved. If we want to display "today’s Taobao activity" on the web page this picture.


implementation code:

            < div; style=" width:107px; height:134px; background:url (sprites.gif); no-repeat; -133px; -153px"   >; < /div>

width: to locate the width of the picture. Height: to locate the height of the picture. (CSS sprites must define the size of the container, or else it will go wrong)

background:url (sprites.gif) background image path. No-repeat: the background is not repeated. The position of the -133px:X coordinate, the position of the -153px:y coordinate.

some people might not understand the -133px and -153px is how to coordinate, this is a small picture in the picture in the X coordinate and Y coordinate as follows, left, the red point coordinate is in the big picture of X 133px y 153px coordinate coordinate. (coordinates can also be expressed as percentages, such as: 50%, 50%). Someone will ask why the coordinates are positive, but you write negative numbers, because the default x y coordinates are 00 in the way that background defines the background image. If the coordinates of today Taobao pictures of the event is 133px 153px, so use -133px -153px to zero can correctly display pictures.


Leave a Reply

Your email address will not be published. Required fields are marked *