Automating the generation of CSS sprites

CSS Sprites are a very good idea indeed. Instead of having lots of small images that all need to get loaded (HTTP and possibly DNS request) you use one large image and use background-position to only show the one you need. This makes your pages faster and gives users the impression that it is available much faster as the images don’t pop up one after the other.

The only problem is that creating background images that contain the others can be quite annoying in Photoshop or Gimp or Fireworks or whatever you want to use, which is why I lately find that people create automated tools for that. The first I encountered is pzImageCombine which is a standalone app.

Today I also got ab email about csssprites.com which is an online service that allows you to upload several pictures and creates the combined image and an example HTML file for you. Props to my colleague from oversees, Stoyan Stefanov for that one.

[tags]CSS,sprites,csssprites,image slicing,optimization,speed,rendering,css,webdevtrick[/tags]