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)
- Standard colorspace is 256 levels of Red, Green, Blue (16.7 million RGB
colors)
- Colorspace separation (YCbCr) from RGB
- e.g. Y (luminance) = 0.299 * R + 0.587 * G + 0.114 *B
- Spatial separation into 8X8 pixels blocks
- Sub-sampling (if required) of chroma Cb and Cr (colors) in 16X16 pixel
blocks
- Discrete Cosine Function (DCF) of the spatial frequencies in each 8X8
block
- Quantisation of the spatial frequency matrix
- Lossless compression of the resulting matrix
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
There is a tradeoff between quality and file size, and smeared edges called
artifacts
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
There is a slightly different tradeoff between quality and file size.
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
This scale has a different set of tradeoffs between quality and file size
Chroma sub-sampling
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
Digital Cameras
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
Chroma sub-sampling errors
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).
Note how some red and orange pixels become blurred to form pink ones
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).
Jpegdump
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
Acknowledgements
Thanks to
Bill Tuthill
for helpful input and contributions.
Glossary:
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
Article created 2003
Add a comment
, April 29, 2003; 06:05 A.M. 
