ASP.NET Site Performance Secrets

Combining images

Web pages often contain many small images, which all have to be requested by the browser individually and then are served up by the server. This creates a lot of request overhead. It takes far less time and bandwidth to receive one slightly bigger image than to receive lots of small ones. Fortunately, there is a way to combine images into a single image, while still showing the original images individually on the page, using a technique called CSS Sprites.

Take this bit of HTML (in the file IndividualImages.aspx in the folder CombinedImage in downloaded code bundle):

<img src="geography.png" width="38" height="48" /> <p>some html ...</p> <img src="chemistry.png" width="28" height="46" /> <p>some html ...</p> <img src="maths.png" ...