Understanding JPEG compression

 

This tutorial is a practical guide to JPEG compression. It describes why JPEG compression is necessary and how it works, then demonstrates how to appropriately apply the compression and how to detect inappropriate application of JPEG compression.

 

Pixels

Pictures are made up of picture elements (pixels), visible in this enlargement as small squares.

Each pixel is of a particular colour (from a palette of 16.7 million possible colours!).

When viewed at normal size, the individual pixels are not discernible and the facial tones look smooth.

The size of the digital file depends on a number of factors; the first of these is the number of pixels that make up the picture.

File size

Where small file sizes are not critically important (e.g. for CD-ROM delivery of a few pictures), one might simply use an uncompressed format (such as TIFF) or JPEG at maximum quality.

However, for web delivery, there are other issues:

  • web browsers cannot read TIFF files, so some form of compression must be applied, and
  • the file size determines how long the end-user must wait for the picture to arrive so that more compression is desirable. But as compression is increased, picture quality decreases.

Thus, the issue of compression vs quality must be seriously considered.

 

  

JPEG is a lossy compression

When JPEG compression is applied, the picture is divided into blocks of 8x8 pixels.

An algorithm analyzes and ranks the information within the 8x8 pixel block for its importance to visual perception; the less important information can then be discarded.

JPEG quality

When a picture is being compressed, the operator must decide how much information should be thrown away.

 
File type/quality File size Time for modem transfer  
  • original TIFF
92K
20 seconds
 TIFF files cannot be displayed by web browsers.
  • JPEG highest quality
30K
6 seconds
  • JPEG medium quality
9K
2 seconds
  • JPEG low quality
5K
1 second

Thus, JPEG compression can achieve results that are indistinguishable from the original (by discarding little perceptible information) or use higher compression to yield smaller files but with perceptible compression artefacts: it is up to the creator of the JPEG file to decide.

Clearly, there are end-user benefits from using compression: smaller files arrive much faster. But inappropriate use of compression can result in perceptible degradation of image quality. Unfortunately, the amount of compression that can be acceptably applied depends on the picture.

 

Colour

 

Photoshop JPEG compression quality 12 (maximum quality)

 
2.6KB

 

Photoshop JPEG compression quality 12 (maximum quality)

 

3.7KB
Colour images contain more information than greyscale images.

 

Complexity

 

Photoshop JPEG compression quality 12 (maximum quality)

 
2.6KB
  

 

Photoshop JPEG compression quality 12 (maximum quality)

 
3.6KB
 White pixels break up the 'pattern' of black pixels. The increased complexity of the image results in a larger file.

 

Photoshop JPEG compression quality 12 (maximum quality)

 
3.9KB
 Although the number of white pixels is the same as in the vertical line, more JPEG analysis blocks are affected by the diagonal line resulting in a larger file.
So, file size increases with the number of JPEG analysis blocks containing complex information.

 

Pattern

 

Photoshop JPEG compression quality 12 (maximum quality)

 
2.6KB
 Black

 

Photoshop JPEG compression quality 12 (maximum quality)

 
3.1KB
 50% white

 

Photoshop JPEG compression quality 12 (maximum quality)

 
2.6KB
 All grey

 

Photoshop JPEG compression quality 12 (maximum quality)

 
5.2KB
 Gradient from white to black

 

Photoshop JPEG compression quality 12 (maximum quality)

 
6.0KB
 Radial gradient from white to black

 

Photoshop JPEG compression quality 12 (maximum quality)

 
26.5KB
 The small blocks of black and white result in much larger file sizes.

 

Photoshop JPEG compression quality 12 (maximum quality)

 
32.2KB
 Random black, white and grey pixels

 

Photoshop JPEG compression quality 12 (maximum quality)

 
66.0KB
 Random coloured pixels
The JPEG compression algorithm is seeking patterns within the 8x8-pixel analysis blocks. Randomness is the absence of pattern and, therefore, requires a lot of information to faithfully reproduce it. So, small, randomly-distributed details contain more information than solid colours or simple patterns.

 

Adjusting the level of compression

 

 

When the JPEG file is being created, the level of compression (and, hence, file size) must be set.

  

 

Photoshop JPEG compression quality 12 (maximum quality)

2.6KB

Photoshop JPEG compression quality 0 (lowest quality)

2.3KB

 The highest level of compression reduces file size with no loss of 'information' (i.e. picture quality).

