Web images: 5 - about JPEG compression

JPEG compression

The big advantage of JPEGs is that they can contain a lot of information in a small file size, which is quick to download.

When you save a JPEG, it is compressed to a degree that you can specify. The more highly compressed, the smaller the file size, but the poorer the image quality. Different subjects compress differently, so you need to experiment with the best value for a given image. I find that between 60 and 75% quality is a good all-round compromise value.

In the examples below, it is clear that the maximum compression (3) gives a completely unacceptable degradation of quality.

image with minimum compression

1. Image with minimum compression applied (about 95% quality); file size, 5846 bytes

image with medium compression

2. Image with medium compression applied (about 50% quality); file size, 1462 bytes

image with maximum compression

3. Image with maximum compression applied (about 10% quality); file size, 642 bytes

comparison of edge areas in JPEG file using different compression ratios, magnifiedWhat isn't so clear is the difference between 1 and 2. The image left is a magnified portion so you can see the way that the compression affects edges in flat colour areas (the top of the hill). The colour changes (artefacts) introduced at higher compression are typical, if not very visible in this case.

Be warned that this compression loses information permanently from the image - so once it's lost, you can't get the detail or clarity back! You'll sometimes see JPEG referred to as a "lossy format" for this reason.

When I first started on this web graphics stuff years ago, I saved a whole bunch of files using a fairly high compression ratio to save space. While the file was still in memory (i.e. uncompressed) it looked fine and I didn't realise there would be a problem, because the screen display looked just the same after saving. Imagine my annoyance when I re-opened the files weeks later and they were all pixellated - of course, I hadn't kept the original scans so the images were lost. Disc space is so cheap now so I wouldn't make the same mistake again - I keep high-res. copies of everything on a spare disk and just optimise the ones I want for web use! Which leads me onto this:

Tip: always keep the original uncompressed image, in case you need to go back to it later. And another - if you intend to use web graphics seriously, practise with compressing images to get a good balance between quality and file size.