Image Compression and CSS Sprites - Web Developer Tools

Image Compression and CSS Sprites - Web Developer Tools

So here are some of the links. I found useful while developing, for image compression and in making sprites

WebSite Planet - Image Compressor

Image Compressor does a good job in compressing JPG and PNG without much of a hassle and keeps the images crisp and sharp. Also it has a option to select compression mode for better results.


SpritePad is the best tool I have seen so far to create CSS Sprites. You can simply drag and drop the images and download the sprite. Fit document is a nice feature. Also it gives the style accordingly for individual pngs with their name as classname.

Sprite Cow

Using sprites needs some experience as it is hard to find the perfect CSS position. SpriteCow helps in it. Open an image in this web app and point your mouse to the image on the sprite to get the exact CSS position and code. If you already have a sprite this is what you should be using for gettin positions.


In cases were you can’t use sprites, and have to use individual pngs. The best thing you can do is reduce the size of the png so that you can improve performance of your site. TinyPNG is the best i have seen so far in doin that. I have seen a good amount of reduction in size. I highly suggest you use this in your project, you can reduce the size of the sprite as well in this, to get better results.


It does the same thing as TinyPNG, but for JPEG files. I like the way they show the original and the minimized version.

Easier way to crop your image files.


Vetrichelvan Jeyapalpandy

12 years of experience in web development. Javascript enthusiast. Performance is an important trait of any website, so trying to improve that wherever possible.

View Comments
Next Post

Underscore.js 101 - _.filter and _.contains

Previous Post

Conversions in Javascript