In this cahapter
Compression versus quality
Saving JPEG files
Everything dithers
Optimizing for compression
Making better grayscale images
Converting GIF to JPEG
Premium JPEGs: a case study
Pushing the envelope
Now that you've seen that creating GIFs for the Web can be as tedious as rebuilding a car engine--from selecting a color palette, choosing the optimal color depth, and deciding whether or not to dither--you're in for a pleasant surprise. Creating JPEGs for the Web is the automotive equivalent of changing your engine oil.
In this chapter, you'll learn the effects of compression settings on image quality and file size. You'll learn how to prepare an image for compression to get the best of both worlds. You'll also learn how best to covert from color to black and white, and how to use JPEG plug-ins to get compression rates Photoshop can't touch.
To get a JPEG just right, you need to strike a fine balance between quality and file size. With Photoshop, you can choose how much compression is applied. If you apply too little compression, you'll have a beautiful image that's way too big for the Web.
When you save an image as a JPEG in Photoshop 4.0, you're presented with a dialog box to specify several settings, as shown in Figure 6-1. The most important of these is the compression slider, used for setting the level of compression. The slider is organized by image quality, so 10 (the highest quality) offers the least compression and 0 (the worst quality) offers the most compression. There's also a pop-up menu with four quality settings--low, medium, high, and maximum--which correspond to numeric values on the slider.
|
|
| Figure 6-1. The JPEG compression dialog box in Photoshop 4.0. |
Earlier versions of Photoshop offered only 4 quality/compression settings, so having 11 settings in Photoshop 4.0 is a great improvement. Even so, the JPEG format offers more compression than Photoshop. The HVS JPEG and ProJPEG plug-ins, for instance, offer 100 possible compression settings. See Appendix B, Third-Party Software, for more about these and other Photoshop plug-ins.
Because JPEG images can contain up to 16.8 million colors and still compress to a small file size, JPEG is best used on photographic images and graphics that contain subtle gradations in tone or color. Because it's a "lossy" technology--it literally throws away high-frequency data--JPEG is not good for line drawings, text, or any graphic than contains intricate detail. Unlike with the GIF89a file format, you cannot make part of a JPEG image transparent.
Let's look at some examples. First let's take a colorized photograph of a parrot. Figure C-50 shows the original Photoshop file. It weighs in at 116K. Figure C-51 shows the image as a JPEG saved with the highest quality setting. Figure C-52 shows the same image with Photoshop's lowest quality setting. As you can see, there's not an awful lot of image degradation, even at the maximum compression setting.
 | 
|
| Figure C-50. The original RGB image. | Figure C-51. The same, saved as a JPEG at Photoshop's highest quality setting. |
 | 
