One Combined Image = One HTTP Request
Figure 6-2. A tale of two images = two requests
You can reduce the number of HTTP requests that your pages require by combining adjacent images into one composite image and mapping any links using an image map. Instead of multiple HTTP requests, this technique requires only one (see Figure 6-2). So, this:
<div align="center">
<h4 align="center">Two Images = Two HTTP Requests</h4>
<p><img src="1.gif" alt="first image"> <img src="2.gif" alt="second image"></p>
</div>becomes this, by combining the images into one composite image and using a clientside usemap:
<div align="center">
<h4 align="center">One Combined Image = One HTTP Request</h4>
<map name="map1">
<area href="#1" alt="1" title="1" shape="rect" coords="0,0,100,100">
<area href="#2" alt="2" title="2" shape="rect" coords="100,0,210,100"></map>
<img src="combined.gif" width="210" height="100" alt="combined image client-side
imagemap" usemap="#map1" border="0">
</div>Figure 6-2. A tale of two images = two requests