What the hell is an image sprite? Why do I care? How do I use it?!
That’s probably the same thought process I had when I first started reading about image sprites. After a few minutes of investigation via Google, I wanted to try to implement this technique every and anywhere possible on my websites. This isn’t necessarily a required method of implementation of a web site but it is still something that every web developer should at least have an understanding of.
In this 2-part series I’ll go over what an image sprite is, when to use them, how to use them, as well as provide a few examples.
What is an image sprite?
Back in the olden days (circa 90s), multiple images were merged into a single graphic file to quickly composite 2D games. Here is an example [source: wikipedia]. Certain parts of this single graphic would be extracted and used to animate objects, characters, etc. We can utilize the same methodology with our websites and optimize load times (as well as provide an easy means of updating graphics when the times come).
How does an image sprite work in the web-world?
One of the greatest things to happen to a web developer / designer is the invention of Cascading Style Sheets. We can use CSS to pick certain coordinates within a sprite and display those areas on our websites. It may sound a bit tedious to have to find the pixel by pixel locations of every sprite you want to use, but in doing this you may be able to shave off precious load times of your web page.
Decreasing load times? Wtf?
When you want to increase the performance of a website, one of your key objectives is to reduce the amount of time it takes for a particular page (or pages) to load. One way is to keep the number of HTTP requests to a minimum. Any time you insert an image, or include a JavaScript file, or any other file for that matter, it is an additional HTTP request. In the nature of a sprite, you are making a single HTTP request for that graphic, then referencing different parts of it to be displayed on a web page. This works great granted that the size of the single graphic is less than the size of all it’s containing graphics individually (we’re talking bits and bytes here, not lengths and widths).
Another potential advantage is browser caching. Take, for example, this navigation bar:
In this case we assume that this navigation bar is split up into 8 images: 4 for the “default state”, and 4 for the “hover state”. When the user hovers their mouse over a particular image, the “hover state” image is loaded on the fly. That’s a single HTTP request for that extra image. If a user does not hover over all the graphics, not all of them will load, so basically this page will only load the additional images if it *really* needs to. But still not the best situation…
Each graphic is around 1.097Kb – 0.997Kb totaling 8.11Kb. In actuality, I used a single sprite totaling 3.292Kb. By loading even only the “default state” images, we are still reaching a size larger than the single sprite.
Applications
That is only one situation where you can really utilize the benefits of using a sprite. Using them for navigation bars with hover states is probably the most common use, but some sites have taken it a step further.
Take Google for example. Shaving off a single millisecond of load time of their site can translate into some amazing results (probably because they get millions of hits a day). You may not see this type of traffic, but in either case you still don’t want to have a slow website.
Back to my point, lets have a look at a screenshot of my iGoogle homepage:
Looks like a simple logo right? In actuality, the logo is a part of an image sprite:
All those smaller icons are used as elements within the page. With some fancy CSS code-work, only a single image is used on this page! (That’s actually a lie since I have multiple gadgets running with external image sources).
Other high-volume sites like Yahoo and eBay also use image sprites so why don’t you!?
Tune in next time as I go through a few implementation examples: Optimizing with Image Sprites and CSS for Beginners (Part 2)
Designer, developer, and excellent napper.