JPEG Optimization

JPEG is the compression algorithm used in JFIF (JPEG File Interchange Format) files, commonly known as JPEG. JPEG was designed by the Joint Photographic Experts Group to compress realistic true-color or grayscale images, such as photographs or fine artwork. It does not work well on scanned text, comic strip art, or line art because these have hard edges and areas of flat color , which are better suited for GIFs or PNGs.

JPEG supports 256 color grades (8 bit) per color channel. This equals 24 bits per pixel in color mode (16 million colors) and 8 bits per pixel in grayscale. Grayscale images are thus smaller than their full-color counterparts.

The JPEG format we use on the Internet is lossy. Lossy means that the compression algorithm discards data when compressing your image. After decompression , lossy formats are slightly different from the original. This is the price you pay for high compression ratios. JPEGs can compress the average color image about 20 times without visual quality loss. The exact savings depends on the complexity of the image. As the compression ratio approaches 50, it becomes more and more "defected." ^[3] Images compressed 100 times usually look pretty ugly, but the scene usually will still be recognizable. Compare this with lossless algorithms, which usually compress at 2:1 for these types of images.

^[3] Tom Lane, "The JPEG FAQ" [online], (1999), available from the Internet at http://www.faqs.org/faqs/jpeg-faq/.

JPEGs exploit several limitations of the human eye. First, our eyes are much more sensitive to small differences of brightness than to small differences in color, especially at higher frequencies. Second, larger image details are more important to us than smaller ones. The eye also ignores a little noise, which means that it can be added or removed.

The JPEG Compression Algorithm

JPEGs compress images based on their spatial frequency, or level of detail in the image. Areas with low levels of detail (smooth areas of color like clear sky or calm water) compress better than areas with high levels of detail (like sharp-edged leaves or grass). Hard-edged lines and abrupt color changes pose a challenge for JPEGs.

First, to take advantage of our lower sensitivity to higher chrominance frequencies versus higher luminance frequencies, the JPEG algorithm transforms the image from an RGB color space into the luminance/chrominance (Y-Cb-Cr) color space (see Figure 12.3). In other words, JPEG separates brightness or grayscale (Y) from the two hue or color components (Cb and Cr).

Figure 12.3. The JPEG compression algorithm.

Then the algorithm leaves luminance alone and "downsamples" the chroma components 2:1 horizontally (either by discarding every second horizontal sample or averaging the two hue values into one) and 2:1 or 1:1 vertically, saving about one-half to one-third off the image data. This is often abbreviated as 4:2:2 or 4:1:1 sampling.

Next, the pixel values for each component are grouped into 8x8 blocks. These blocks then are transformed from the spatial domain to the frequency domain with a Discrete Cosine Transform (DCT), performed separately for brightness and both color parts . This step converts the image into a two-dimensional array of frequency coefficients. Coefficients in the top-left corner of each block represent the average of the block. Coefficients in the other corners represent higher frequencies (small details and noise). Higher frequencies can now be discarded without affecting lower ones.

Quantization occurs when the DCT coefficients are downsampled, and most coefficients become zero. This is the main source of information loss for JPEGs, and what makes compression more efficient. Each block of 64 frequency components is divided by a separate quantization coefficient and rounded to integer values. Higher frequencies and chroma are quantized by larger coefficients than lower frequencies and luminance. This is what you control with JPEG quality slidershow much these blocks of frequencies are downsampled. Quantization tables can range from simple linear scaling from the JPEG standard to highly tuned , closely guarded secrets.

The last step is a zigzag scanning of each block starting from the top-left corner and lossless compression of non-zero coefficients with arithmetic or Huffman coding.

For More Information

For more details on the JPEG algorithm, see http://www.faqs.org/faqs/compression-faq/part2/section-6.html.

Baseline and Progressive JPEG

In standard baseline mode, JPEGs store images as a single top-to-bottom scan. Browsers cannot show the image unless it has completely loaded. Progressive JPEG divides the image into a series of three to five scans. The first scan quickly displays a low-quality version of the image. Subsequent scans build up the image quality until the final image appears at full resolution.

Progressive JPEGs can become 1 to 4 percent larger than baseline files. They actually can become slightly smaller with Huffman encoding, however, because they allow different Huffman tables for each scan, which can make up for the overhead of the additional scans. For larger JPEGs, consider using progressive mode.

Note that current graphics programs are tuned for quality settings around 50 to 75 for progressive JPEGs. ^[4] At quality settings higher than 75 (or the equivalent), later scans add no appreciable quality to the image. Also keep in mind that JPEGs trade time for space. Progressive JPEGs add an additional load to the CPUs of your users. Each scan is like decoding a separate JPEG, so the overhead is a multiple of the number of scans. Over a network like the Internet, however, CPU speed is cheap compared to bandwidth.

^[4] Lane, "The JPEG FAQ" [online].

Arithmetic Coding versus Huffman Coding

