home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam  

Book HomeWeb Design in a NutshellSearch this book

20.6. Minimizing JPEG File Size

As for all files intended for Web delivery, it is important to optimize JPEGs to make them as small as possible. Because JPEGs are always 24-bit by nature, reducing bit-depth is not an option. For the most part, all you have to play with is the quality setting, but it is possible to prepare an image prior to compression. There are a number of specialized tools available for making JPEGs as small as they can be while letting you make decisions about image quality.

20.6.1. Aggressive Compression Ratios

The most direct way of optimizing a JPEG is to adjust its Quality setting. If your image has a lot of continuous tone or gradient colors, you can be pretty aggressive with the compression level and not worry too much about loss of quality in the resulting JPEG. Even at some of the lowest quality settings, the image quality is still suitable for viewing on web pages. Of course, this depends on the individual image. A low quality setting (below 40) usually results in a blocky or blotchy effect in areas of flat color, which may be unacceptable to you.

Each tool provides sliders for controlling quality/compression ratios, although they use different numbering systems. Fireworks uses a percentage value from 1 to 100%. Paint Shop Pro uses a scale from 1 to 100, but it works as the inverse of the standard scale: lower numbers correspond to higher image quality and less compression.

Photoshop uses a scale of 0 to 12 when you select JPEG from the "Save As" dialog box. When you "Save for Web" in Photoshop/ImageReady, the quality rating is on a scale from 0 to 100. It should be noted that Photoshop is much less aggressive with its numbering; 0 on the Photoshop scale corresponds to about 30 on the standard scale.

The easiest way to get the balance of compression and image quality just right is to use a tool that offers a preview of the image (and its file size) with your settings. Photoshop 5.5+/ImageReady, Fireworks, and the third party JPEG plug-ins offer previews. If your image editor does not have a preview function, you may need to do some testing to find the compression level that works best (save the file, then preview it in a browser). Be sure to save a copy of the original image so you can do a fresh JPEG compression with each test.

20.6.2. "Optimized" JPEGs

Standard JPEGs use a precalculated, general purpose compression table (called the Huffman table) for compressing an image. Some tools offer the ability to create an "optimized" compression table that is customized for the particular image. This results in better color fidelity and slightly smaller file sizes. This format is supported on current browsers, but some (mostly older) browsers may have trouble displaying optimized JPEGs.

The optimization option is presented differently in each tool:

Photoshop 5.5 and higher (and ImageReady)

Check the "Optimized" checkbox in the Optimize palette.

Photoshop (4.0 and 5.0)

Select the "Baseline (Optimized)" option in the JPEG dialog box.

Pro-JPEG (BoxTop Software)

Check the "Optimize Huffman Codes" checkbox in the Pro-JPEG dialog box.

HVS JPEG (Digital Frontiers)

In addition to optimizing Huffman Codes, HVS JPEG utilizes a different (and unique) method of optimization that, according to Digital Frontiers, uses a proprietary algorithm to base compression rates on a spatial frequency analysis of the image.

These optimization controls are grouped under the "Q-Table" options in the dialog box. "General" uses the standard compression table. "Generate Optimized Q-Table" creates a customized table for the image.

In addition to these, HVS JPEG provides two predefined tables for optimizing certain image types. "Portraits" is best used on images with smooth tones. "Textured" is for images where it is important to preserve detail and texture.

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.