Jesse Skinner

CSS Sprite Generator

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!

Published on September 30th, 2007. © Jesse Skinner

About the author

Jesse Skinner

I'm Jesse Skinner. I've been helping clients build web apps for over two decades. I love hearing from new people. If you'd like my help on a project, please contact me.

Contact Jesse

Need help with a project? Any questions? I'd love to hear from you.

Email me at [email protected]