Image Compression

This image is arranged in a rectangular grid of pixels whose dimensions are 250 by 375 giving a total of 93,750 pixels. The color of each pixel is determined by specifying how much of the colors red, green and blue should be mixed together. Each color component is represented as an integer between 0 and 255 and so requires one byte of computer storage. Therefore, each pixel requires three bytes of storage implying that the entire image should require 93,750 3 = 281,250 bytes. However, the JPEG image shown here is only 32,414 bytes. In other words, the image has been compressed by a factor of roughly nine.

JPEG first breaks the image into eight by eight blocks of pixels.

Each block is processed independently of the others, so we'll concentrate on a single block. In particular, we'll focus on the block highlighted here.

Here is the same block blown up so that the individual pixels are more apparent. Notice that there is not tremendous variation over the 8 by 8 block (though other blocks may have more).

To find out what happens next, go back and read in your lab report.


RGB Colors
Your browser does not support HTML5 Canvas.

YCbCr Colors
Your browser does not support HTML5 Canvas.

Here is our eight by eight block again:

along with the three different blocks corresponding to

Y Cb Cr

Lighter shades of gray correspond to larger values of Y, Cb, and Cr. Notice how the Y values form a grayscale version of the image.

Now go back and read in your lab report.



Your browser does not support HTML5 Canvas.