Tag: css

Spritepad: tools to generate sprites.

Spritepad: tools to generate sprites.

| March 23, 2012 | 0 Comments

I talk about the CSS Sprite in a previous post titled CSS Sprite : method to reduce time load images and how it can help us to reduce the load time in a web page . In this time i´m going to present you a free online tool to generate CSS Sprites in a easy way: Spritepad.

SpritePad is an impressive web application (which is -currently- free) that simplifies the whole process by allowing us to drag ‘n’ drop any number of images to a canvas, position them how we want and get the auto-generated CSS rules. .Maybe one of the most useful thing that have, in my opinion, is that it is not automatic. So you can play with the spaces between images around the one that we use as principal.

Others similar tools create only a principal image, but with Spritepad you can adjust the style of the images using the file name to create the class. The only thing you have to do is drag into the grid the image that is going to be part of the sprite. You dont need to upload the images before, only drag into the grid and use immediatily (usingan ajax method for upload).


When you finih editing your sprite, you can download the images and the css stylesheet in a zip file.

The application that is online, is free and don´t need register to use. But if you want to register, you obtain some plus characteristics such us a collaborative edition of the sprites that you create.