Planet Midgard: Archive

Complex webpages ofter require tons of little images to build up. Most of the images are loaded in CSS files.

Recently one colleague of mine started to study the performance of a webpage from the client's point of view. Often you are happy that your server runs the scripts fast and serves images even faster. However every HTTP connection takes it's time and when you have dozens of 10x10 images to get loaded it will take a lot of time.

You can circumvent the problem by using a content delivery network when the two connections per host restriction does not kick in but it doesn't kill the overhead of opening a http connection. But there are easier solutions.

CSS sprites are a concept of gathering all little layout images to a one big image and clipping necessary parts of the image with CSS. Efficient and elegant! There is a one web based tool for sprite making.

This technique gives significant boost for the first time visitors. And in my opinion it also makes layout image versioning a lot more easier. You only have to update one file.

Thanks for the Eero for a great research of the issue!

I also recommend to install yslow to your firefox. It gives great metrics about the pages performance and also some good tips about performace improvement.

Update:

One better CSS-sprite generator at http://spritegen.website-performance.org/