CSS Sprites Generator
CSS sprites are great. They can help reduce the load time of your page by decreasing the number of HTTP requests made.
To create CSS sprites, all you need to do is place all of your smaller images into one big image. Then using CSS, adjust the image positioning using the background-position property to display the part of the image you require.
Tim Chien has created a useful graphics tool which can generate the larger image for your CSS sprites automatically. You simply supply a list of images, select a appropriate padding and then drag the smaller images around until you are happy. Once you are done, the generator supplies both the large image and all the background positions you need to get your smaller images.
Generate those sprites!
Although this application works in Opera, Safari and Chrome; it can only save in Firefox or Internet Explorer.
Comments
timdream
Hi, this is Tim Chien, who made the script.
The name “Kelsey Shay” was credited for the CC-licensed Flickr photo, not for the script. Please correct the name appeared here and sorry for the unfortunate confusion.
I’ve made the same adjustment on the webpage.
Tim
Posted on December 22, 2009
Andi Smith
Sorry about this Tim! This has now been updated!
Weldone on making such a great tool!
Posted on December 23, 2009
Related demos