Page Speed: 6 Small Images vs. 1 Large Image

This experiment compares the page load times of two different versions of the social media widgets I include at the bottom of my posts. I was actually running this experiment to see for myself the kind of improvements I could achieve by combining my social media widget icons into a single image. Since I’ve already gone through the trouble of testing these pages, I figure I might as well publish the results.

This experiment has implications for anyone who’s heard about using CSS sprites but is wondering if the page speed benefit is worth the effort. Although my social media icons don’t actually use sprites, the principle is basically the same: combining several small images into one large image can help your web page load faster.

Setup

I created two test pages that render exactly the same in a web browser. The content of both pages appears like this:

However, the two test pages are coded differently. The first test page uses a separate image for each of the 6 social media links. This results in 7 HTTP requests: one for the HTML page itself and one for each of the 6 images. The second test page uses only 1 image, which contains all of the social media icons combined. This results in only 2 HTTP requests: one for the HTML page itself and one for the image. Here is the HTML code I used for each of the test pages:

Procedure

I used this web page speed testing tool to measure the page load times. Each of the 2 pages was tested 10 times. The testing server was located in San Jose, CA, and my content server was in Seattle, WA. The pages were requested using IE7 with 2 parallel connections enabled. I ran the entire experiment twice. In the first experiment, I saved the images as 24-bit PNG files. In the second experiment, I saved them as 8-bit PNG files.