A manageable method for creating CSS image sprites

The technique for creating and using CSS image sprites has been around for quite some time now. However, they don’t seem to be used near enough, despite the performance bonuses they can deliver. Perhaps it is due to the fact that front end developers feel that they take to much time to create or are to hard to manage. Whatever the case may be, the truth is that they are simple to make and not as annoying to mange as one would think.

In this post I’d like to go over the steps that I use when creating CSS image sprites for any front end development work that I am involved in.

There are a number of online tools out there that can help you with creating these, but when it comes down to it, the simplest method is using the tool you already have – Adobe Photoshop. I find it a bit humorous that there are all these ‘helper’ applications out there that try to aid you in creating image sprites – going as far as allowing you to create image slices around the regions you want to designate a particular style for. Last time I checked, Photoshop has a slightly better interface than some random Web application . just sayin’!

So enough with the trash talking and onto the methods that I use when creating image sprites for my front end development work on client Web/Intranet sites. I’ll be using the current High Road Communications design for this example.

1. Identify elements from the design that will be included within the sprite. I normally only create sprite for images that elements that are going to be styled with a defined height and width value. Yes, it’s possible to do this for ‘fluid’ elements, but I find it can be a headache and not worth the time and/or performance benefits.

   

2. Within Photoshop (I use CS2), I create a new PSD file with decent enough dimensions to fit all the images that will be included in the sprite.

   

3. From the original design I select each element that I have identified from step 1 and paste them into the newly-created sprite PSD. For each image that is inserted, I create an image slice for it (if you’re using Photoshop CS4 or higher there is no image slicing tool, so use Fireworks CS4+ instead).

    

4. On the same layer that the image was pasted onto, I draw a thick border around it with the brush tool; using a really ugly color that will stand out. The reason I do this is for one, it is a good visual clue for where an individual sprite is in the PSD – having them all jammed together can get really chaotic in a short time. Secondly, when styling an element with CSS, it will be pretty easy to see when I have wrong background-position values used, as the thick border will show up in the page layout.

   

5. When this process is complete, the sprite is saved out in an appropriate web format. I normally use PNG-8 as it has the best file compression, for the most part. In addition, I also save the sprite as a PSD so it can be easily managed if new images are added or old ones removed/updated.
6. The last step is the CSS, of course! I style up all my elements as if they were referencing an individual image, and not a sprite, although I ensure that the background-image points to the sprite that was saved in the step prior. When that is complete, all that remains is to update the x and y coordinates for the background-position properly of each element that is referencing the sprite, as well as the actual width and height values. This is where the image slices that were created for each element in the sprite (step 3) comes into play. When viewing the properties for a particular slice it will give you all the information you need – x and y position, and the width and height values. Plug those into your CSS and you are complete!

    

So there you have it, the process of creating an image sprite is not only easy, but fairly manageable as well. As long as you keep your image slices updated when making any changes to the sprite, determining the height, width, x and y values will not be a problem at all.