Format:
JPEG File size = 20,213 bytes
Compression = 1
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.
Format:
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.
Format:
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.
Format:
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.
Format:
JPEG
File size = 3,708 bytes
Compression = 60
Format:
JPEG
File size = 2,501 bytes
Compression = 80
Format:
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.
Back: Image Optimization: GIF
Back: Images on the Web