JPEG Compression – How does it work?

The JPEG file format is one of the most important innovations of the internet era. Its amazing ability to render high quality images from small files is achieved using the limitations in human vision to discard data youprobably won’t notice.

1. JPEG takes advantage of our eye’s low sensitivity to details in certain areas by down-sampling (think of this like converting four pixels into one averaged pixel). However, it retains detail in areas of bright, high-contrast edges.
2. Instead of smoothing detail in the whole image, JPEG selects which regions of the image, or even just channels of colour in the image that can tolerate these averaging effects without being noticed. One example is that it uses our eye’s reduced response to yellow-blue light (compared to red-green) and reduces the information stored in these colour channels.

In addition to these tricks on our perception of the image, JPEG compression removes redundancy – and that’s one reason you can’t compress JPEG files any further with traditional tools like ZIP.

How well does JPEG compression work?

Well, if we compare a typical JPEG file to a TIFF image – that’s a reference format that traditionally uses no compression at all – then we find that JPEG files are generally as little as 10% of the file size of the TIFF.

The most striking benefit of JPEG is that a file that would take 10 seconds to load in your web browser now takes 1 second.

This is just scratching the surface though: what we must do is consider some of the downsides of JPEG compression, especially considering that graphics tools give you many choices when creating JPEG files. From there we can try and get the optimal file size while still obtaining a high quality level.

How to create high quality JPEGs

The first rule of high quality JPEGs is that you should never open, edit and save a JPEG image repeatedly.

If you do that, the losses in the compression method used by JPEG will accumulate each time you save and then reopen the file, so each successive version of the file will be slightly worse than the last version. Instead, use a lossless working format (covered in a forthcoming blog post).

Secondly: once a JPEG, always a JPEG. Don’t convert a JPEG to another format like TIFF to recover quality, as you can’t reverse the losses in the JPEG file.

The next big factor is the quality setting.

JPEG compression settings

You will find a quality setting in any software that can save JPEG images. This is often a number from 0 to 100, or may be expressed as “high quality”, “medium quality” and so on. In PhotoShop, the quality is graded on a scale of 1 to 12.

As you add more compression – ie. lower the quality setting – the file size shrinks but the image is visibly degraded more. This reduction in detail is a result of the lossy nature of JPEG compression.

The loss that you see will become much more apparent when the compression is set very high (ie. quality between 0 and 20), while correspondingly, as you increase quality, you increase the size of the output file far more rapidly as you approach 100.

Compression vs. file size curve

It’s very important to know that the numbers we talk about with JPEG are not normally in a simple relationship – for example, choosing 95 on the quality setting does not mean there is a further 5% more quality left to give, and nor does a compression setting of 10 mean that the file can be reduced to ten times smaller by lowering the compression setting to 1.

These are both commonly held beliefs but quite wrong, and arguably with quality, impossible to quantify!

In order to help you choose an appropriate compression level, I’ve analysed a JPEG file containing some random content at different compression levels. Here is a graph showing the size of the file saved at each compression level from 1 to 100:

Graph of JPEG compression and file size

Important: the file size in bytes is on a logarithmic axis. The values double at each point on the file size axis.

1. You should be able to see that a high quality comes with an increasingly high storage price tag as you approach 100.
2. In fact, the largest file on the chart (quality 100) is about 50 times bigger than the smallest file.
3. At quality 95 it’s only 20 times bigger. Setting the quality level just slightly lower significantly shrinks the file – and usually, for no perceptible change.

You are probably most interested in the high quality end (where all the real uses of JPEG are found). My advice is to keep the quality setting between 70 and 90 for good results. Above 95 is a very wasteful setting for all but the most specific end uses. Around 60 to 70 is perfect for good quality web use.

Diminishing returns on JPEG Compression

What about the lowest possible quality setting? We all know from experience with JPEG that the image will be very blocky and degraded. A much better result can be obtained for just a little more file size. How do we quantify this “quality” measurement though?

The nature of perception of quality makes it quite difficult to show you a graph of image quality versus file size. Remember, the graph above was about compression versus file size – it doesn’t tell you how good the image looks after compression.

In the two examples below, I’ve zoomed in on a JPEG saved twice at different compression levels. When you look at these images, bear in mind that Image A is a mere 9KB larger on disk than Image B.

Boats - Image A

Boast - Image B

You can see more detail, ie. better quality in Image A. If you’re in any doubt, look at the sky to the left of the nearest boat.

Chances are, you haven’t accepted low quality JPEGs but you might well have been tempted to save JPEGs at quality 100 (many do).

The shape of the compression graph and this example should convince you to think carefully about the trade-off of compression and quality, and not just to always set the quality at maximum or go for the smallest file size every time.

When to use very high quality JPEG settings

The shape of the compression curve actually changes according to the image being compressed. This happens because the opportunities available to JPEG to save space depend on the actual content of the image: how much variability in colour, tone and brightness is there to contend with?

There are some images which suffer more noticeably from the lossy compression of JPEG, because the compression system has been less successful in finding compression opportunities, or has done something to the image which is more noticeable than normal.

Here are some examples:

• Scenes with very large areas of colour gradient, for example, a panoramic sunset – these will look banded in discrete stripes
• Scenes with large dark areas – these will look blocky
• Scenes with high contrast details, eg. text, logos and sharp boundaries – these will look fuzzy

In images of this sort, you must either use a higher JPEG compression level, or (especially in the case of text and logos) move to a lossless compression format. I’ll discuss that in part 2. You might also like JPEG 2000, which is very good at avoiding these kind of problems.

In the next part of this blog, I’ll be exploring more points about JPEG compression and images on the web.

• What is the relationship between image resolution and JPEG compression?
  This is a particularly interesting area. When is quality not really quality? This follows up on my article about image resolution, but from the point of view of JPEG files and compression.

After that I’ll be moving onto:

• How to prepare JPEG files for display on the internet
  I’ll explain this at a technical level and share some practical advice about copyright, too.
• How to archive master images, and lossless formats
  This will cover other file formats, the use of RAW files and mass storage for the long term – some important aspects of digital image workflow.

If there is anything else you’d like to see discussed, please comment on this blog post. I shall try and cover your questions, too, so please go ahead and ask.