Wayne Schmidt's Internet Image Page: Pictures comparing how different JPEG image qualities end up looking on the Internet.

If you have a successful website with lots of pictures, like my site THIS AND THAT, then you know that those images can eat up a lot of bandwidth. If you go over your bandwidth limit then either your site will be turned off by your server for the rest of the month or you'll be hit with a large over-limit bill. (I got hit with one for $120.00 once.) One way to avoid both of these unpleasant events is to increase the compression of your image files. This can be done simply by resaving them and selecting a lower quality, or higher compression, factor. The problem is how far can the compression be increased without losing too much picture quality. That's the question this page hopes to answer.

To do so I took a picture of a toy truck with a few flowers in it to provide a mix of hard and soft lines for evaluation. Then I reduced it to 4.6 inches wide at 72 ppi and saved it at three different quality levels: 1 (very low), 6 (medium and the usually default) and 12 (highest quality.) The picture was 201 KB before compression. here's what it looks like at each of the different compression values:

Level 1 (very low quality - very high compression) reduced from 201 kb to 29.2 kb:

Level 6 (medium quality - default compression) reduced from 201 kb to 41.9 kb:

Level 12 (highest quality - lowest compression) reduced from 201 kb to 130 kb:

It's impossible to decide on one quality setting for all applications. However, I hope these examples provide some idea of what the different qualities end up looking like on the Internet. For an advertisement for a toy truck, the lowest quality figure is good enough to give someone an idea of what the truck looks like. If the goal is to show or sell something more complex like the flowers, then I'd say a quality of 6 is the bare minimum.

 
Another option is to use a larger picture saved at a lower quality rather than a smaller picture saved at a higher quality. Consider the following two images:

The image on the left is five inches wide and saved at quality level 4 for a total size of 36.2 kb. The one on the right is three inches wide and saved at quality level 8 for a file size of 38.2 kb. Even though the larger image uses less bandwidth to transmit, it actually looks clearer, particularly the text.

 
Finally, the file size can be reduced by making the picture itself smaller. Consider the following two pictures both saved at quality level 6:

The 5 inch wide file on the right eats up 41.9 kb of bandwidth whereas the 3 inch wide one on the right only uses 31 kb. Which is appropriate for you depends on how the image is going to be used.

 
And what about using what I learned putting this page together as regards saving bandwidth for my site? Since all of the photos on it are saved at the default quality 6, and the vast majority of them are used to portray pictures of complex objects like flowers, then reducing them all to a lower quality really wouldn't be in the site's best interests. (That means I don't have a magic bullet to cut my bandwidth so it looks like I'm going to have to upgrade to a commercial level site and pay Earthlink a lot more money every month. Rats.)

 
Return to the mainpage and browse 90 other subjects including several other pages related to cameras, lenses and photography.