What is it?
Shade You Pixels is a tiny tool that converts your images into CSS styles. It was made not for replacing all images on your page, but for superseding small parts of your high detailed elements.
How to use it?
Just drop your small image to a dropbox and copy output CSS snippet in your CSS stylesheets. If you want to convert .png image use default RGBA mode, that will save semi-transparency to output image, if you are converting .gif/.jpg image or don't care about semi-transparency, than change underline switcher to HEX mode, it will save some data size and browser productivity resource. Do not use large images, this will cause browser productivity troubles and increase file size.
Why to use it?
If you use magic Lea Verou's prefix free plugin and your server supports gzip compression, you can supersed your small semi-transparent .png or transparent .gif images ( or any other image type actually) with CSS styles to obtain:
- Generated CSS snippet could win up to 4 times in file size, compared to small .png with semi-transparency if your server supports gzip compression and you use magic Lea Verou's prefix free plugin. Aside, medium gziped generated images shows small increase in file size, lage images grow fast and cause browser productivity problems.
- HTTP request savings. Your images will be stored in one file instead of many, so on page loads, you will send one request instead of bunch. This means savings in page load time.
- Time savings. I know, you can do it with your CSS skills, but Shade You Pixels will save a lot of your time.