I am preparing to release an online imaging toolset that includes the ability to create 3 state icon sets using discrete images as well as CSS sprite palettes, similar to the jQueryUI method, and I found myself in need of... wait for it... some 3 state icons for the app.
I settled on the ubiquitous FAMFAMFAM Silk icon set and got a chance to try out the toolset and was not disappointed.
First, in order to accomodate a pleasant hover state, I grew the icon canvas size from 16px to 20px. This allows for a semi-transparent black border to represent the hover state.
To represent the inactive/disabled state I simply dropped the alpha to 50%.
The as yet unnamed icon set tool gobbled these images up and spit out 2 sets of files, both supporting 3 state icons but in entirely different fashion.
For a site using just a few icons, a discrete image strategy could be quite sufficient, but as the number of icons grow the advantages of using sprites become apparent: the CSS is smaller, the number of image requests are reduced to 3 and typically, the size of the combined image file is smaller than the sum of the constituent images. Seems like a win win to me.
You can download the FAMFAMFAM Silk sets from the link at the bottom of this post.
You will notice that the sprite set contains all 1000 of the FAMFAMFAM images. This is probably overkill for just about any site and it is included as an illustration of the use of sprites.
here are the proof sheets: discrete, sprites. You will notice, when loading the discrete set that there are 3000 items to load. While the items are less than 1k each, it takes some time. On the sprites sheet, there are 3 300kb images to load and the page is ready with a quickness. This is the most compelling reason to use CSS image sprites.
I will very soon release a version of the icon set tool specifically targeting the Silk icons and you may use it to generate a custom sprite palette containing only the images/css that you need.
This means that you can presently safely use the full set to develop your site, include only the css rules for the images you are using and when the tool is released, just regenerate the palette with the icons you need.
You can then simply replace the images and css without modifying the markup of the content as the class names will remain the same.
As shallow background regarding CSS sprite palletes, they can improve the performance and maintainability of your site in that all of the images are merged into a single file which results in fewer http requests and fewer files to manage.
CSS sprite palettes are useful for any set of images. You could, for instance, merge all of the images in your site into a single file and use CSS rules to display them although this is not usually the most practical way to develop a site.
This post is focused on icons, e.g. menu or toolbar images, which typically are a fixed and known quantity, unlikely to change and numerous. Using sprites, regardless of how many icons you have, you will need only serve 3 image files.
Detailed CSS Sprite Info:
Download: famfamfam_silk_icons_v013-3-state.zip (original, 3 state discrete and CSS sprites)