Image optimisation comparisons

Below are four examples of the same image, optimised by different means and in different formats for comparison.

B A C K

1:  ORIGINAL IMAGE

Format: JPG
Colours: 16.7 million
Image quality: Good
File size: 527k – at over half a megabyte, this is, to my mind, unacceptably large for a small/medium-sized image on a website

2:  POORLY OPTIMISED

Format: 8-bit PNG
Colours: 256
Image quality: Poor – noticeable ‘blockiness’/pixellation
File size: 210k – under half the original file’s size, but still unnecessarily large – most of the images on the current TWPF site are in this format

3:  POORLY OPTIMISED

Format: Over-optimised JPG
Colours: 16.7 million
Image quality: Too much JPG file compression has been applied in the optimisation process, resulting in loss of detail, ‘smearing’ and blotchiness. These effects are known as JPG ‘artefacts’
File size: 41k – small, but the compromise on image quality is unacceptable

4:  PROPERLY OPTIMISED

Format: Optimised JPG
Colours: 16.7 million
Image quality: Very nearly as good quality as the original image
File size: 49k – under one tenth of the original image’s size

Images can be optimised by different means and protocols – not all methods are suitable for all image types. The most commonly used image formats used on websites are .JPG, .GIF and .PNG (both 8-bit and 24-bit). At first glance, most of the images currently used on the TWPF website are optimised in 8-bit .PNG format, which is not ideal for photographic images. I believe it is important to use the method and extent of optimisation best suited to each type of image.