Earlier I kind of dismissed image-based icons as a thing of the past. It’s actually not. My preference of course is to use icon fonts, but if you haven't guessed already, like regular fonts, icon fonts are not multi-color, and do not provide the full design possibilities found in image-based icons:
So if you plan to use them, it's best to save them in a single image called a "sprite." Why? To save your browser from making multiple trips to a server to retrieve individual icon images, and consequently slow down page rendering.
I use Compass, so for me the easiest way to create icon sprites is to let Compass Sprites do all the sprite creation work for me. Ryan Bates provided an excellent tutorial on this called Compass & CSS Sprites.
Not everyone uses Compass, like maybe the designer on the project, so if you do decide to create icon sprites manually, and I'm not sure exactly why you would (hint, hint), here are some tips on doing so that will help in implementation.
Share this with your designer!
When you lay out your icons, the best practice is to line them up horizontally (as opposed to vertically):
Left align your icons and place each icons top edge on an equidistant grid line whose coordinate is a multiple of 5-pixels. For example, the horizontal grid line coordinates for 4 icons that are 16-pixels x 16-pixels might be:
0 (first image)
Using multiples of five makes it easier to find the exact Y coordinate in the CSS positioning property later on. The CSS positioning XY values for the above would be:
Having extra pixels of blankness between icons is beneficial. For example, if icons are 32px x 32px, > 40 pixel gridlines would be good:
...versus at 35pixels.
Save your icon sprites as
.png's. Do both, it doesn't hurt and both might be used.
.jpg's are really reserved for photos and not efficient for icon sprites, plus they do not preserve alpha transparencies which become an issue when page backgrounds change (kind of following in a roundabout way the old adage; "measure twice, cut once.").
Want to know when the next article is published? Subscribe here. Thanks for reading!