Lion's Head from Table Mountain, Cape Town
200X134 pixels 80400 bytes (3,672 byte Jpeg)
This article gives a brief introduction to the Jpeg (pronounced jay-peg) lossy compression image storage and transmission format, and describes some important aspects of its use. You do not need to understand all these issues to use Jpeg, but some knowledge may help you create better images.
The default quality setting on most IJG packages (including ImageMagick used on photo.net) is 75, which gives a good tradeoff between file size and perceived quality. The default chroma sub-sampling of 2:1 works well for the majority of images (photo.net uses 1:1). There are known errors and tradeoffs in the compression process.
Several previous attempts have tried to compare the Jpeg's produced by Photoshop against those produced by IJG, but these are unsuccessful for various reasons. First the quantisation tables used by each package are not the same, and each has different emphasis on visual perception. In addition the chroma sub-sampling used by Photoshop changes from 1:1 to 2:1 half-way across the quality scale, without direct control by the user.
The use of the Jpegdump utility allows for examination of the output of images from many different sources, without needing to own the package that produced them.
Few of the available sources and articles seem to answer all the questions that come up often in Q&A Forums, hence this attempt to clarify as much as possible. I am not an expert, nor did I take part in the development of Jpeg, so my discussion and conclusions are empirical and subjective. Comments and feedback are welcome.
The most common questions are covered in the Jpeg FAQ. Jpeg images were first mentioned on this site in Adding Images to Your Site by Philip Greenspun in his 1998 book. There are also written sources (I have no references for these).
There are multiple overlapping threads in the photo.net archives, such as:
A JPEG question in 1998 and Why are Phil's JPEGs
smaller than mine? in 1999. Even more Ideal compression rate for JPEG Format and Printing JPEG - bad juju and Jpeg compression comparisons
in 2000.
In 2002 a new problem nearly crippled photo.net for several months Browser Problems Caused by Photoshop 7 JPEG images resulting in several controversial changes (see What's happening to our uploaded images?). Still more questions came in 2003: JPEG compression loss and uploaded file size.
More discussions can be found in the rec.photo.digital newsgroup, or by searching Google Groups (Usenet). My own learning curve has spanned this same time-frame, but it seems the sources of information are not clear enough to avoid repeated questions.
The aim of Jpeg compression is to take full-color (and gray-scale) "real-world" scenes and reduce the file size of images for storage and transmission. While capacity and bandwidth have improved dramatically over the last decade, the increased size of images make Jpeg still relevant for digital cameras users and websites.
The Jpeg organisation is an umbrella body that coordinates formats for encoding and compression of images. What is commonly known as Jpeg is the JFIF (Jpeg File Interchange Format) implementation (described by Eric Hamilton in 1992). This makes up the vast majority of images viewed today by browsers on the world-wide-web.
This standard doesn't define exactly how to implement this process, but is sufficiently wide that images from any program can be viewed. The most common version in use is that produced by the Independent Jpeg Group or IJG (see below). Other implementations are the Pegasus Jpeg Library, and the version used in Photoshop. These differ only on the encoding side of the process.
Human visual perception
comprises the eye and retina, plus the processing done in the cortex of the brain. There are many shortcuts and tricks used to create the feeling of accurate perception, but "optical illusions"
dispel this myth. The human eye is more sensitive to moving object and edges rather than gradual transitions, and to red and green rather than than blue light. It is also more sensitive to changes in
brightness than colour.
In the diagram on the left various grey-scales A to E represent gradual changes in brightness. These appear smooth and continuous to the eye, although each is made up of less than 256 steps (B and
D are not as smooth as C). This can be seen after several Jpeg compressions are applied to create the right hand image.
This perceptual bias is exploited in Jpeg (see below). Similar perceptual biases are taken advantage of in television images, and MP3 audio coding.
Conventional methods of lossless compression such as Zip reversibly reduce file sizes while preserving information by compacting regularities in the data. Jpeg compression goes one step further, by organising regularities in the visual perception of an image and using lossy compression to reduce the file size of the image. This process involves a small but irreversible loss of quality as discussed in the errors below.
Edges in a typical image - zoomed in to see the pixels
After compression most of the edges are still present, with some artifacts
The actual method of Jpeg/JFIF compression is well described in this tutorial by imaging.org.
The main steps are as follows (some require heavy maths)
For illustrative purposes large images are not needed, since all of the Jpeg compression takes place inside 8X8 (or 16X16) pixel blocks. Note that a Jpeg cannot be compressed further using Zip or any other process of lossless compression, since this is already done as the last step of the Jpeg encoding.
Edges in a typical Jpeg image - split by red, green and blue channels
Note the predominance of green and blue pixels, with few red pixels
The green channel is closest to what the eye sees, with blue having next most artifacts
Decoding an image from a Jpeg is the reverse of this process, and does not need elaboration here.
Typically the only thing that the user can control in Jpeg compression is the quality setting (and rarely the chroma sub-sampling). The value chosen is used in quantisation stage above, where less common values are discarded by using tables tuned to visual perception. This reduces the amount of information while preserving the perceived quality. Chroma sub-sampling settings are dealt with separately (below).
Ranges of quality settings differ in each implementation, but the IJG values range from 99 (best) to 1 (worst). Please note that these are not percentages, nor is there a direct correlation with the final file size. The example at the top of the page uses an IJG quality setting of 50, and has a file size ratio of roughly 20:1. Anytime you read that an image has been compressed with 10:1 Jpeg quality, you should know that this is slightly misleading (see digital cameras below).
Jpeg is a discrete algorithm, and for a given quality setting different input images may give widely differing file sizes. An image with lots of texture and fine detail will produce a large Jpeg file, while one consisting only of blue sky will be very small. Chosing an appropriate Jpeg quality setting is a subjective decision, with no hard rules. I personally use IJG quality settings of 75 to 50 depending on the subject.
IJG compression settings comparison - zoomed in
The Photoshop scale from 12 to 1 covers the same range, but in differing steps. The optimum PS quality settings for web images range from 6 to 3 depending on subject. See Jpegdump below for equivalent values and the variation in chroma sub-sampling.
Photoshop compression settings comparison - zoomed in
Picture Window 2.0 used the Pegasus Jpeg Library and has a scale from 100 to 1. This is totally different from the IJG settings, and typical PW quality settings range from 95 to 85 (below that is not useful).
Picture Window compression settings comparison - zoomed in
Chroma sub-sampling works because human vision is relatively insensitive to small areas of colour. It gives a significant reduction in file sizes, with little loss of perceived quality. Some important exceptions are noted below. The default IJG chroma sub-sampling is 2:1, which can cause perceptible errors in some images. Photo.net uses ImageMagick 1:1 chroma sub-sampling in most cases. The default for Photoshop varies by version, and also by quality setting, as indicated by Jpegdump below.
IJG Jpeg sizes Chroma 1 Chroma 2 96X64_75 2,230 2,087 bytes 48X32_75 1,107 1,054 24X16_75 773 753 12X8_75 679 675
For historical reasons the standard 1:1 chroma sampling is sometimes called 4:4:4 and the lower quality 2:1 sub-sampling is called 4:1:1. The 4:2:2 option is an old standard from the television
industry which is seldom used. One exception seems to be consumer digicams which use the 4:2:2 sub-sampling.
Chroma 4:4:4 4:2:2 4:1:1 48X32_100 2,682 2,253 2,026 bytes
IJG compression settings comparison (2:1 chroma)
Note how the color edges smear out, these are also artifacts
Some characteristics of consumer digital cameras are particularly relevant to this article. The current generation have a single CCD (or CMOS) chip with R, G & B colour filters arranged in what is called the Bayer pattern. This allows interpolation to give an approximation of full-colour for each pixel, from an array of 8-bit grey-scale values. (This is quite different from scanners and high-end digital cameras which have 3 separate RGB sensors). These interpolations create artefacts called fringing on the edges of colour areas (analagous to chroma sub-sampling).
A test of Jpegdump on the output from a 1.3 mega-pixel digicam gives interesting results. The Jpeg file sizes vary with the image content, but for this camera the
specifications are as follows:
SHQ mode File size 440KB (max) and HQ mode File size 220KB (max)
For an 1280x960 pixel image these are equivalent to compression ratios of 8:1 and 16:1 respectively. The "super-high-quality" mode gives an IJG equivalent quality
setting of about 93, and the "medium-quality" mode gives an equivalent of 75-80 for typical scenes. These are consistent with suggested settings for use on a website (and give good detail in 4X6"
prints from the Jpeg).
The Jpeg chroma sub-sampling is the 4:2:2 setting (not the default used in IJG or any other package). This may be because the Bayer pattern interpolation already introduces a 2:1 horizontal sub-sampling (similar to that in a television picture). This gives a small space saving, and using a 1:1 chroma sub-sampling would probably be of little benefit. Re-saving these images from a digicam as IJG 2:1 chroma sub-sampling introduces a small but detectable loss.
The decoding stage is well implemented, and there are no issues that warrant discussion here. Older computers with 16-bit color display are an exception. IE4 was the only browser that catered to
them, by dithering the output image.
An existing bug in many browers caused crashes on Jpeg images created with the File Save-As option in Photoshop 7.0 (embedding excessive amounts of information). The fix was to upgrade to 7.01, or
use the Save for Web option instead.
By definition every Jpeg contains imaging errors no matter how high the quality setting, and should not be used for master-archiving. The main concerns relate to subjective perceived quality, and the file size tradeoffs in the original compression. There is no hard-line where errors become perceptible, it is a matter of judgement.
The Jpeg compression process introduces more artifacts at lower quality settings. These become particularly visible near edges, and in areas of solid colour where boundaries of 8X8 pixel blocks can show irregularities. Use of Jpeg images as input for editing can be problematic, particularly since resizing/resampling may move the boundaries of the 8X8 pixel blocks.
Repeated cycles of compression and de-compresison don't normally affect the quality, unless the quality setting is changed between cycles. Once information has been lost it cannot be recovered from a Jpeg, except by starting the process from the original bitmap. Trying to improve the appearance of a Jpeg image by re-compressing at a higher quality setting achieves very little (except an increase in file-size).
Repeated compression and decompression cycles in steps
Note the edges and artifacts that were never in the original scene Significant errors can occur when there is chroma (colour) detail at the pixel level, if the IJG 2:1 default chroma sub-sampling is used. This blurs 2X2 blocks of saturated pixels into pale colours (red becomes pink). Fortunately this is rare (a tiny fraction of photos are affected), but happens even at high quality IJG quality settings. (PhotoShop chroma is different).
The Independent Jpeg Group developed and licenced a free set of utilities for Jpeg compression and de-compression. You don't need these directly since they are included in almost every image editor and web browser. You may see credits such as: "Portions of this software are based in part on the work of the Independent JPEG Group".
Note that Paint Shop Pro uses the IJG utilites, but reverses the scale (in PSP 1 is best quality and 99 is worst).
A utility written by Allan Hessenflow (with modifications by Tom Lane) allows examination of actual Jpeg data. It has outputs that estimate the IJG
quality settings for any given Jpeg. When used together with an IJG compression utility this allows almost exact recreation of a
Jpeg. The only versions of this utility that I know of are source code and command line executables, so they are unlikely to be of direct use to the general public. It would be most useful for Jpeg
writing software to list the prior quality level so you could rewrite (if necessary) at the same level.
JpegDump 96X64_95.JPG
Approximate quality factor for qtable 0: 95 (scale 9.93, var 1.25)
Approximate quality factor for qtable 1: 95 (scale 10.18, var 0.26)
Baseline JPEG width 96, height 64 components 3
id 1 horizontal sampling 1, vertical sampling 2, quantization table 0
id 2 horizontal sampling 1, vertical sampling 1, quantization table 1
id 3 horizontal sampling 1, vertical sampling 1, quantization table 1
Photoshop Jpeg's do not use the IJG tables, so their equivalent quality can only be estimated.
48X32_12: Approximate quality 98 horizontal sampling 1 48X32_11: Approximate quality 94 horizontal sampling 1 48X32_09: Approximate quality 91 horizontal sampling 1 48X32_08: Approximate quality 88 horizontal sampling 1 48X32_07: Approximate quality 83 horizontal sampling 1 48X32_06: Approximate quality 86 horizontal sampling 2 48X32_05: Approximate quality 82 horizontal sampling 2 48X32_04: Approximate quality 77 horizontal sampling 2 48X32_03: Approximate quality 73 horizontal sampling 2 48X32_02: Approximate quality 62 horizontal sampling 2 48X32_01: Approximate quality 52 horizontal sampling 2
Thanks to Bill Tuthill for helpful input and contributions.
Bitmap - the uncompressed image, with file size = H x W x 3 (for color)
Cumulative - opening and saving the same Jpeg with different quality settings
Diff ^2 - the arithmetic difference between two bitmaps (squared for emphasis)
Dimensions - the height and width of an image
File-Size - either the dimensions of an image, or the number of bytes stored or transmitted
Full-colour - 24 bit (RGB) images with 16.7 million colours
Image - an array of pixels making up a digital picture
Lossless Compression - a reversible way of reducing the size of data while preserving it
Lossy Compression - an irreversible way of reducing the size of data by approximating it
Multiple - opening and closing the same Jpeg several times with the same setting
Pixel - picture element or smallest component of a digital image
Utility - a set of source code or complied program module
Zip - a commonly used lossless compression format
Back to top
(C) Copyright 2003 Gordon Richardson All Rights Reserved