Page Speed: 6 Small Images vs. 1 Large Image

by SEO Mofo on Apr 12th, 2010

in Experiments, Page Speed

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:

Six Images

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Six Images</title>
<style type="text/css">
	#post_widgets{width:360px; height:80px; overflow:hidden; background:transparent;}
	#post_widgets a{display:block; width:60px; height:80px; float:left;}
	a img{margin:0; padding:0; border:0;}
</style>
</head>
<body>
<div id="post_widgets">
	<a href="http://twitter.com/">
		<img width="60" height="80" src="/img/twitter.png" alt="Share this on Twitter!" />
	</a>
	<a href="http://digg.com/">
		<img width="60" height="80" src="/img/digg.png" alt="Digg this!" />
	</a>
	<a href="http://delicious.com/">
		<img width="60" height="80" src="/img/delicious.png" alt="Bookmark this on Delicious!" />
	</a>
	<a href="http://www.stumbleupon.com/">
		<img width="60" height="80" src="/img/stumbleupon.png" alt="Stumble this!" />
	</a>
	<a href="http://www.facebook.com/">
		<img width="60" height="80" src="/img/facebook.png" alt="Share this on Facebook!" />
	</a>
	<a href="http://www.reddit.com/">
		<img width="60" height="80" src="/img/reddit.png" alt="Submit to Reddit!" />
	</a>
</div>
</body>
</html>

One Image

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>One Image</title>
<style type="text/css">
	#post_widgets{width:360px; height:80px; overflow:hidden; background:url('/img/widgets.png') no-repeat;}
	#post_widgets a{display:block; width:60px; height:80px; float:left;}
	#post_widgets a span{display:none;}
</style>
</head>
<body>
<div id="post_widgets">
	<a href="http://twitter.com/">
		<span>Share this on Twitter!</span>
	</a>
	<a href="http://digg.com/">
		<span>Digg this!</span>
	</a>
	<a href="http://delicious.com/">
		<span>Bookmark this on Delicious!</span>
	</a>
	<a href="http://www.stumbleupon.com/">
		<span>Stumble this!</span>
	</a>
	<a href="http://www.facebook.com/">
		<span>Share this on Facebook!</span>
	</a>
	<a href="http://www.reddit.com/">
		<span>Submit to Reddit!</span>
	</a>
</div>
</body>
</html>

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.

Results

Test HTTP Requests Bytes Downloaded Download Time
6 images @ 24-bit PNG 7 16KB 0.623s
1 image @ 24-bit PNG 2 14KB 0.541s
6 images @ 8-bit PNG 7 13KB 0.608s
1 image @ 8-bit PNG 2 7KB 0.461s

Conclusion

Using 24-bit PNG files: the page load time for 1 image was 13.2% faster than the page load time for 6 images.

Using 8-bit PNG files: the page load time for 1 image was 24.2% faster than the page load time for 6 images.