CSS Sprites Workflow

When you are coding up a brand new site, I think this is a pretty efficient workflow for how to handle CSS Sprites.

1. Ignore sprites entirely. Make every background image its own separate image and reference them as such in the CSS.
2. When you are reasonably sure the design is “done,” use the SpriteMe bookmarklet to create the sprite. UPDATE: SpriteMe page is dead, but I’ve archived a working version of it here.
3. Comment out (not delete) the old background properties in the CSS and add in the new Sprites-based version:

   #logo {
     /* background: url(images/logo.png) no-repeat; */
     background: url(images/sprite.png) -10px -579px no-repeat;  
   }

4. Don’t worry about the comments bloating your CSS, you should compress your CSS before serving it on live sites anyway which will remove those.

Now if you find yourself needing to update the images inside the sprite, the process can be:

1. Update individual images.
2. Comment out Sprited CSS background images and uncomment regular background images
3. Remake sprite with SpriteMe, replace
4. Swap comments again

One of the complaints about working with sprites is that it makes updating images harder. I think this process makes it much easier. I guess an even easier process would be to have a PSD of your sprite so you can update that directly without touching CSS. If you can pull that off, great. I personally feel more organized having individual graphics. SpriteMe also gives you CSS with the locations of all the sprites, so if you needed to change the size of images or add/delete them, you’ll get those new numbers automatically.

If you have your own workflow for working with sprites, please share!

Related: Setting up sprites diagonally is rather clever. The idea is then you can use the sprite as a background image of a larger box without fear of other graphics in the sprite showing up. This is at the cost of a larger sprite file size because of the extra white space.