|
| Figure C-52. Saved as a JPEG at Photoshop's lowest quality setting. | Figure C-53. Compressed at 90:1, the image falls apart into huge squares of color. |
Table 6-1 shows the effect on image size.
Compression Setting |
File Size (in kilobytes) |
Compression Ratio |
|---|---|---|
10 |
55.3 |
2:1 |
9 |
36.4 |
3:1 |
8 |
26.3 |
5:1 |
7 |
20.4 |
6:1 |
6 |
16.7 |
7:1 |
5 |
13.3 |
9:1 |
4 |
13.2 |
9:1 |
3 |
11.1 |
10:1 |
2 |
9.8 |
12:1 |
1 |
8.7 |
13:1 |
0 |
7.2 |
17:1 |
While you might suppose that each step reduced file size by a standard amount, you can see from this chart that this is not the case, at least for this image. (Remember that every image is different and the effects of JPEG compression will vary depending on the characteristics of your image.)
Notice, for instance, that the image compressed at 10 is half the original (2:1) and the image compressed at 9 is a third of the original's file size (3:1). But compressing the file at 8 yields a file that is one-fifth the size of the original. Thus, there's a huge bonus for compressing at 8 instead of 9. Further down the chart, you'll see that levels 5 and 4 both compress at 9:1, with a difference of just 200 bytes. Finally there's a dramatic increase in compression when going from 1 to 0.
Amazingly, even at 17:1 compression, the parrot image holds up pretty well. But as mentioned above, Photoshop's 0 setting isn't really maximum JPEG compression. Photoshop plug-in HVS JPEG offers much more extreme compression than this. Admittedly, you may not want to push compression much further than Photoshop's maximum compression setting, but it's handy to be able to compress heavily when you want to. And with 100 possible compression steps, various plug-ins offer a greater ability to fine-tune your image than Photoshop does.
So what does an over-compressed image look like? Figure C-53 is a fair example. This image has been compressed at HVS JPEG's 6 setting, which yields a 1.3K file, for a 90:1 compression rate.
Obviously this image is unacceptable. The image has broken down into blocks of color. There are hard lines around each block and very poor color transitions between adjacent blocks.
What's happening here? This image actually provides a good view into the behavior of the JPEG compression algorithm. When you save a file as a JPEG, the algorithm samples the image in 8 × 8 squares--one at a time. It's looking for similarities in tone and contrast. It then transforms each block into mathematical equations that represent the relevant color and brightness values. Saving data this way is much more efficient than saving the RGB values of each pixel, but the process discards RGB data that is deemed less important.
At lower compression rates, we usually don't notice that data is missing, because JPEG takes advantage of the psycho-physics of human perception and throws away the spatial frequencies (mostly the higher ones) that the human eye is least likely to notice. At higher compression rates, more and more data is thrown away, until the image breaks down.
To understand high and low spatial frequency, think of a bearded man's face: the thousands of fine strands of hair that make up the beard are considered high spatial frequency, while the smooth, relatively consistent areas of exposed skin are of low spatial frequency.
If you magnify a highly compressed JPEG image, you can actually see distinct blocks of pixels that are the artifacts of this sampling process, as shown in Figure C-54. The more compression that has been applied, the more evident these squares are.
Figure C-54. Magnification showing compression artifacts.
As we saw above, the parrot photograph, with its subtle gradations and generally soft characteristics, compressed quite well, even at 17:1. Generally, softer or more impressionistic images maintain quality at higher compression rates, while very detailed images do not. Also, images with lower contrast compress more, with less degradation, than images with higher contrast, as shown in Figures C-55 and C-56.
|
| Figure C-55. Saved at Photoshops 4.0's JEPG Low setting, this detailed, high-contrast photo falls apart, loses detail, and still takes up 24K. |
|
| Figure C-56. Also saved at Photoshops 4.0's JEPG Low setting, this impressionistic photograph falls apart from extreme compression, but the effect is not as noticeable because of the nature of the image. It takes up only 7K. |
Now that you have a better understanding of what happens in JPEG compression, let's look at the process of saving JPEG files in Photoshop.
When you're ready to save your file as a JPEG, simply select Save or Save As, change the file format to JPEG, give your file a name with the extension .jpg or .jpeg, and click OK. (Note that if you have multiple layers, you'll have to flatten the layer before the Save As dialog will let you save it as anything but a Photoshop file. The Save A Copy dialog, however, automatically flattens the image when you choose the JPEG format.)
Next, you'll see the JPEG Options dialog, shown earlier in Figure 6-1, which contains the compression slider, as well as a choice of format options, and an option to "Save paths."
There are three format options for JPEG files:
Baseline (Standard)
This is the default setting, since it is universally supported.
Baseline (Optimized)
This is a new option in Photoshop 4.0, and represents an evolution in the JPEG standard. When you choose this option, you get an image slightly smaller in file size (a couple hundred bytes) with better color fidelity. Current web browsers support this format. There are, however, other (mostly older) programs that have trouble opening a baseline-optimized JPEG. If you have any doubts about what program will be used to open your image, you should choose the Baseline (Standard) option.
Progressive
These JPEGs are useful for large files that take a long time to download. If you choose this option, your image will be displayed in a series of passes; the image improves in quality with each pass.
Baseline JPEGs, whether standard or optimized, are stored as a single top-to-bottom scan of the image. The progressive format contains the same data and is about the same file size, but the data is displayed in a series of scans. The first scan appears quickly because it is equivalent to a low-quality setting, as shown in Figure C-57. With each subsequent scan, more data is provided. Progressive JPEG files are slightly smaller than baseline-standard files.
|
| Figure C-57. Progressive JEPGs load in passes, with each pass adding resolution and detail. |
When you choose Progressive, you can choose the number of scans it takes for the entire image to appear (3, 4, or 5 scans). The actual speed of each scan depends on the transmission speed of the user's system and the computer that receives and decompresses the data. With a very fast computer hooked up to an ISDN line, the image appears nearly instantly, no matter how many scans you choose. Increasing the number of scans increases the file size very slightly--the difference is no more than 200 bytes or so.
While the current browsers support progressive JPEGs, some older browsers don't, so you may not want to want to use the progressive format on your primary pages.
Apples and oranges While the quality settings of different versions of Photoshop produce roughly the same results, they cannot be compared with the quality settings of Photoshop JPEG plugins or conversion programs. For example, a Photoshop Lpw is not the same a as Debabelizer Low. For the most part, however ,default settings(Medium for Photoshop, Baseline for Debabelizer) usually produce similar results. |
The first time you save a JPEG, you may be surprised to see that the compressed JPEG file looks just as good as your original Photoshop file. Actually, it doesn't. Unfortunately, Photoshop doesn't display the effects of JPEG compression upon saving. You'll need to close and then reopen the image file to see what your new file looks like. This is another area where the JPEG plug-ins are more efficient and powerful than Photoshop itself.
Since your goal is to create the smallest possible file while maintaining acceptable image quality, I recommend you start with heavy compression and then back off. When you preview the compressed image, zoom in and look for loss of detail or for compression artifacts. If the image looks OK, you're home free. If not, note the file size and try compressing the original at a higher quality setting. Keep backing off until you reach a good compromise between file size and quality.
Sometimes, depending on the image, you can produce very good quality at Photoshop's lowest setting. Even the 0 setting can be used on some images. Most often you'll settle on Photoshop's medium settings (3-5), which is a good compromise between quality and file size.
Remember that every time you open, manipulate, and save an image in the JPEG format, you lose data. Not only do you lose data, you increase the risk of creating a larger file size. Those distinct blocks of pixels that you saw earlier, the ones that resulted from applying high JPEG compression to an image, actually add high spatial frequency to the image. The more high spatial frequency information in an image, the less efficient the JPEG compression. It's always best to save your original in the Photoshop format (or other 24-bit format) and save subsequent JPEG files from the original.
Another point to remember is that you always lose some data when you compress with JPEG. If you want your image viewed at its best--if you are a visual artist, for example, presenting your portfolio for art directors to view and evaluate--you'll probably settle for only the highest quality settings (9-10). Keep in mind that even when you choose Maximum, there is some loss of image quality that can never be replaced. JPEG compression is never lossless; some image data is always lost.
As discussed earlier, JPEG is not a very good format for text and lines. If you must use JPEG on images with sharp-colored edges, such as text, you'll get better results if you choose the Maximum setting. This is because at this setting Photoshop automatically turns off Chroma downsampling, a process that works well with photographic images but causes fuzziness or jaggedness around the edges of hard lines. Chroma downsampling samples color areas at a rate of 2 × 2 pixels rather than 1 × 1 pixel. This relatively coarse method of throwing away color data results in smaller file sizes but creates 2pixel jaggies around sharp color boundaries.
If you have a lot of images, there's no doubt about it--cycling through all the JPEG settings for every image is a real pain. Why not set up an Action to save your file at different compression settings, so you can easily compare and decide which setting you want? That's what Sean Parker of Option X did. His JPEG comparison Action is shown in Figure 6-2. His Action, which you can easily duplicate, makes it quick and easy to compare effects of different compression settings in Photoshop.
|
| Figure 6-2. Action for saving several versionsof a file at different JPEG settings. |
To create such an Action, simply record the process of saving a file in the JPEG format at different compression settings. Save this Action as your JPEG Action and apply it when needed.
If you're having trouble saving your file as a JPEG, make sure you've taken care of the following details:
|
Checking the code Although .jpg is the universally accepted file suffix for JPEG files, you'll never see the acronyms JPG or JPEG if you view the actual code of a JPEG file. That's because JPEG refers only to a family of compression algorithms, not to a specific file format. Instead, what you'll likely see is the acronym JFIF, which stands for JPEG File Interchange Format. |
When you work with JPEG images, set aside what you've learned about browser-safe colors. There's no such thing as a browser-safe JPEG. JPEGs don't contain color lookup tables like GIFs. They save color data as an approximation of the original color. Figure C-58 shows a background created with browser-safe colors, then saved as a JPEG and viewed on an 8-bit display system. The background dithers, as will any JPEG image viewed on an 8-bit display system.
|
| Figure C-58. JPEGs dither on 8-bit system. End of story. |
Also forget about matching the background of your image to the background of your web page, the way you can do with GIF files. On some 24-bit systems, you might get a match. But most of the time you will be disappointed at the results. Remember, JPEG and GIF colors rarely match, as shown in Figure 6-3. Even what you think is pure white will dither, as shown in Figure 6-4.
|
| Figure 6-3. A JPEG placed against a GIF background of the "same" color rarely matches on an 8-bit display. |
|
| Figure 6-4. Even white dithers in the JPEG format. |
Always keep in mind that while dithering is very distracting when it appears on solid, flat colors, it can be a godsend on images with smooth color transitions. If how your images look on lower-end systems is important, you should preview the effect of dithering by adjusting your system to 8-bit display or viewing your work on someone else's system before compression.
As we have shown, JPEG works best on images that contain smooth transitions between colors and details. You can use this knowledge to actually optimize an image so it compresses better with less loss of quality.
Let's start by selectively applying a Gaussian blur before applying JPEG compression. This method can be applied to any image that has large expanses where detail is not critical. It is a method popular with web designers who are willing to spend a little extra time to get both small file size and high quality.
Figure C-59 shows an image with a large expanse of background area (sky and clouds) and details in the foreground (foliage and cityscape). The original Photoshop file is 300 × 440 pixels and is 398K. Saved with Photoshop's Low setting, with no optimizing, the file is 50.3K.
|
| Figure C-59. With no optimizing, this JPEG image takes up a total of 50.3K. |
By blurring the selected background (with the Gaussian Blur filter set to .6) before JPEG compression, the file size is reduced to 47K, a 6% file size savings, with no loss of important details (see Figure C-60).
|
| Figure C-60. With selective blurring to the background sky, the JPEG image takes up 47K. |
To push the benefits of blurring a little further, you can apply a Gaussian blur of .2 to the entire landscape--in addition to the .6 Gaussian blur applied to the sky. This results in a total savings of 14%. The resulting image is shown in Figure C-61.
|
| Figure C-61. With selective blurring to the background sky and global blurring, the JPEG image takes up 43K. |
Making images look good on the Web is a matter not only of aesthetics but also of commerce, for photographer, writer, and fine-print master, Ctein. Not represented by any gallery, he uses the Web to sell his work.
Ctein (that's his whole name) tweaks his electronic files to maximize quality, and the results are impressive. Figure C-62 shows a sampling of Ctein's web work. Working with a precisely calibrated monitor and Photoshop 2.5, he carefully adjusts the color and tonal balance of his scanned images, comparing the results with the original print. Then he applies a Gaussian blur to the entire image. He uses a blur radius of only .2 pixels, which does not produce any visible degradation of the image but results in JPEG files that are about 15% smaller than files of comparable quality. Even slight blurring, it turns out, will suppress some of the higher spatial frequencies enough to significantly reduce the JPEG file.
|
| Figure C-62. Although this 1020 × 765-pixel file weighs in at 497K, the quality is superlative, thanks to Gaussian blurring and careful image processing. It was converted to JPEG with Photoshop 2.5 setting of 7. |
When Ctein uses Photoshop to convert his files to the JPEG file format, he usually uses a JPEG setting of 5, which results in a compression ratio of approximately 10:1. (This ratio will vary depending on the content of the image.) For some images he applies a setting of 6 or even 7. He is always looking for a compression setting that produces few or no artifacts larger than a single pixel in size.
All his images are placed against a neutral gray background that includes a grayscale swatch, so the viewer can calibrate his or her own monitor to the correct gamma, if desired, for the best viewing of Ctein's work. Ctein also includes a Macbeth Color chart on his site as a general calibration tool. (The Macbeth color chart is a standardized "test pattern" of colors such as pure red, green, and blue and tones such as white, black, and various shades of neutral gray. It is commonly used by photographers and graphic artists to maintain consistent color and tone throughout a variety of viewing situations.)
Ctein has sold many of his prints directly to web viewers. As testimony to his careful work, only one person has returned a print saying it's not what they expected. You can find his site at www.plaidworks.com/ctein.
Photographer (and HyperCard inventor) Bill Atkinson suggests another way to optimize an image before applying JPEG compression. Like Ctein's method described previously, Bill's technique also involves using Gaussian Blur to suppress higher spatial frequencies. However, if you convert your image from RGB to Lab color and then apply a Gaussian Blur to the a and b channels, you can actually apply much more blur and suppress more of the higher frequencies without noticeable effects. The a and b channels are pure color channels, so because of the nature of human vision, blurring isn't as noticeable.
The actual Gaussian blur setting you use will depend on the size of your image. I suggest you start with a setting of .5 pixels, then keep increasing the amount of blur until you overdo it. Then back off to a lower setting. After you convert back to RGB, apply JPEG compression. The larger your image, the more savings you'll get.
I tried Bill's method on the parrot image, ending up with a Gaussian blur setting of 5.0 with no noticeable degradation in image quality. At that setting, I shaved off 3K using Photoshop's High JPEG setting for a savings of about 10%, and I shaved off 2K from the Low JPEG setting for a 15% file size saving.
Black and white images are often used on the Web, not only because they make smaller files, but also they stand out and grab attention in a gaudy, color-saturated world.
JPEG can compress grayscale images by a factor of about 5:1. This ratio is lower than the ratio for color images because JPEG compresses color data more effectively than brightness or grayscale data. However, because grayscale images are only 8 bits instead of 24 bits, you still end up with a significantly smaller file than if you had used a color image.
In Photoshop, when most users want to convert a color RGB image into grayscale, they simply choose Mode: Grayscale and leave the work up to Photoshop. But simply changing modes doesn't produce the best results.
You'll get better looking black and white images if you go through Photoshop's Lab color space because you can isolate the important brightness characteristics of an image rather than its superfluous (in the case of black-and-white images) RGB values.
To convert your color images into grayscale:
Does this really make a difference? Consider a portrait I recently took of Netscape cofounder Marc Andreessen. Figure C-63 shows the original color photo. Figure 6-5 shows the results of simply converting from RGB to grayscale mode. Note the blocking in the shadows and the "chunky" look to the skin. Figure 6-6 shows the results of the Lab process. The midtones are smoother and the shadows are less murky.
| 
| 
|
| Figure C-63. Here is Marc Andreessen in color. | Figure 6-5. Simply changing modes yields an image with blocked shadows. | Figure 6-6. Using Lab mode creates a much better grayscale image-notice how smooth his skin looks in comparison to Figure 6-5. |
What do you do if someone hands you an image that has been saved in the GIF format and you decide to incorporate it into another image that is best saved as a JPEG?
Generally it is not a good idea to use JPEG compression on images that have been color-indexed--especially photographic images. In the process of reducing and indexing colors, the image often becomes choppy or coarse. This is because there are fewer colors available to create smooth transitions. Dithering, while fooling the eye into believing that there are more colors, actually introduces even more noise at a sub-pixel level.
JPEG doesn't handle this high-spatial frequency noise well. The result is often a larger file size than you started with, as well as a lousy-looking image. Figure 6-7, for example, shows a menubar saved as a GIF and as a JPEG. The GIF (on top) was indexed using the browser palette and is 8.5K. The JPEG (on the bottom) is nearly twice the size, 15.1K. Although we used Photoshop's High JPEG setting, the image quality still isn't as good as the original GIF.
|
| Figure 6-7. Images starting out as a GIF (top) and then converted to a JPEG (bottom) give less than desirable results. |
If you must turn an indexed file such as a GIF into a JPEG , first convert your file to RGB (or Lab color mode--see the previous section "Blurring in Lab mode"), then apply a Gaussian Blur to soften the image as much as possible without noticeable visual degradation. When JPEG compression is applied, there will be less noise to interfere with the compression process.
Bill Atkinson is a legend in the computer industry. Not only was he on the Apple computer team that created the Macintosh, he is the programmer who wrote the original QuickDraw program as well as MacPaint and HyperCard. Now he is retired and devotes his time to his passion, photography.
Along with his wife, graphic designer Sioux Atkinson, and fellow Apple legend Andy Herzfeld, Bill set up a web site to display and sell original prints of his photographic work, www.natureimages.com , shown in Figure C-64.
|
| Figure C-64. Here's a sampling of Bill Atkinson's 117 × 85-pixel thumbnails. |
Bill achieves a beautiful effect on his web site through careful image processing and the use of a Photoshop plug-in called HVS JPEG, a product available from Digital Frontiers. Bill tried Photoshop's JPEG file converter, but found he could get better quality and compression using Digital Frontiers' product.
Here, step-by-step, from resizing to processing to finally applying HVS JPEG, is how Bill arrives at the quality that is so evident in his work:
He resizes one increment at a time, not all at once:
|
| Figure C-65. Bill achieves a higher quality version by resizing down, as shown in the 320 × 480-pixel image. |
By resizing in this manner, he is able to preserve more of the detail present in the original high-resolution scan. The process sounds tedious, but Bill has created a Photoshop 4.0 Action that does the entire job for him automatically, even applying the Unsharp Mask.
After the second incremental resizing step, he applies an Unsharp Mask once more (Amount: 100%, Radius: .6, and Threshold: 0). Again, he uses a Photoshop Action to carry out all these steps. He then increases the canvas size to 116 × 84 pixels (Image: Canvas Size), adds a white border, and then, for the final step, he adds a 1-pixel gray edge to the bottom and right edges to simulate a drop-shadow.
|
| Figure C-66. With the HVS JPEG plug-in, you get many options to choose from, including real-time viewing of the compression effect. |
In Bill's (and wife Sioux's) web design, the photographs are placed on a gray background, with colorless navigational devices--leaving the color within the photograph to dominate the page. This way the energy is focused on the image, not elsewhere.
By the way, when you try this method, be sure to work on a copy of your original. Going from one color mode to another throws away data and may result in a degradation of quality.
We started this chapter by saying how easy it is to create a JPEG. However, like so many things in life, if you want to push the envelope and get the most out of the format, you need to work at it. This means familiarizing yourself with the way JPEG works on different types of images, and taking the time to optimize your images before applying JPEG compression. If you do this, not only will the quality of your image improve, but you'll also save anywhere from 5 to 20% of your file size.