Combine Images to Save HTTP Requests

http://www.websiteoptimization.com/speed/tweak/combine/

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

 

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

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:

<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:

<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:

<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