Dummies guide to image compression algorithms

posted Sunday, June 22nd, 2008 at 12:06 pm by

Dummies guide to compression algorithms

In order to compress your images to best effect it helps to understand the compression technologies (algorithms), used by the popular file formats for web graphics. This helps you understand why one image will achieve better clarity or smaller file size, compared to another image using the same compression settings. You can then optimise your settings to suit the image.

There are essentially two types of compression methods. PNGs and GIFs use lossless compression, which never discards information about the original file. Lossy compression, as that used by JPEGs, discards information such as colour changes and definition, which may be too small for the viewer to differentiate.

LZW compression (Lempel-Ziv-Welch)

This is the lossless compression algorithm used in GIFs. Webreference.com says:

“LZW is a repeated-string compressor, it uses a data dictionary (also called a translation table or string table) to represent linear sequences of data in the uncompressed input stream. The first time a sequence is encountered a code is added to the dictionary. Any subsequent matching sequences are represented by this code.”

What this essentially will means is that the LZW compression in GIFs compresses horizontal data better than vertical, as it works by removing horizontal redundancy.

Deflate

This is an improvement of the Lempel-Ziv compression algorithm and is the method used in PNG files. It works in a similar way as the LZW algorithm, but in addition pre-filters the image data using predictor functions before compression. Four predictor functions are used, two of which address vertical patterns.

This means that as well as removing horizontal redundancy like the standard LZW algorithm, it also compresses vertical data resulting in a smaller file size. As a result PNGs have an advantage over GIFs when it comes to gradients as they can more easily cope with the transition in colour, requiring fewer colours to achieve the effect and reducing banding.

The diagram below demonstrates this and also compares the results in GIFs to PNGs. In most cases an 8-bit PNG will produce better results. In the first two columns you can see the dramatic difference between vertical and horizontal strips. Vertical stripes in a GIF almost doubles the file size while in the PNG the file size is smaller and was still smaller than the GIF with horizontal stripes.

Algorithm diagram

While webreference.com has a similar diagram and test, theirs came out with slightly different results, as with diagonal lines they found the PNG performed marginally worse than the GIF. When I tried this myself using Photoshop CS3 I found the opposite with the PNG performing much better. Perhaps this is down to the software, but I have myself on occasions found GIFs to outperform PNGs, so its worth experimenting.

Smaller file sizes can be achieved by minimising vertical data such as stripes or copy in an image. A few years ago it may have been worth considering the implications of the design of web graphics, on their file size when exported. With today’s widespread adoption of broadband this is much less of a worry and not really worth compromising the design over. This is useful as a demonstration of why one image might compress better than another using the same settings and what you might be able to do about it.

Dithering can adversely affect the file size of an image. Dithering will always come at a premium, but by enabling you to reduce the colour pallet, while smoothing transitions, it can result in a smaller file sizes overall. This will generally be a case of trial and error and your own judgment.

JPEG

JPEG (technically a compression technique not a format) is a lossy algorithm and works well in continuous tone greyscale or full colour images such as photographs. It uses 24-bit colour depth and is capable of 16.7 million colours. Webreference.com says:

“JPEG works by converting the spatial image representation into a frequency map. A Discrete Cosine Transform (DCT) separates the high and low-frequency information present in the image. The high frequency information is then selectively discarded, depending on the quality setting. The greater the compression, the greater the degree of information loss.”

Basically JPEG will dump redundant image data that is unnoticeable to the human eye. This may cause the blurring of images and a reduction in definition and contrast. The colour pallet may become more subdued, colour depth reduced and blocky artifacts may also appear, especially along the edges of areas of flat colour. JPEG exploits our eyes tendency to be more sensitive to slow changes in brightness and colour than we are to rapid changes over a short distance.

There a number of things to avoid when using JPEG compression for images. These include large amounts of copy, fine detail and areas of flat colour. All of these make it difficult compress images to a high degree with the algorithm. It may instead be worth experimenting with a dithered GIF or PNG to see if you can obtain better results even if some continual tones or gradients are used in the background of the image. In JPEGs text will quickly become blurred and unreadable.

JPEG compression has problems with images containing a large amount of red. The colour is prone to showing up the artifacts caused by the algorithm (due to being a mid-tone), meaning that lower compression setting must be used, increasing the file size. Again if a large amount of red is present in an image it may be worth experimenting with a dithered GIF or PNG to see if better results can be achieved. Usually a good rule of thumb when compressing JPEGs in Photoshop is to set the compression to 35%, if the image contains a lot of red it may need to be set to 55% or more.

Ads from Google

1 comment to “Dummies guide to image compression algorithms”

  1. Tumblr article…

    I saw someone talking about this on Tumblr and it linked to…

please leave a comment

spacerdotgif comments RSS feed
Please leave a comment

* required fields