Original text: CSS Sprite: To Do or Not to Do?
Translated from: To Sprite Or Not To Sprite
Disclaimer: The CSS Sprites referred to in this article are CSS Sprites . This phrase has never had a fixed or conventional Chinese translation. Some people have begun to call it CSS Sprites. Let’s treat it as a try. If you feel it is inappropriate, we will continue to do so in the future. Will continue to be called CSS Sprites. Shenfei(vocal)
CSS Sprite has been around for a while and has risen as a way to make your website faster. Steve Souders just presented SpriteMe! at Velocity 09 (discussing why use a CSS Sprite Generator or other server-based tool when you can use canvas and toDataURL and generate sprites on the fly?). However, there are some misconceptions about CSS sprites, the main one being that they have no drawbacks.
The basic principle of CSS Sprite is to integrate some images used on your website into a single image, thereby reducing the number of HTTP requests for your website. The image is rendered using the CSS background and background-position properties (it’s worth mentioning that this also means your tags become more complex, the image is defined in CSS, not the <img> tag).
The biggest problem with CSS Sprite is memory usage. Unless the sprite image is organized very carefully, you'll end up with a lot of useless white space . My favorite example is from WHIT TV's website, where this image is used as a sprite. Note that this is a 129915,000 pixel PNG image. It's also very well compressed and the actual download size is only about 26K - but the browser doesn't render the compressed image data. When this image is downloaded and decompressed, it will occupy approximately 75MB of memory (1299 * 15000 * 4). If this image does not use alpha transparency, it will be optimized to 1299 * 15000 * 3, but at the expense of rendering speed. Even then, we're talking 55MB. Most of this image is actually blank , there is nothing there, no useful content. Just loading the WHIT homepage will cause your browser's memory usage to rise to at least 75+MB, just because of that one image. ( PS: Unfortunately, the website has been recently revised and the pictures mentioned in the article no longer exist )
The right trade-off in favor of a website does not exist.
Another (although not as important) disadvantage is that if a page using CSS Sprite is scaled using the full-page zoom feature provided by some browsers, the browser will need to do some extra work to correct the behavior of these image edges. Basically , to prevent adjacent pictures in Sprite from being exposed. This is no problem for small images, but will be a performance hit for large images.
There are certainly some examples that show the obvious benefits of CSS sprites, the main one being merging a batch of images of the same size into a single file. For example, a series of 16×16 icons used to identify many things on your website, or some 32×32 icons used as category headers or the like. But it’s never a good idea to combine images that are of severely different sizes, especially a tall and thin image next to an image that is wide and short.
However, CSS Sprite does improve page load times (at least on the initial page load and on subsequent page loads, the browser caches the image). Is there anything that can be substituted? Unfortunately, there isn't an alternative yet. Many browsers are beginning to support offline manifests, and it may be possible to extend this to allow downloading a file (such as a jar/zip file) that contains a list of resources and corresponding URLs. But any such approach will not be seen for some time...
So, when deciding whether to use CSS Sprite, be aware that there are many factors beyond initial page load performance. As a general rule of thumb, if a large portion of your CSS sprite does not contain actual image content, you should avoid using it accordingly. Likewise, keep an eye on possible future issues while maintaining page load speeds while taking care to avoid memory bugs and Sprite performance impacts.
Other CSS Sprite shortcomings
The following are some shortcomings of CSS Sprite mentioned by some netizens in the comments of this article:
Images called by CSS Sprite cannot be printed unless the print statement is specifically added to @media by RichB
If you want to modify a picture in Sprite, you have to modify the entire picture, which will undoubtedly increase the workload. by Tom B
If you find any deficiencies in other CSS Sprites during use, please feel free to mention them.