Photoshop JPEG compression quality 12 (maximum quality)

3.7KB

Photoshop JPEG compression quality 0

2.6KB

 The colour files are larger than the black ones but the highest level of compression still reduces file size with no loss of picture quality.

Photoshop JPEG compression quality 12 (maximum quality)

3.6KB

Photoshop JPEG compression quality 0

3.0KB

 At maximum compression, artefacts are apparent but not too intrusive (black pixels near top of line and 'ghost' to left of line')

Photoshop JPEG compression quality 12 (maximum quality)

5.5KB

Photoshop JPEG compression quality 0

3.7KB

 At maximum compression, artefacts are very noticeable.
So, some images can tolerate greater compression than others.

 

Compression artefacts

The simple graphics used here show quite clearly the factors affecting JPEG file sizes but JPEG compression should not be used for many of them.

In fact, GIF compression is much more effective for solid blocks of colour (or black/white/grey), yielding small file sizes with no artefacts. However, GIF compression works with a palette of only 256 colours so that smooth tones (as in photographs of faces) cannot be rendered.

JPEG compression (with its 16.7 million colours and variable compression) is ideal for pictures with graduated tones (greys or colours) as are found in photographs. But, effectively applying JPEG compression means resolving the struggle between file size and quality.

Of course, the ideal is minimum file size without perceptible degradation of the image. So, what should one look for?

 

Photoshop JPEG compression quality 12 (maximum quality)

6.0KB

Smooth gradation of tone at normal size and in the enlargement.

(Note: pixellation is normal in the enlargement and, in this case, reveals no 8x8-pixel blockiness).

Photoshop JPEG compression quality 6

3.7KB

 Enlargement beginning to show some 'blockiness'. The normal-sized image is no longer absolutely smooth and the central darker part is smaller but this loss of quality might be acceptable.

Photoshop JPEG compression quality 4

3.3KB

 The blockiness now distinct in the enlargement. The gradation at normal size is somewhat 'lumpy' and central dark area is even smaller.

Photoshop JPEG compression quality 0

3.1KB

 At minimum quality, even the normal-sized picture is distinctly 'lumpy', the central dark area is not smooth and does not become quite black.

Even slight deviations from smooth gradation are clearly discernible with this geometrically-simple image so that one would need to use a setting of 6 to 8 to maintain image quality.

 

However, everyday photographs are naturally variable in texture so that higher levels of compression can usually be tolerated.

Photoshop JPEG compression quality 12 (maximum quality)

30.4KB

Maximum quality. Note smooth tone around eye.

Note: pixellation is normal in the enlargement.

Photoshop JPEG compression quality 6

8.8KB

Artefacts are detectable in the enlargement just inside the spectacle frame where there is a sharp change in colour.

However, the artefacts are not visible on the normal-sized picture.

Note the large saving in file size compared with maximum quality.

Photoshop JPEG compression quality 4

7.2KB

 Even at this quality, the artefacts around the spectacles are barely apparent in the normal-sized picture.

Photoshop JPEG compression quality 2

6.0KB

 Artefacts are now visible even in normal-sized picture - most noticeably along the lower rim of the glasses.

Photoshop JPEG compression quality 0

5.4KB

 The normal-sized picture clearly lacks smooth toning, the facial tones comprising 'pools' of solid colours.

So, a setting of 4 to 6 would suffice for this picture.

Larger pictures

Small images have been used on this page so that they load quickly and maintain functionality for you. However, there are times when larger pictures are required.

The pictures of the eye are 200x150 pixels. At maximum JPEG quality, the file size is 30KB and transfer by dial-up modem would take about 6 seconds. If 600x450 images of the same quality were used, there would be 9 times as many pixels in the image (magnification by 3 in each dimension). The file size would increase by 9 (to about 270KB) and the modem transfer time would take about 55 seconds (a long wait!).

At JPEG quality 4, the 200x150 image is 7KB and modem transfer would take just over 1 second. The 600x450 image would be about 65KB, taking about 13 seconds (tolerable for a modem transfer).

By knowing where to look for artefacts and how they are manifested, you can quickly assess images. This is important because JPEG compression is still an empirical process, requiring adjustment, inspection and judgement but with valuable pay-offs for your clients.

Further information

Mark Schroeder (University of North Dakota) presents a more technical examination of JPEG compression.

The Joint Picture Experts Group is the body that governs JPEG compression.