One of the most important steps to creating a great website is making sure that it’s optimized. And a great way to do just that is to gather all of your images together into one CSS sprite. That way, only one HTTP request is needed to fetch all of your images which in turn will speed up your site. Read about more tips on site optimization in my article Optimization Tips to Speed Up Your Site.
Creating a CSS sprite can sometimes be a bit of a headache. You have to align each image into the sprite and then write a lot of CSS in order to make sure each image displays properly. Thankfully, there are some tools out there that make things easier and my favorite is We Are Kiss’s SpritePad.
SpritePad is super simple to use. Just drag your images into the grid and it will create a PNG file for you to download along with the appropriate CSS for each image. Just follow the Guided Tour to see how quickly you can make your CSS sprite. It’s a great tool to help any web developer optimize their site.