Website Optimization - Combine Images to Save HTTP Requests

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. For the full "Combine Images to Save HTTP Requests" article, see http://www.websiteoptimization.com/speed/tweak/combine/

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.

Combining 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 simplfied 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.

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.
For the full "Combine Images to Save HTTP Requests" article, see http://www.websiteoptimization.com/speed/tweak/combine/

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.

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

For the full "Combine Images to Save HTTP Requests" article, see http://www.websiteoptimization.com/speed/tweak/combine/

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
http://www.websiteoptimization.com/speed/tweak/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
http://www.websiteoptimization.com/speed/tweak/graphic-optimization/
From Speed Tweak of the Week.

King, A. (2003) "Optimizing Web Graphics,"
http://www.websiteoptimization.com/speed/
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
http://www.websiteoptimization.com/speed/tweak/http/
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.


Website Optimization News by Andy King, author of the popular book titled "Speed Up Your Site – Web Site Optimization". Web Site Optimization, LLC is a leading provider of web site optimization and search engine marketing services that "tune up" web sites for increased usability, conversion rates, traffic, and profitability. Click here for more information about Website Optimization