Building BobSmithPhotography.net has stopped expanding because I've been overwhelmed with spam on the comment forums. So, if you're here and have questions about web design come and visit Forums, Blogs, Wikis dot com. It has articles that I've written, some of which are also here, and a web design forum as well so you can ask any questions you may have. There is still a lot of good stuff here though, so poke around the links and take a look.

Home » Other Tips » Graphic & Image Tips » JPEG Compression Levels

JPG Compression Levels

One of the common concerns of web designers is how far can an image be compressed before  they start to degrade.  See, designers have to walk a fine line between what's acceptable quality compared to what is too large of a file.  Too big and you'll lose visitors because your site takes too long to download.  Too small and you'll lose clients who think the JPG compression artifacts reflect poorly on your image quality.

So, let's start with the following image.  This started out as a 2048 x 3072 pixel image from a Canon 10d.  For this tutorial I downsized it to 300 x 450 pixels and then ran it through Smart Sharpen in Photoshop at 75% with a radius of 1.0 pixels and removed Gausian Blur.  This sample was saved as a level 4 JPG giving us a total file size of 41.9kb.  I used level 4 for the sample because that's where I usually start. 

JPEG Saved at level 4

Just to go as far as possible, here is the same image saved as a level 1 jpg. It's 37.1kb.

Flower saved as a level 1 jpg

A level 12 jpg of the same image is 146kb, but I'm not going to upload it here because of the file size. 

Text Files
JPG compression artifacts are much more noticeable in images with defined edges, and text is some of the worst.  If you have cable with music channels, look at the text on that channel.  That mess around the letters is due to compression artifacts.  Don't have digital cable?  Look at the following.

Example of jpg compression artifacts

This file is a zoomed in letter A from a file saved as a level 1 jpg.  All the gray pixels are compression artifacts. 

Conclusion
So, how to decide?  What I do is start at level 4 and move up and down until I don't see a change in the preview window.  The idea is you want the smallest image you can without affecting the quality to negatively. 

Content managed by the Etomite Content Management System.