Posted by Sir Four at 2:10pm Nov 25 '09Combine Multiple Images Into One
Level: Intermediate
An image sprite is what you've got when you've taken multiple images and combined them into one. You do this because then the browser only has to download one image instead of many, which speeds up your web site.
Here is Ask.com's image sprite:
How do they use it? Here is part of their home page:
To get that Ask logo to show, they position the sprite like so (I've overlaid the sprite and grayed out the parts of it that are hidden):
Now see that little starburst image next to where it says "themes" (in the second image up)? To get that to show, they just reposition the same sprite like this (again, hidden areas of the sprite are grayed out):
So just by using this single sprite image again and again, making sure only the desired part is visible for each area, Ask.com is able to give the appearance of multiple distinct images yet only incur the cost of sending one single image to the browser. The user has no idea this is being done behind the scenes.
How to do it? Well in this case, for the starbust they have a <div> with ID "skd" styled to be 20 pixels by 20 pixels (the size of the starburst). And they set the background (via CSS) like so:
#skd {
background-image: url(image-sprite.png);
background-position: 0 -31px;
width: 20px;
height: 20px;
}
background-image: url(image-sprite.png);
background-position: 0 -31px;
width: 20px;
height: 20px;
}
If you look at the sprite image (the first image) you'll see the starburst is 0 pixels over and 31 pixels down. So the key here is setting the background-position to shift the image 0 pixels horizontally and 31 pixels up. Since the <div> is 20 by 20 pixels, the only portion of the sprite that is visible is the starburst.
The detail:
If you repeat this technique with other images on the page, you can get all or most of them to fit into your single sprite image. Pretty much all the high traffic sites do this. Here is Google's super-condensed image sprite (for their search results page), for example:
An additional note: your sprite image may or may not have a smaller filesize than the sum of the individual images. It depends on the characteristics of those images. But even if it is a little larger in size, it is more than made up for by cutting down the number of individual browser requests for the separate images. Usually, though, you'll be able to get your sprite filesize to be less than the sum of the parts--particularly if you are familiar with image optimization.
Web Site Speed: Using Image Sprites - Sir Four