May 25, 2010

CSS – Advantages of single image file vs multiple files

Question by Hamish

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 by 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.

Answer by Starx

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

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+


Please fill the form - I will response as fast as I can!