Call (877) SITE-OPT (748-3678)

Figure 6-2. A tale of two images = two requests

Chapter 6 - Web Page Optimization

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>

One Combined Image = One HTTP Request

1 2 combined image client-side
imagemap

Figure 6-2. A tale of two images = two requests

Copyright © 2002-2017 Website Optimization, LLC. All Rights Reserved - Free website speed test - Privacy Policy
Last modified: February 19, 2009.

Follow us on: Twitter, Google+, Facebook, Linked In