An Explanation and Demonstration of Compression Artifacts

by Scott Truesdell

There are two main types of image compression: lossless (PNG) and lossy (JPEG). Wikipedia has in-depth explanations of both these formats as well as the obsolete GIF format.

Both formats can select the amount of compression desired. The trade-off is lower image quality with smaller file size or better quality with larger file size.

JPEG works better with “noisy” images (like a photo of sand) and gradients (fades) while PNG works better with solid blocks of color.

The image of the International Scout has the three things we examine -- smooth gradients (the sky), areas of high noise (the sand and the scrub brush) and hard-edge spot-color graphics (the black and white circle.) The zoomed images are the the upper-right corner of from large image.

No Compression

121,036 bytes

This is actually PNG-24 which uses lossless Run Length Encoding on a 24-bit palette (224 or 16.8 million colors.)

no compression

click image for full-size

no compression

click image to zoom in

JPEG value = 0

7,273 bytes

When you zoom in you can clearly see the image chopped up into 8x8 pixel blocks. The artifacts are least noticeable in areas with a lot of noise and most noticeable in areas of solid color and where blocks of color meet. Gradients are especially unattractive.

Notice the white area near the black circular background and around the photograph. Most artifacts are very pale cyan, yellow, magenta and black.

JPEG 0

click image for full-size

JPEG 0

click image to zoom in

JPEG value = 50

20,430 bytes (2.8 × larger than 0)

At this level of compression you can still make out the 8x8 blocks in some areas like the sky.

The edges of the black/white circle and the photo against the white background show large amounts of scattered pixel artifacts.

Artifacts are almost invisible in the noisy areas like the sand and the scrub brush.

JPEG 50

click image for full-size

JPEG 50

click image to zoom in

JPEG value = 70

30,952 bytes (1.5 × larger than 50)

Recommended for photos. A compression factor of 70 gives a good compromise between file-size and quality in most photographic images.

While artifacts are still clearly visible at the hard edges when you zoom in, image quality in the noisy and gradient areas is very high.

JPEG 70

click image for full-size

JPEG 70

click image to zoom in

JPEG value = 100

75,902 bytes (2.5 × larger than 70)

At JPEG’s best quality most artifacts are close to invisible. The sky still shows some graininess but the offensive halo of pixels around the edges of the white area are gone.

A compression-ratio of 100 is rarely used because the sort of images in which it is mostly likely to be noticeable are better rendered as PNG-8 which yields a much smaller file size.

JPEG 100

click image for full-size

JPEG 100

click image to zoom in

PNG - 8, 32-color palette

20,930 bytes

PNG-8 uses an 8-bit color space for a total of 28 or 256 different colors. The palette can be optimized for best results. Is this example we have limited the palette to 32 colors, which, in photos, can get pretty ugly.

The limited palette is most obvious in gradients like the sky and least obvious in noisy areas like the sand. It is almost imperceptible in solid colors unless we simply run out of colors in the palette.

PNG 8, 32

click image for full-size

PNG 8, 32

click image to zoom in

PNG - 8

43,266 bytes (2.1 × larger than 32-color palette)

Recommended for graphic design and logos — spot colors.

In this photographic example, the file size increase is exaggerated over the 32-color palette and the file-size savings are less dramatic over PNG-24 files.

PNG 8

click image for full-size

PNG 8

click image to zoom in

PNG - 24

121,036 bytes (2.8 × larger than PNG-8)
(1.6 × larger than JPG 100)

PNG-24 uses the same Run Length Encoding that PNG-8 uses, but it has a 24-bit palette which has 16.8 million colors (224) versus the 256 colors (28) of PNG-8. This format is rarely used because, even though it yields the sharpest image, the extra size is usually a poor trade-off. For example, in logo design, we are usually using a limited number of spot-colors and a smaller adaptive palette works very well for that.

Mixed images like this example are not very common; it’s usually spot-color graphics or a photo, not both.

PNG 24

click image for full-size

PNG 24

click image to zoom in