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 adv

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