JPEG Format
Because of the large number of colors in a photographic image,
photographs do not usually work well as GIF images. For this reason, in 1991
the Joint Photographic Experts Group introduced a different compression algorithm
known by their initials as JPEG. You also see JPG and JPE as possible file extensions
for Windows-based computers, but they are all the same thing. JPEG compression
is described as “lossy”, but this is not as bad as it may at first
appear. As we saw with GIF images, reducing the color depth of an image is likely
to be lossy as well, and for that matter digitizing an image is likely to be
lossy. The number of pixels per inch is almost surely smaller than the true
grain of the photographic image, though you would need magnification to see
this clearly. So the loss of information in a JPEG image should be viewed calmly
as a tradeoff between image quality and file size.
The JPEG compression algorithm makes use of the way the human
eye detects information, and throws away information that the eye cannot perceive.
This method is very similar to what Television broadcasters do when they prepare
a program for broadcast. In both cases, the need to reduce the total amount
of information leads to throwing away unneeded information. A technical description
of the process gets really geeky, involving things like discrete cosine transform
and quantization, but the effects are readily perceived with a few examples.
Note that different graphics programs may define compression in different terms.
I used Paint Shop Pro 6.0 for these images, and PSP uses a compression setting
that begins at 1 and goes to 99, roughly corresponding to percentages of compression.
Other programs may define it in reverse, as percentage of quality, beginning
at 100 and going down to 1. Just pay attention to what your software does, and
you will be fine.
JPEG
File size = 20,213 bytes
Compression = 1
Here the compression was set to 1, which essentially means no
compression at all, maximum quality. So I then took the same image, and compressed
it to 20.
JPEG
File size = 6,675 bytes
Compression = 20
Here the file is one-third the size, but you need to look very
closely to see the difference. If I were creating a Web graphic, version #2
is the clear winner.
Rule 3: JPEG images can always be compressed
without a noticeable loss of quality.
But let’s see what happens at some other settings.
JPEG
File size = 4,655 bytes
Compression = 40
At the setting of 40 it is easier to see the loss of quality.
I notice it particularly in the paper clips, which seem less “solid”
at this quality. This is still acceptable, though, for many applications, in
my opinion. The question is whether you need to cut 2K off of the image so strongly
that you can accept some minor loss. If I am already over 25K for the page,
I probably take the image loss to speed the download.
JPEG
File size = 3,708 bytes
Compression = 60
JPEG
File size = 2,501 bytes
Compression = 80
JPEG
File size = 619 bytes
Compression = 99
Looking at the last three, you could conceivably go as high as
60 on the compression scale. That image is not, in my opinion, that much different
from the previous compression =40 image. But somewhere around the middle of
the scale (40-60) is the practical limit for most images with “photographic”
quality. But the biggest gains in file size came from very modest, and to my
eye hard to detect, losses in quality. You should never save a JPEG image for
Web use without experimenting with the compression setting.
Rule 4: As with GIF images, optimizing JPEG
images means finding the optimal tradeoff between small file size and image
quality.
Further Reading:
- Professional Web Site Optimization, by Scott Ware, Michael Tracy,
Louis Slothouber, and Robert Barker. Wrox Press - Web Designer’s Guide to Graphics: PNG, GIF & JPEG, by Timothy
Webster. Hayden Books
