CSS - Advantages of single image file vs multiple files

Question

I have noticed that alot of sites now, have all of their images in single files are then use background-position to offset the rectangle which is shown on the screen.

Is this for performance reasons? If so why?

Answer 1

Compression on one large image is often more efficient then compression across multiple, similar images.

More importantly, HTTP requests are relatively expensive.

Answer 2

And one more thing that @david didn't mention is, its going to take a lot of server time to load several small images, instead load one big image in one go(request) and manipulate it as your choicee

Answer 3

This is called CSS sprites. It's used for serveral reasons:

• Fewer requests to the server.

• Slightly smaller file size, as a large image is somewhat smaller than separate images.

• Preloading images, so that for example an image used for a hover effect is already loaded as it uses the same image as the non-hover state.

The drawback is of course that it's more work to manage and update images.

Answer 4

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 16x16 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.

Answer 5

You can view an excellent Yahoo's “Best Practices for Speeding Up Your Web Site”: http://developer.yahoo.com/performance/rules.html#opt_sprites