CSS – Advantages of single image file vs multiple files

Oli

Is this for performance reasons? If so why?

1. A single request means fewer concurrent connections to the server meaning other things can be loading. A TCP connection also costs resources on the server. Fewer total connections per user means more users can use it at once (if your performance is really connection bound).

2. A single sprite usually has a slightly smaller filesize than a bunch of single images, though this is not guaranteed and different formats vary.

3. Object states are all loaded at once meaning interaction is much more immediate than if you loaded another state on demand.

4. Even if part of the sprite isn’t used on the current page, by loading it (and the browser caching it), this would speed up the browsing experience for the user later on when the user views other pages.

Sprites don’t fix everything and you probably shouldn’t get too anal about it until you’re forecasting heavy traffic and/or you’re moving to a CDN where you’re charged per request.

Of course if you have a whole load of 16×16 icons that get used in a single place, you could sprite them up very quickly. I find having several sprites for specific things like that actually makes the CSS a lot cleaner too.