Front-end questions-what are CSS sprites and pros and cons?

CSS Sprite is a Web page image application processing method. It allows all the scattered images involved in a page to be included in a larger image, so that when the page is accessed, it can only be requested once, without having to send a request to the server again and again.

Its principle is to meet some of the background pictures into a picture file, and then use the CSS "Background-image", "Background-repeat", "background-position" the combination of background positioning, Implement multiple positions of the background, a picture to be done.

Advantages

1 reduce HTTP requests for Web pages to improve page performance

2 Reducing Picture bytes

3 to solve the problem of naming the headache, before a lot of a name, and now a name to take care of

4 easier and easier to maintain when changing the entire Web page style

Disadvantages

1 pictures when merging, to put more than a reasonable orderly combination into one, but also to leave enough space to prevent unnecessary background in the plate, if the widescreen, high-resolution screen of the adaptive page, if the picture is not wide enough, it is easy to appear background break

2 The time cost of flattening pictures is increased, CSS sprites need to measure the exact position of each background unit by Photoshop or other tools when developing.

3 Coding and maintenance time cost will increase, CSS sprites in maintenance, if the page background has a little change, generally will change this merged picture, if in the original place, and can only (best) add pictures, so that the image of the byte increases, but also to change the CSS. A large sprite can cause endless testing and picture state re-placement relative to a simple button that makes it easy to calculate state positions.

4 Not all pictures are backgrounds, background images should be left to buttons and used to decorate elements, and images used to convey important information should be inline in XHTML.

In short, CSS sprite is very useful, but also do not blindly abuse and beyond the limits of a degree, need to understand too much.

Front-end questions-what are CSS sprites and pros and cons?