IBM, AT&T, and Mitsubishi hold a patent on the variant of arithmetic coding implemented in JPEG. Don't use arithmetic coding unless you have a license from these companies. Arithmetic coding provides 5 to 10 percent better compression than Huffman coding, but it is not worth the legal problems. Pegasus Imaging has a patented version of arithmetic coding, but it requires a plug-in.

Preparing JPEGs for Better Compression

Anything that smoothes, smears, lowers contrast, and blurs edges will increase compression for JPEGs. Try to minimize background details by using large apertures, telephoto lenses, panning, or blurring in your favorite graphics program.

Digital Cameras and JPEGs

Most digital cameras allow you to set the pixel resolution of your images. Some allow you to set the JPEG compression level, or use the EXIF format (JPEG with additional information like a thumbnail) or a lossless archive format like TIFF. Many authors simply upload JPEGs directly to the web from their digital cameras, however. The default settings are designed for creating prints, not for web pages. Be sure to optimize your digital images with the web in mind. The image resolution should be set to 72 dpi, with the lowest acceptable JPEG quality.

Scanners and PhotoCDs

Digital cameras provide higher-quality images than most scanners, even from good camera prints. Every generation you remove an image from the original loses definition and color saturation. High-quality scans from slides or negatives are an exception, howeverespecially drum scans. Drum scans give you the highest possible resolution and tonal range for larger prints. I had some 6x7cm slides drum scanned for some 30x40-inch prints. The resulting files approached 200MB. This is how some glossy magazines like National Geographic Adventure input their photographs.

PhotoCDs provide multi-resolution scans up to 2048x3072 pixels (18MB) for prints up to 20x30 inches in size . Pro PhotoCDs provide deeper shadow details plus a 4096x6144 (72MB) pixel scan. Photographers using 35mm cameras often choose PhotoCDs, while photographers using 120mm and 4x5 in cameras often scan their slides to Pro PhotoCDs. Unless you are running an art gallery, use the lower-resolution scans from PhotoCDs for the web. Choose a resolution about twice as large than you need, and reduce, correct, and sharpen it. See the "Capturing and Preparing Images" section in this chapter for more details on image correction.

Kodak's Picture CD provides a convenient way to process film and get a CD with your digitized images. Their Picture CD Select allows Kodak, AOL's "You've Got Pictures," or other photo site members to save selectively up to 200 images per CD. Services like Snapfish.com and Ofoto.com will develop your film, and create up to 1024x1536 pixel scans. This resolution is optimized to print on 8.5" x 11" paper. The lower-resolution scans (600x900, 280x420) usually are adequate for web use.

For More Information

For more information on scanning slides to PhotoCD and correcting images in Photoshop, see Philip Greenspun's "Adding Images to Your Site" at http://philip.greenspun.com/panda/images.html. See also Cornell's evaluation of PhotoCDs at http://www.library.cornell.edu/preservation/kodak/kodak-htm.htm.

Improving Compression and Apparent Resolution

Before you save the image, if you have a foreground feature like a human face or product and a less important background, blur the background. The fewer hard edges JPEGs have to deal with, the more efficient the compression. Some JPEG optimizers offer a "smoothing" or softening feature that also can improve compression by averaging nearby pixels.

For maximum quality, crop any borders around photographs. Borders can create visible artifacts in JPEGs and reduce display quality on older video cards.

Set the resolution to 72 dpi for the web. Then reduce its dimensions while maintaining the resolution and sharpen with an unsharp mask. Sharpening should be the last step in the correction process. Now you are ready to compress.

Saving JPEGs

Now that you've prepared your image for maximum compressibility, and cropped it down, it is time to compress. "Save for Web" in Photoshop brings up the dialog box shown in Figure 12.4.

Figure 12.4. Saving to a JPEG in Photoshop.

Do not use higher-quality values for the web. Usually raising quality above 80 percent of the quality range doesn't make any difference to our eyes, but it increases file size dramatically. There is no standard on the JPEG quality scale. Even though most tools today have a scale from 0 to 100 percent, when you set the same percent quality in different tools, you can expect very different file sizes.

If there are sharp color edges, it sometimes makes sense to turn downsampling off if you need the best quality (see Figure 12.5). Note that if you applied subsampling to the image in the figure, the sharp edges between colors in the lower part of the balloon would blur. The image is 28 percent larger, but it appears much sharper (6,824 versus 4,901 bytes).

Figure 12.5. Better image sampling defines sharp edges in ProJPEG.

If you have sharp edges between colors and they are getting blurred, try turning off downsampling and see whether it helps. Be prepared for your file size to increase by about 50 percent, however. In most cases, you can turn subsampling off and boost quality and still have a smaller image. Your web page visitors would rather have smaller file sizes with slightly blurred edges than crystal-clear images that take longer to download.

If you have the original image at a high resolution and a scaled copy on your web site and you need to rescale the image, make it from the original. Remember that every time you recompress a JPEG, it accumulates quality loss. You can minimize this information loss by recompressing to the same quality first used.

