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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.