Article introduction of Wulin.com (www.vevb.com): Pros and cons of css sprites.
Pros and cons of css sprites
Regarding this technology, the biggest benefits are the following:
1. Reduce the number of http requests when web page loads. This situation seems to only apply to cases where resources need to be re-acquisitioned from the server side, such as initial loading. But no matter what, it is still very useful for a web page with high traffic or frequent reloading.
2. When making a background image for the link, it can prevent background flickering caused by loading the background image when a:hover. I personally think this is of some significance to improving the user experience.
3. Pictures are easy to manage. The premise is that the pictures of the stitching have certain rules. As shown in the picture below, it is a picture of the button background used by all websites. This allows you to see all button styles in the website intuitively. (I personally like to spell pictures according to certain attributes of the picture. One picture is an icon or a btn background... In this way, the pictures can be managed by the way, and the pictures with certain rules can be followed, which are easier to arrange together. Of course, sometimes, you will also choose to splice a picture according to the module. In this way, a simple logic is generated in the modular structure: call a module and call the background image above. Otherwise, the picture will not be called. It can effectively prevent the problem of calling the entire large picture by just using a small icon.)
css sprites Scope of application:
1. Web page acceleration needs to be completed by reducing the number of http requests.
2. The web page contains a large number of small icons. Or, some icons are very versatile.
3. There are pictures that need to be preloaded on the web page. It is mainly related to a and a:hover background image. If the background images of a and a:hover are loaded separately, then the user's mouse will move to a button, and the background of the button will suddenly disappear and then appear, causing a flash. If the text color of the button is the same or similar to the background, it will be even more embarrassing, which may make people feel that the button has disappeared.
Conditions to be met
In web pages, it is best to have a rule for pictures that are put together through this technology. Set width or height. It is best to set the width and height. Pictures that require tiled are obviously not suitable for sprite.
As shown in the above picture, buttons are determined by the situation of fixed width and height.
In the case of fixed width, several small pictures can be arranged in parallel. When the height is set, the small pictures are arranged vertically.
If the background is neither fixed width nor fixed height, it is easy to use the css sprites technology in the case of neither fixed width nor fixed height, it is easy to produce the status of images that should not appear on the page. If the height is forcibly set, it will be very unfavorable for future maintenance.
Summarize
Whether this technology is good or bad cannot be generalized. It depends on the specific situation of the website. When analyzing, first decide whether you need it or not, and also comprehensively integrate development costs, maintenance costs and other issues. Find a plan that suits the actual situation before making a decision. Use sprites in time, and it is recommended not to place pictures of various sizes, alignments, and uses in extreme ways to maintain them. Such extremes may not reduce the number of http requests, but instead lays hidden dangers for future maintenance.