How to use CSS sprites to reduce HTTP requests

CSS sprites refers to the Web page many small pictures (many icon files) into a regular arrangement of a large picture, in the display of the time through the Background-image, Background-position shows the same effect as a small picture that a particular part of a picture achieves and disperses

 

Sprites is ghosts, goblins, naughty ghosts, the first to listen to the name of the high-end brim I was shocked, step by step to uncover the veil after a very simple thing, the role is very large

God Horse is a CSS goblin

CSS sprites refers to the Web page many small pictures (many icon files) into a regular arrangement of a large picture, in the display of the time through the Background-image, Background-position shows the same effect as a small picture that a particular part of a picture achieves and disperses.

Students who have used the jquery UI can have this kind of picture

Many pages commonly used small icons, but we look at each small icon of the source code will find that these small icon src is the same file, are this big picture

Why do you want to use the CSS Goblin

First, regardless of how this is achieved, let's take a look at the good way it doesn't have to be in this weird way, there's a certain amount of overhead in code writing and readability, What good would it do to get people to give up easy ways to use CSS sprites?

We know that when the browser loaded the Web page picture files and external JS, CSS files need to download separately, JS is blocked HTML download process, the picture is another open process to download, different browsing The device will have a different number of download pictures at the same time limit or one or five or 10, anyway, there is a limit, so if a Web page spread over the picture, or a series of pages, even if you are faster than the speed of the download of these pictures in batches.

and each picture's download is a complete HTTP request-response. And put a lot of small pictures in a picture so that you need only one HTTP request-response, in the current speed is not more than 200k of the picture download speeds are similar, download once, whether it is the page or other pages of the site to use the image included in the larger picture, you can use the cache, Does not incur the overhead of recurring downloads, so there is only one HTTP request-response.

So the biggest benefit of using CSS sprites is to reduce HTTP requests, speed up Web site responsiveness, and improve site performance. Some students may ask, a few more HTTP request is really so serious? If you use a large picture, it is possible that there are a few pictures in the larger picture is not used, this is not more content, and several times the HTTP request overhead gap is so large?

Company friends have asked me similar questions, and I have cited an example of my being in Beijing, you are my horse, one day I read Su Dongpo anthology, the interest came to eat Guangdong Litchi, naturally is the horse to buy, and then you go to the bank to take money, take the subway, train, fly to Guangdong to buy a string of Litchi back to Beijing, Carry a string of litchi back not too tired, mainly Beijing to Guangzhou too toss, tomorrow I come to the mood, to buy me a string of similar to, you go to the bank to withdraw money, run a trip to Guangzhou, behold I read the one months of Su Dongpo anthology, if you do not go crazy every day, everyone will think, see you so like to eat Litchi, buy one box back, Carry is some tired, but better than the toss.

In this example, to the bank to withdraw money is the browser to prepare HTTP message, run Guangzhou to come back is an HTTP request-response process, Litchi nature is response, although the HTTP request-response process is not running Guangzhou so tired, but because the HTTP protocol is connectionless, A request after the end of the disconnect, each time this is also very tired, just run aTime to take back a big picture or more relaxed, of course, you can not in the big picture three or four small picture ...

also has the benefit of not only fast, but also traffic, because the HTTP request-response in the client and server-side interactive HTTP message, so download a picture of the flow of traffic is not just the size of the picture, each HTTP message will occupy network traffic. Maybe some alumni ask, who cares about the traffic, you do not say that someone really care, if you are not your own room, but put the server in other people's room to know that the flow is also very expensive, if your site is visited billions of times a day, this flow will make you meat pain, do not know that you have seen Google homepage page Source does not, intercept a part, you can find that people even HTML line break, indentation, spaces are given to the province, you said the picture is readable?
 

Not to mention the vast number of mobile phone party, traffic is also to see, if a site access to spend a lot of traffic, I will not use the mobile phone seems to see

The realization method of the CSS Goblin

Understand why to do so, we can see how to do, first there is a world view of the methodology, first of all understand the background-position of CSS

Background-position Sets or retrieves the background image position of an object. The Background-image attribute must be specified first.

Grammar:
Background-position:length | | Length
background-position:position | | Position
Take value:
Length: Percentage | The length value consisting of floating-point numbers and unit identifiers. See Length Units
Position:top | Center | Bottom | Left | Center | Right

This is the jquery UI to take down the two pictures, is the icon ordinary and hover is like, each small image is 16px * 16px, each picture has 15 rows of 16 columns, of course, some parts do not have pictures, the following demo will have a lot of parts have blank.

Copy Code code as follows:


. Icon


{


Background-image:url (images/normal.png);


background-repeat:no-repeat;


height:16px;


width:16px;


Float:left;


margin:4px;


Background-color: #ccc;


}</p> <p> icon:hover


{


Background-image:url (images/hover.png);


Background-color: #f1f1f1;


}</p> <p> #test


{


width:385px;


Overflow:hidden;


margin:50px;


border:dashed 1px #ccc;


}

Copy Code code as follows:


<div id= "test" ></div>

Copy Code code as follows:


$ (function () {


var icons = new Array ();


var iconwidth = Iconheight = N, columns=16, rows = 15;


for (var i = 0; i < rows; i++)


{


for (var j = 0, J < columns; J + +) {


var position =-iconwidth * j + ' px ' +-iconwidth * i;


Icons.push (' <div class= "icon" style= "background-position: ' + position + ';" ></div> ')


}


}


$ (' #test '). HTML (Icons.join ('));


});

The final effect is the following figure

This enables the use of a large picture to replace many small icon icons, to reduce HTTP requests, improve the performance of the site.

CSS Leprechaun Extra Benefits
The use of CSS Splites also has an additional benefit, if we use the icon content is transparent, and the border is white (and the site background color is the same), we can through a simple CSS to make the entire site icon change, this in exchange for theme when very intimate, About this Tuti introduction can look at the CSS background color hollowing technology practical application and advanced