What are the advantages of using CSS Sprites in web applications?

Question

I'm working on a website with reasonably heavy traffic and I'm looking into using a CSS sprite to reduce the number of image loads in its design.

Are there any advantages to using a CSS sprite besides reducing the amount of transmitted data? How much space do you really save? Is there a threshold where using sprites becomes worthwhile to a website?

UPDATE: Thank you for your responses. They are obviously all very carefully thought out and present good sources to verify your points. I feel much more capable to make an informed decision about using CSS sprites in my site design now.

Sansbury

Answer 1

The question is generally not about the amount of bandwith it might save. It is more about lowering the number of HTTP requests needed to render a webpage.

Considering :

• web browsers only do a few HTTP requests in parallel
• doing an HTTP request means a round-trip to the server, which takes lots of time
• we have "fast" internet connection, which means we download fast...

What takes time, when doing lots of requests to get small contents (like images, icons, and the like) is the multiple round-trips to the server : you end up spending time waiting for the request to go, and the server to respond, instead of using this time to download data.

If we can minimize the number of requests, we minimize the number of trips to the server, and use our hight-speed connection better (we download a bigger file, instead of waiting for many smaller ones).

That's why CSS sprites are used.

For more informations, you can have a look at, for instance : CSS Sprites: Image Slicing’s Kiss of Death

Proliferation

one thing that confused me..if we have one bigger image say sprite sheet then also for every icon we have to hit that sprite sheet again and again or is there any way to store sprite sheet at any place while it is downloaded once ? if yes please suggest me tutorial or link or any plunkr. thanks – Hostile

Answer 2

Less http requests = faster loading overall. Yahoo and co. use this technique, if you can imagine the amount of users they have it saves a lot of bandwidth. Imagine 50 seperate images for icons, that's 50 seperate http requests as opposed to having just one css sprite containing all the images, that would save 49 http requests and multiply that per all the users of the site.

Elyot

Answer 3

Actually, sprites are not used to reduce the amount of transmitted data (in most cases it slightly increases the amount of data transferred), but to reduce the amount of requests done on the server.

HTTP requests on a browsers are traditionally done in sequence. Which means that one request will not start until the previous one is completed. Also, it is expensive to open a connection to do a request. By limiting the amount of requests made on the server, you are increasing the speed the elements load.

Coz

Answer 4

I think Yahoo has the best argument for CSS sprites. Besides, the whole page is worth reading:

http://developer.yahoo.com/performance/rules.html#num_http

Doomsday

Answer 5

Besides the performance enhancement of the overall page load by limiting the amount of requests, image sprites can also make dynamically swapping images (for example changing the background image of a nav item on hover) "perform" a little better since all you do is change the x,y instead of the src.

So I guess to answer what is the threshold to warrant using them, I'd say immediately because of the potential loading improvements on each individual client.

Cereal

Answer 6

In addition to reducing HTTP requests (as already noted), CSS sprites aren't dependent on JavaScript. This gives a few other advantages:

• less code to maintain
• easier cross-browser testing
• can be coded inline via style attributes
• no DOM hacking
• no image preloading (so less administrivia -- "Oh wait, I need to preload that new nav button ... crap which .js file has my preloader?")
• you can use css classes to apply it to several selectors
• can be applied to any selector with the :hover pseudoclass, or in any selector that can be wrapped with an anchor (not just imgs)

If you're not averse to DOM hacking, though, you can get some nifty animation effects just by pushing the X and Y values around. Which makes it easier to animate lots of different states (like keypress or onmouseclick).

There are a few interesting graphic production side effects as well:

• fewer graphic production files
• easier to do layout for buttons etc. directly in HTML (less need for PSD comps)
• easier to make GUI changes without having to regenerate a ton of graphics
• just that much tougher for image pirates to slurp your graphics

Cataplexy