Some Examples of JPEG Compression


       The photograph that the images below were taken from, was snapped with a Casio QV7000-SX digital camera, in normal incandescent room lighting, with a camera flash.  The .jpeg image was 1280 x 960 pixels, and had an initial filesize of 408K.  A piece of that image was trimmed away, leaving just what you see to the right, at a width and height of 653 x 673 pixels.  That image was saved as a .tif file before any further work was done on it.  The filesize as a .tif was 1,289K ...as a .jpeg, it was 194K.  You can see that .jpeg file, if you want to, by clicking on the thumbnail image to the right.  Just a section of that image was used for the demo below.

books_full_thumb.jpg (17417 bytes)

Compressed to Quality Level 9 (edges are fairly sharp, solid colors are even and flat)  ....filesize is 57K.
bookslice_q9.jpg (58323 bytes)
Compressed to Quality Level 0 (edges are blurry, lossy artifacts are visible in the solid color areas)  ....filesize is 10K.
bookslice_q0.jpg (10011 bytes)
     Every time you re-save a .jpeg image, more data loss occurs.  To demonstrate, I cropped a piece out of the original .tif image, increased the image size from 70 x 57 pixels  to 201 x 163 pixels (for better visibility), and saved it as a level-5 quality .jpeg.  I repeated that process, and saved a nearly identical chunk (as a level five .jpeg, again from the original .tif file), resized it, then saved and opened it, then re-saved it about seven times (as a level-5 quality .jpeg each time). 
       Level-5 .jpeg image, opened and saved once ....filesize is 11K.  Edges are sharper, colors are more solid.        Level-5 .jpeg image, opened and resaved several times ....filesize is 6K.  Edges are more grainy and blurrier, colors are blotchier.

blowup_q5_3x.jpg (10262 bytes)

blowup_q5_multiple_3x.jpg (5310 bytes)

       So, if you're working with a .jpeg image, and you know you are going to be doing several things to it before you're finished, save a copy of the .jpeg as a .tif file (no data loss, millions of colors, just like .jpeg).  Work with it as a .tif file, saving your changes periodically as a .tif file, then do your final save as a .jpeg before you put it on your website.  Never save a .jpeg as a .gif file before you edit it.  Gifs have a maximum of 256 colors, and .jpegs have a maximum of 16 million colors.  See the examples below.

smallerslice.jpg   ...17K smallerslice.gif   ...31K
smallerslice.jpg (16651 bytes) smallerslice.gif (30877 bytes)
       The .jpeg above is still sharp and clear, saved at a quality level of 6.  The filesize is smaller than the .gif image as well.        The .gif above still has fairly sharp edges, and the lettering is just as legible as the .jpeg, but the filesize is twice as big, and notice the blotchy areas in the red and grey sections of the books.

 

Click here to go Back to Editing Images, Part One.

This page was last edited on June 18, 2000.

URL = http://teachertech.rice.edu/Materials/GT2000/Mac/day02/jpegcompress.html


These pages were developed through GirlTECH, a teacher-training program sponsored by the Center for Excellence in Education (CEEE) and made possible by support from the National Science Foundation through EOT-PACI.
Copyright   Michael Sirois, GirlTECH, June 2000.

divider

last edited, ms 6-18-2k, 11:38.