284 Chapter 15 – JPEG FormatJPEG Compression
Web Design in a Nutshell, eMatter Editionthe human eye, particularly when the image is being displayed on a monitor at
screen resolution (and even less so for images saved at print resolutions).
Using “lossy” compression algorithms, JPEG is able to achieve 10:1 to 20:1 data-
compression ratios without visible loss in quality. Of course, the savings in file size
at any given compression is dependent on the content of the specific image and
results will vary. If maintaining high image quality is not a priority, these ratios can
go even higher.
The efficiency of JPEG compression is based on thespatial frequency, or concen-
tration of detail, of the image. Image areas with low frequency (smooth gradients,
like a blue sky) are compressed much further than areas with higher frequency
(lots of detail, like blades of grass). Even a single sharp color boundary, although
not giving “lots of detail,” represents a surge in spatial frequency and therefore
poses problems for JPEG compression.
The compression algorithm samples the image in 8×8-pixel squares then translates
the relative color and brightness information into mathematical formulas. These
sampling squares may become visible when images are compressed with the
highest compression ratios (lowest quality settings).
It is perhaps most meaningful to compare JPEG compression on photographic
images to that of GIF. A detail-rich photographic image that takes up 85K of disk
space as a GIF image would require only 35K as a JPEG. Again, the rate of
compression depends on the specific image, but in general, a JPEG will compress
a photographic image two to three times smaller than GIF. For flat-color graphics,
however, GIF is far more efficient than JPEG.JPEG Decompression
JPEGs need to be decompressed before they can be displayed; therefore, it takes a
browser longer to decode and assemble a JPEG than a GIF of the same file size.
Bear in mind that a small portion of the download time-savings gained by using a
JPEG instead of a GIF is lost to the added time it takes to display. (Not much
though, so don’t sweat it.)Variable Compression Levels
One advantage to JPEGs is that you can control the degree to which the image is
compressed. The higher the quality, the larger the file. The goal is to find the
smallest file size that still maintains acceptable image quality.
The quality of a JPEG image is denoted by its “Q” setting, usually on a scale from
1 to 100. In nearly all programs, the lower numbers represent lower image quality
but better compression rates (and smaller files). The higher numbers result in
better image quality and larger files.
For the most part, the Q setting is an arbitrary value with no specific mathematical
significance. It is just a way to specify the image quality level you’d like to main-
tain. When JPEG compression goes to work, it will compress as much as it can
while maintaining the targeted Q setting. The actual compression ratio depends on
the content of the individual image.