O'Reilly logo

ASP.NET Site Performance Secrets by Matt Perdeck

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required