CSS Sprites online tools

CSS Sprites online tools
Page content

CSS Sprites  it was a very popular technique for a long time. Biggest benefit from it: reduce number of the requestes to the server, and speedup whole website / loading image assets. Working with CSS slides is really painful  Usually you are starting from PSD then you have to decouple them to separate images, then merge them again to one image, and then mark position of each element in the CSS file.

Couple useful tools to work with:

SpritePad – create an edit sprites online

With SpritePad you can create your CSS sprites within minutes seconds. Simply drag & drop your images and have them immediately available as one PNG sprite + CSS code. No fiddling in Photoshop, no manual assignment of CSS styles.


ZeroSprites  – minimise space taken by images

ZeroSprites is a CSS sprites generator aimed at area minimization using VLSI floorplaning algorithms.

Sprite Cow – find position of the sprite

Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css.

Automated spritesheet generators are pretty cool, but I prefer the control over optimisation and compression you get by making them manually.


Stitches  is an HTML5 sprite sheet generator.