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

Get ASP.NET Site Performance Secrets now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.