Advantages and disadvantages of CSS Sprites

Advantages


1. Reduces http requests on webpages, greatly improving the page nature;
2. Reduce image words;
3. To solve the problem of image naming, you only need to name an image in a set. You do not need to name every small element, which improves the efficiency of webpage creation.
4. Easy to change the style. You only need to modify the color or style of the image on one or more images. The style of the entire webpage can be changed. It is easier to maintain.


Disadvantages


1. When merging images, You need to combine multiple images into one image in an orderly and reasonable manner, and leave enough space to prevent unnecessary background in the Section, the most painful thing is the Adaptive Page under a wide screen or high-resolution screen. If your picture is not wide enough, it is easy to break the background;
2. Difficult to develop. You need to use photoshop or other tools to measure and calculate the exact location of each background unit. This is a needle, which is not difficult, but complicated.
3. It is troublesome to maintain the page. If there is a slight modification to the page background, we usually need to change the merged image. It is best not to change the page background, so as to avoid changing more css, if the image cannot be placed in the original place, the image can only be added (preferably), so that the bytes of the image are increased and css needs to be modified.
CSS Sprites is worth learning and applying. In particular, there are a bunch of ico (icons) on the page ). In short, we often have to weigh the pros and cons and decide whether to apply CSS Sprites.




Use


There are several articles about CSS Sprites, basically explaining their principles and mechanisms clearly.
What Are CSS Sprites?
How to create CSS sprites
Creating rolover Effects with CSS Sprites
Building a Dynamic Banner with CSS Sprites
Content about CSS Sprites in High Performance Web Sites 3.2. CSS Sprites