In some situations, however, you can manipulate JPEGs losslessly. Lossless transforms (like 90-degree rotations and flips ) require the dimensions of the JPEG to be a multiple of the block size (16x16, 16x8, or 8x8 pixels for color JPEGs). Lossless crops are also possible by cropping to block boundaries with specialized software. JPEG Wizard and others allow lossless JPEG transformations without losing image quality because they operate directly on the JPEG data without having to uncompress to do any editing (see Figure 12.6).

Figure 12.6. JPEG Wizard, a power tool for Windows.

Photoshop and Fireworks do a good job of compressing JPEGs; however, third-party tools often can give you higher-quality results and more options. There are a number of tools available, but JPEG Cruncher (http://www.spinwave.com), JPEG Wizard (http://www.jpg.com), ProJPEG (http://www.boxtopsoft.com), and Web Image Guru (http://www.vimas.com) in particular are good choices for JPEG compression. The first two offer online versions. All offer standalone applications or Photoshop plug-ins for convenience.

JPEG Wizard, ProJPEG, and Web Image Guru also offer regional compression to apply different degrees of compression to different areas. Web Image Guru allows finer control than the others with Color Tuning for controlling chrominance compression, Sharpness for artifacts and edges, and Subsampling controls.

Use Weighted Optimization

You can use the "regional" or "weighted" compression that Photoshop, Fireworks, and other products have by using an alpha channel mask to apply different compression settings to different areas of your image. This actually is a fudge that essentially discards the highest-frequency detail in the regions of the image that are less important. JPEGs produced using this technique are still compliant. JPEG2000 includes regional compression as part of the specification.

Text and JPEGs

Including text within JPEGs can be tricky. At higher-quality settings, this usually isn't a problem. But once you use more realistic settings for the web, artifacts can begin to show around sharp-edged text. One solution is to use a JPEG as a background image (say in a table cell ) and a transparent aliased GIF in the foreground (see Figure 12.7).

Figure 12.7. GIF overlaid background JPEG6,985(JPEG)+383(GIF)=7,368 bytes.

By removing the text from this peaceful scene, I was able to bump up the JPEG quality, while still making the combined image smaller than the original (7,368 bytes versus 7,387 bytes for the original with embedded text). Of course, the tradeoff is another HTTP request for the GIF image. Here's the code to accomplish this overlay:

 <td background="background.jpg" width="300" height="240"><img src="label.  gif" width="300" height="26"></td> 

Note that you can crop the GIF vertically and horizontally, but I used a full-width transparent GIF cropped vertically to ensure the cell width behaved. A faster way is to overlay styled text instead of a transparent GIF to avoid an HTTP request (see Figure 12.8). This looks nearly identical to Figure 12.7 and saves one HTTP request:

 <td background="background25.jpg" width="300" height="240" class="text">The  St. Lawrence</td> 

Figure 12.8. Text overlaid JPEG7,233(JPEG)+16(Text)=7,249 bytes.

Even better, use CSS to set the background image:

 <style type="text/css">      div#b {background-image: url(/books/1/491/1/html/2/background25.jpg);     width:300;height:240;     font: 1.2em...} </style></head><body> <div id="b">The St. Lawrence</div> 

Each step in this process allows you to increase JPEG quality without increasing total file size.

NOTE: You can see all of these examples in full-color on the companion web site at WebSiteOptimization.com.

JPEG Optimization Summary

Optimizing JPEGs is a multi-step process. First, make sure that you capture the sharpest image possible at a higher resolution than you need. Blur the background and remove any borders for the highest possible quality. Correct and enhance the image, reduce by 50 percent, and sharpen to increase the apparent resolution. Set the resolution to 72 dpi for the web and compress with the right tools. Experiment with different settings, and use weighted optimization. In summary, to create the smallest possible JPEGs, do the following:

• Capture your photographs with high-quality digital or film-based cameras.

• Use a solid platform (tripod, image stabilization, or gyroscopic stabilizer) to minimize image smear and maximize sharpness.

• Blur backgrounds with large apertures, telephoto lenses, panning, or your favorite graphics program to minimize noise.

• Capture and scan at a higher resolution than you need, correct and enhance, halve its dimensions, and then unsharp mask to increase apparent resolution.

• To improve compression, smooth, smear, lower contrast, and blur edges. Remove any borders.

• Maximize crop and minimize dimensions.

• Avoid hard edges and lines. These are better suited to palette-based formats like GIF or PNG. Alternatively, you can overlay text or transparent images over background JPEGs.

• Maximize compression with the lowest acceptable quality.

• Use weighted optimization to apply compression selectively.

• Use the right tool and experimenttry subsampling, sharpening, smoothing, and optimized Huffman encoding.

• Save grayscale images to grayscale JPEGs.

• Minimize unnecessary information (comments and thumbnails).