CSS Sprites browser rendering

Question

We all know that CSS sprite images are great to reduce the amount of requests and such, but what about the performance of the browser rendering the page with several elements using a big image as a background?

Answer 1

As we can judge from our YouTube experience, there are no big problem with that.

Hopefully, browser caches an image in memory and then uses it to render output wherever this image is needed.

Answer 2

You need to balance things. If you are talking about an image which will include say 1000 sprites then the CSS will be huge. In addition there is a very thin chance that you'll be using all those sprites in the same page anyway.

Answer 3

You can save a significant amount of HTTP requests by consolidating your images into one or more composite sprites and using CSS to selectively display parts of the sprite within your web page. Now that the major browsers have evolved enough to support CSS backgrounds and positioning, more sites are adopting this performance technique. In fact, some of the busiest sites on the Web use CSS sprites to save HTTP requests.

With millions of users, Yahoo! and AOL do everything they can to improve the user experience. Both AOL.com and Yahoo.com use CSS sprites to save numerous HTTP requests for their intricate interfaces. Both sites use CSS sprites to selectively display icons within their directories of services, and Yahoo! uses sprites elsewhere as well.

Another benefit of CSS sprites is that the combined image is often smaller in file size than the individual images, despite adding whitespace between images. The smaller size of sprites is due to the reduced overhead of multiple color tables and formatting information required by separate images. To maximize accessibility and usability, CSS sprites are best used for icons or decorative effects.

Answer 4

on slower machines equipped with older browsers (like IE6/IE7) you can notice significant performance drop when you're using very big images many times on one page. It's even more severe, when you're using sprites for :hover states.

You have to moderate your temptation towards pushing all your sprites to one huge image - think about which elements are part of the website/webapp UI and put them into one sprite file (those will be displayed all the time, while browsing). Then try to group rest of the sprites into website section-specific images, and use them as needed. Downside is slightly extended load time (additional HTTP requests), but user experience while viewing/scrolling page will be much higher.