Coding with Jesse

CSS Sprite Generator

September 30th, 2007

Finally, there is an automated CSS Sprite Generator (via)! Just upload a zip of graphics and it will spit out a single image and a block of CSS you can use.

What are CSS Sprites? If you use a ton of CSS backgrounds for things like icons, buttons and other non-repeating graphics, then you can combine them into a single graphic and use background-position with width and height to show a slice of the larger graphic. This can make a site load faster since there are less files to download.

This is generally a pain to do by hand (not only combining the graphics, but calculating and remembering pixel positions), but with a tool like this it should be a cinch!

About the author

Jesse Skinner Hi, I'm Jesse Skinner. I work with development teams to speed up and stabilize web applications, reduce server costs, fix difficult bugs, modernize legacy applications, and improve developer productivity. I'd love to hear from you and see how I can make your life easier.