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

Combine Images to Save HTTP Requests

Summary: Learn how to reduce the number of HTTP requests required by your web pages by combining adjacent images and optionally imagemapping the links. This tutorial shows both client and server side techniques you can use to save precious HTTP requests and speed up your site.

One byproduct of automated image-slicing software is the plethora of images now populating the Web. As early as 2002 (King 2003) the average web page had over 24 embedded objects, with over half the total page size consisting of images. Today when we analyze web pages we commonly see 50 to 60 images per web page. The more round trip server requests you require in your pages, the longer and more indeterminate your load time becomes. One way to reduce the number of HTTP requests is to combine adjacent images into one composite image and optionally imagemap the links to different areas. This tutorial shows both client and server side techniques you can use to save precious HTTP requests and speed up your site.

Combine Adjacent Images

One of the steps we go through when speed optimizing a page is to look for adjacent images that can be safely combined. While the file size of the combined image may be slightly larger or smaller than the sum of individual images, the real savings comes from the HTTP requests you save by eliminating objects from your web page. At higher connection speeds especially, the effect of latency and the number of web objects becomes more important than sheer page size on overall display time.

The two images below will serve as our simplified example to represent two or more adjacent images ripe to be combine and optionally imagemapped (see Figure 1).

Two Images = Two HTTP Requests

1st image 2nd image

Figure 1: A Tale of Two Images

Combining these adjacent images creates a slightly larger composite image (805 bytes versus 285+334 = 619 bytes) that saves one HTTP request (see Figure 2). Note that this is a simplified example not designed to show file size savings. We've found that combining JPEGs gives nearly equal or smaller size while combining GIFs can give varied results. The same example using JPEGs yielded a combined image of 1228 bytes, while the 1 jpeg (491 bytes) plus the 2 jpeg (735 bytes) yields 1226 bytes total, nearly the same size at a quality of 25 in Imageready. Note also how much smaller the GIFs are than the JPEGs for these 100 pixel square images showing the importance of choosing the right image format.

One Combined Image = One HTTP Request

combined image

Figure 2: Combined Image is slightly larger yet saves one HTTP request

Whatever format works best for your situation, make sure you use the best graphics optimization techniques from original layered Photoshop files for the best results.

Server-Side Imagemap: ISMAP

If you've got links pointing to each image, you'll need to map these links to your combined image. There are three ways to do this, client-side (works on modern browsers), server-side, and both. First let's look at the old way of doing ISMAPs with a server-side ISMAP:

combine server-side imagemap
<a href="/cgi-bin/imagemap/combined.map">
<img src="combined.gif" width="210" height="100" alt="combine server-side imagemap" 
... style="border-style:none" ismap border="0"></a>

Client-Side Imagemap: USEMAP

Next what most people use today is a USEMAP or client-side imagemap alone thus:

1 2 combined image client-side imagemap
<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">

Combining Server and Client-Side Imagemaps

Finally if you want to make the imagemap bulletproof for very old browsers, you can combine these techniques:

combine server-client-side imagemap
<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>
<a href="/cgi-bin/imagemap/combined.map">
<img src="combined.gif" width="210" height="100" alt="combine server-client-side imagemap" 
 ... usemap="#map1" style="border-style:none" ismap border=0></a>

Conclusion

Combining two or more adjacent images into one composite image can save costly HTTP requests. Each additional HTTP request reduces the predictability of your web page response times because server request times are indeterminate. JPEGs generally combine to similar sizes versus GIFs, which can vary in size due to their compression schemes.

Further Reading

Choose the Right Image Format
Choosing the right image format for your web pages can make a significant difference in quality and file size. Flat colored artwork should generally be saved as a GIF or PNG while continuous-toned images with gradients should generally be saved as a JPEG, although there are exceptions..
Graphic Optimization Techniques
From Speed Tweak of the Week.
King, A. (2003) "Optimizing Web Graphics,"
in Speed Up Your Site: Web Site Optimization, Indianapolis: New Riders Publishing, 2003. A keynote study found that the medium KB40 had over 50 percent graphics and 24 embedded objects.
Minimize HTTP Requests
By combining external files and embedding CSS and JavaScript within your HTML you can minimize the number of HTTP requests required to render your page. Each unique HTTP request requires a round trip to a server, introducing indeterminate delays.

By website optimization on 31 May 2006 PM

Copyright © 2002-2013 Website Optimization, LLC. All Rights Reserved - Free website speed test - Privacy Policy
Last modified: August 26, 2013.

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