Faster Websites with Image Sprites

An image sprite is the combination of two or more images into a single image. In this article, I'll show the reasons to use them and how to make them. I think you'll agree by the end that going to the bother of creating an image sprite is a worthwhile investment.

For demonstration purposes, I'm using the set of 4 images above. A image sprite on a production website can easily consolidate 40 or more images. So, I think it's fair to multiply all the results by ten to get a real world approximation.

Reason 1: Less Bandwidth Used

An consolidated image sprite is likely going to be smaller than a whole bunch of little files. This sounds like a reasonable assumption and the data supports it.

In our simple real world approximation, that gives us 4.4 KB bandwidth savings per page load for a 40 image sprite. It's not a large amount by itself. If we assume that every hit to the website will save this amount we've saved over 4 MB per 1,000 hits. That's getting impressive.

Reason 2: Decreased Page Loading Times

In the first part, we saw that an image sprite can give us some bandwidth savings. This immediately translates into extra speed as the user finishes downloading faster. The download time is only one component of the time it takes to get a file. The other component is caused by latency.

There is a roundtrip time it takes for a web server to respond to a request for a file. This is the latency. The actual latency will depend on quite a few things. Common values will be between 20ms to 300ms.

As shown above, small files can sometimes be downloaded considerably faster than the time it takes to ask for them. Web browsers try to help by requesting multiple files at once but there are limits to:

• How many files the browser will request at once. (6 is common)
• The ability of the web server to process requests without slowing down. (Generally not a problem)

So, our real world approximation of 40 files will have a latency penalty of 6 times that of a single file. We can assume the browser requests files in batches of 6. With 40 files, nearly 7 full batches of requests need to be sent rather than just 1/6 of one request batch. My server has a latency of just under 170ms. That means a wait of a second longer until all the images are loaded.

Making an Image Sprite

The preceding has shown that consolidating small images into a larger image sprite can improve a website's performance. Now, let's see how to create an image sprite and use it.

First, fire up your favorite image processing software and create a consolidated image file with all your loose images. Image sprites work best if the components are laid out in a grid pattern and are the same size. Once you have the file created, the next step is to add a few lines of css to your stylesheet.

.exp-sprite {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-image:url('/media/sprite-tutorial/navigation-sprite.png');
}
.exp-sprite-right {
  background-position: 0 0;
}
.exp-sprite-left {
  background-position: 0 -50px;
}
.exp-sprite-magnify {
  background-position: 0 -100px;
}
.exp-sprite-warning {
  background-position: 0 -150px;
}

The first css rule makes a span or div tag take up an area smaller than the sprite's dimensions and makes the sprite the background image. The other css rules offset the background to move the visible part of the background. The rules are used together to display the desired image.

<div>
  <span class="exp-sprite exp-sprite-right"></span>
  <span class="exp-sprite exp-sprite-left"></span>
  <span class="exp-sprite exp-sprite-magnify"></span>
  <span class="exp-sprite exp-sprite-warning"></span>
</div>

I think that wraps up everything I want to say about image sprites. A website's responsiveness is one way users gauge its quality. Therefore, even small improvements can have big payoffs.

This is part 1 of a series on image sprites. See: SVG Image Sprites