An overview of image compression for the web

2006-11-21

We've all run into them; websites which take far too long to download, I for one usually leave if a website is too slow to download. The speed at which a website loads if usually largely attributed to the compression of the images displayed on the site and although this is an easily fixable problem, many websites do not do so.

While the loss of visitors should be enough to convince you to optimize your images properly, some other benefits of a fast downloading website are higher search engine rankings (yes, they do take load time into consideration) and you can save money on bandwidth for your web hosting. Now that you understand some of the benefits of optimizing your images for a quick download, let's get to it.

When saving the images for your website, you must choose which image format to use and what quality it shall be. Any premium image editing software such as Photoshop CS2 will give you these options. The three major image formats: jpg, gif and png each have their own advantages and disadvantages, but overall, .jpg is better in most situations so you can quite safely save all of your images in the jpg format. If you'd like to read more about the formats, you can read Which Image Format is Best.

Once you've chosen your image format, usually jpg, you will also have to choose a quality value. I will show an example of an image of saving a flower in Photoshop.



The first image is using highest quality and is 46kb while the second is using lowest quality and is 4kb. This is a significant difference in file size so you will have to make a decision, how much quality are you willing to sacrifice for a faster loading time? After some testing, I have found that 60-80% quality gives a high quality image with reasonably small file size; it is my choice for most situations.