Images may be the culprit in making web page slower as images contribute the good amount to page weight. So I dedicated my little time researching about it, and found few things noticeable, which hit the web performance directly if not being followed. Ok. So question is what to do to avoid that?
Wow! You combined the images into sprites. But Is your task over?
Answer is No. The basic Idea is, how are you making the simple images and how are you combining them into one sprite.
I've few basic suggestions which should be there in our mind, while making images or sprites :
1. Avoid white spaces
2. Avoid diagonal gradients
3. Avoid Alpha transparency
4. Avoid filters eg. AlphaImageLoader
5. Limit colors
6. Horizontal is better than vertical
7. First optimize individual images, then sprite
8. Change gradient color every 2-3 pixels
9. Combine like colors
10. Reduce anti-aliased pixels - via size and alignment
The next level optimization, can be done with the help of different tools & by following some best practices.
1. SmushIt images. Do remember that this tool don't remove the meta information (author, date etc.) from the images as of now. and second point that sometimes it suggests the .png image output for some .gif image. Other So beware about the alpha color transparency in your images.
2. Use PNG (Portable Network Graphics) images are better then gifs in size. PNG8 are smaller in size, but it losses the quality of the image. so I prefer png over png8 where quality matters. Otherwise use progressively enhanced PNG8
3. PNGCrush is an open source command line optimizer for PNG files. It reduces the size of the PNG IDAT data stream by trying various compression levels an PNG filter methods
4. Avoid filters as I) Blocks rendering, freezes the browser, II) Increased memory consumption, III) per element, not per image.
These are the basics, but there are many more optimization practices.
Wow! You combined the images into sprites. But Is your task over?
Answer is No. The basic Idea is, how are you making the simple images and how are you combining them into one sprite.
I've few basic suggestions which should be there in our mind, while making images or sprites :
1. Avoid white spaces
2. Avoid diagonal gradients
3. Avoid Alpha transparency
4. Avoid filters eg. AlphaImageLoader
5. Limit colors
6. Horizontal is better than vertical
7. First optimize individual images, then sprite
8. Change gradient color every 2-3 pixels
9. Combine like colors
10. Reduce anti-aliased pixels - via size and alignment
The next level optimization, can be done with the help of different tools & by following some best practices.
1. SmushIt images. Do remember that this tool don't remove the meta information (author, date etc.) from the images as of now. and second point that sometimes it suggests the .png image output for some .gif image. Other So beware about the alpha color transparency in your images.
2. Use PNG (Portable Network Graphics) images are better then gifs in size. PNG8 are smaller in size, but it losses the quality of the image. so I prefer png over png8 where quality matters. Otherwise use progressively enhanced PNG8
3. PNGCrush is an open source command line optimizer for PNG files. It reduces the size of the PNG IDAT data stream by trying various compression levels an PNG filter methods
4. Avoid filters as I) Blocks rendering, freezes the browser, II) Increased memory consumption, III) per element, not per image.
These are the basics, but there are many more optimization practices.
