The basic premise of a sprite image is to consolidate your site’s graphics into one (or more) master image file. Then, with the magic of CSS’s background-position property, you can shift the master sprite image around and only reveal the parts you want. Like a window. Some might even say like a Sliding Door.
What are the benefits of sprites? There are a few very good reasons to use this method.
Manageability
If you use a ton of images, keeping them in a few master sprite images keeps them manageable. Adding new images to your sprite is just a matter of finding space on the sprite image and putting it there, then taking the x/y coordinates and using them as the background-position to get your new image to show up where you need it to. Rather than create one huge sprite for this site, breaking them up into a few different ones is a good idea. First, you do not want to end up with a 500kb+ final image that will make your users sit and wait while it loads up every image for your site at once. Second, you can categorize your images. For example, on a recent project, I had four main sprites: one for background images, one for icons, one for buttons (including hover/active states) and one for text images that were being used for block titles and whatnot.
Reducing your HTTP request overhead
Anyone who has done work on a high-traffic, high-profile site knows that you want to reduce the amount of HTTP requests that are made as the page loads. One frequent offender here is CSS background images that are requested from the server. If you tend to do a lot of CSS background-image work, each one of those images is requested from the server on page load. These requests will make your fellow developers sad as they attempt to tweak the site for maximum efficiency and performance. Instead of having a bajillion little CSS background images loaded, why not throw them all into sprites and keep your fellow developers happy?
A great way to figure out how severe this problem may be is to get the YSlow for Firebug extension for Firefox: http://developer.yahoo.com/yslow/
This awesome little tool will show you exactly how many CSS images are being loaded and specifically which images are the problem. The goal is to reduce that number and in turn, give your site a higher Yslow grade.
Commonly-used generators
We want to use sprites to help speed the site up, but there are times building the sprite manually by arranging each image on a sprite (in addition to collecting x/y coordinates for each) looks like it will be a very tedious task. In come several popular CSS generators to the rescue. Here are a few that seem like good candidates:
- http://spritegen.website-performance.org
Lots of tweakable options, an easy to use interface and open source. You can also install locally and run it from your server to bypass their .5MB upload limit on images. - http://www.csssprites.com
This one is fairly bare bones. It looks like it would be useful if you don’t need anything fancy. - http://csssprites.org
SmartSprites uses a different approach to spriting, in which you annotate your CSS files to specify which images should be included in the final sprite, and the code is generated within your own CSS files. The main benefit to this method is that there is no copy/pasting CSS for each generated sprite image into your CSS file, it all runs on the fly, and automatically handles things when images are added, removed or changed. The downside is that there appears to be a learning curve to usage beyond traditional spriting, as well as the fact that it must be installed and run locally, command line style.
(Note: there is also the CSS Sprite Generator module, which I did not try out because it’s only available for Drupal 5.)
Best time for a sprite generator?
The best time to use a sprite generator is when you are handed HTML/CSS from a different vendor, or any other situation where you haven’t been around since Day One on the project. When you have tons of images in your image directory, and most of them are being used as background-images in the CSS, this is a good time to optimize your theme with the help of a generator. In the project I mentioned earlier, this was the case. I ended up using the generator from http://spritegen.website-performance.org due to the fact that there was no real learning curve and we needed to get our site optimized for load times quickly.
There are several situations where a generator can choke and you have to step in and fix things manually, such as when you want to repeat an image horizontally. I’ve found that the best approach is to create special sprites for images that will be repeated in the background. These images will usually not repeat correctly if the generator places them within a sprite with other non-repeating images.
The verdict
If this is not the case and you are doing the markup/CSS production work, I recommend learning how to build sprite images on your own, from the start of the project. Not only does it give you fine control over where you want to place your images within the sprite, it also will save you a good chunk of time trying to untangle someone else’s CSS (as well as rigorous testing to make sure the generator correctly placed images and created CSS). Turn on the grid in your graphic program and make use of “Snap to Grid”, this will give you consistent X and Y coordinates for your CSS. For example, set the grid to every 10 pixels, and you’ll be able to easily drag in your images onto the sprite and place it where you want. Coming up with the X/Y coordinates is a lot easier since you won’t have to zoom in at 10000x magnification to verify the exact location where your image is located.
Homebrewing your sprites is not only a great skill to learn, it should be standard procedure for any site you want optimized for performance, small or large.