Automating the generation of CSS sprites
“CSS Sprites”:http://www.alistapart.com/articles/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”:http://dev.portalzine.de/index?/pzImageCombine–print which is a standalone app.
Today I also got ab email about “csssprites.com”:http://www.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]
August 20th, 2007 at 10:25 am
October 3rd, 2007 at 5:39 am
August 28th, 2007 at 6:42 pm
The one thing that I’ve found when working with GIF sprites is the colour palette limitation. The more images you add to it, the more you risk running out of colours. Of course, if you don’t need transparency and you can live with the artifacts, then JPG sprites would solve the problem.
The other thing is the need to properly space images in your sprite image. If you have a background image that’s positioned “bottom right” then you can’t have anything above and to the left of it.