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" width="46" height="45" />

This HTML causes the browser to send three requests to the server, one for each image. Let's cut this down to just one request.

First, combine the three images into a single image...