WORKING WITH QUALITY SETTINGS

If you choose to save your image as a JPEG, the second section in the Optimize palette enables you to select an image qualityspecifically, balancing the file size against the quality of the photo on the screen. In ImageReady, you can view an image in 4-Up view and then change the format and quality settings for each of the four images by activating one of the image windows and then using the Optimize palette to apply different settings.

JPEG Format

When the file format is set to JPEG in the Save for Web dialog or the main ImageReady window, the Settings area changes to the configuration shown in Figure 11.6 (Photoshop Save for Web) or 11.7 (ImageReady). To change the settings, use the pop-up menus in the Optimize palette, as shown in Figure 11.9.

Figure 11.9. The Preset pop-up is at the top right and the Format pop-up is just below it.

You can select a preconfigured set of JPEG compression options from the pop-up menu at the top of the Settings area, or you can create custom settings. The various pop-up menus are shown in Figure 11.10. With JPEG selected as the file format, you have the following options:

• Quality pop-up menu: The pop-up menu directly below the Format pop-up menu offers Low, Medium, High, and Maximum options. The pop-up menu and the Quality slider are linkeda change to one updates the other. When you select from the pop-up menu, the Quality slider is adjusted to these values: Low: 10, Medium: 30, High: 60, and Maximum: 80.

• Quality slider: You can select precise levels of compression by using the Quality slider or by entering a value into the Quality field. The Quality slider setting is tied to the Amount pop-up menu: Quality settings of 029 are Low, 3059 are Medium, 6079 are High, and 80100 are Maximum. The Amount setting is automatically updated as you change the Quality field or its slider.

• Blur: Applying a slight blur to an image can substantially reduce file size when it's compressed as a JPEG. The tradeoff is, of course, a degradation of image sharpness.

• Transparency matte: The color you choose in the Matte pop-up menu determines how the JPEG file handles transparency. Because the JPEG format doesn't support transparency, any pixel in the original that has reduced opacity must be filled with color. The matte color is used for any pixel that is 100% transparent, and it's blended with the existing color in any pixel with partial transparency.

• Progressive: When the Progressive check box is selected, the JPEG image appears in the web browser window in stages. Each stage clarifies the image until the final image is displayed. This display option can result in a slight delay in download, but the viewer gets feedback as the image loads, giving the impression of faster loading.

  ICC profiles are mathematical descriptions of how a scanner, printer, or monitor sees colors. For the most accurate reproduction, the International Color Consortium (ICC) developed specific profiles for different scanners, printers, and monitors, even down to the level of what kind of paper you're printing on. Because you have no control over the kind of monitor that will be used to view your web images, ICC profiles are less important for web work, but critical for printing.

  
  

• Preserve ICC Profile: You can include an ICC color profile with the image. Some web browsers can adjust the image's appearance according to an embedded profile, but at the expense of increased file sizeand therefore a slightly slower download speed. Browsers that do not support ICC profiles display the image as uncorrected.

• Optimized: Optimizing a JPEG file can result in a slightly smaller file size. However, some older web browsers cannot display optimized JPEGs.

• Add Metadata: In ImageReady, the Optimize palette offers the option of preserving any metadata in the image, including EXIF data, typically generated by a digital camera, can include information about how and when the image was created and its print resolution.

Figure 11.10. Use the mouse to drag the Quality Amount slider or enter an amount in the window above it.

GIF Format

GIF is ideal for work with limited color art, such as line drawings and posterized photos. It's not so great for continuous tone photographs or full-color painting, because the GIF format works by evaluating the color of each pixel in your image and assigning it to one of only 256 colors.

Caution

Each time you save the file as a JPEG, you lose some data to compression. This can create artifactsblocky areas or color bands in your picture. Never save a file as a JPEG a second time. If you make a conversion to JPEG and then decide to make changes, go back to the original Photoshop file. Don't make changes and resave the previously saved JPEG.

When you save a picture as a GIF, you have a completely different set of options from those available when you save the file as a JPEG. Figure 11.11 shows the GIF palette options.

Figure 11.11. The GIF settings are not the same as the JPEG or PNG-24 options, but they are similar to the PNG-8 option set.

Saving as a GIF gives you choices for the color table algorithm used, the size of the color table, dithering method or No Dither, and whether to interlace the GIF and save its metadata. Dithering is a means of making color appear to blend more evenly. Interlacing draws the image on the screen, skipping alternate lines, so that you see the picture sooner. The second, and sometimes third, passes fill in the gaps to complete the picture.

The Color Table palette shows the individual colors of an 8-bit image. You can edit, delete, and shift the color swatches. The Color Table palette is used only with GIF and PNG-8 images. It is empty when working with JPEG and PNG-24 files and shows only the uneditable black-and-white swatches for WBMP files.

Color Table Algorithms

When you reduce the number of colors in an 8-bit image, Photoshop makes decisions in accordance with your choice of color-reduction algorithm. You have several options:

• Perceptual: Different colors are viewed differently by the human eye. Some colors appear more prominent than others. Perceptual color reduction favors the colors that you see with greater sensitivity.

• Selective: Like the Perceptual algorithm, the Selective option favors the colors for which the human eye is more sensitive. However, it also considers the image itself. Areas of broad color are prioritized, and web colors are retained over similar non-web colors. The image's overall appearance is best maintained by using Selective, which is the default setting.

  Remember that the color table represents either the colors in the selected pane of the images in the Save for Web dialog or those of the selected slice in that pane. Each slice can be optimized separately.

  
  

• Adaptive: The Adaptive color-reduction procedure evaluates the image and gives preference to the range of color that appears most in the image. For example, color reduction of a picture of a banana preserves most of the yellows at the expense of other colors in the image.

• Restrictive (Web): The colors in the image are converted to web-safe colors, those 216 colors common to both the Windows and Macintosh system palettes.

• Custom: When an image's color table is created by using the Custom option, the colors are locked in. Further editing of the image won't change the color table. If, for example, you create a custom color table that does not include RGB 255/0/0 (hexadecimal value FF0000) and then attempt to paint with that shade of red, the nearest color already present in the color table is substituted.

• Black & White: The color table is reduced to only black and white and consists of only those two colors. The color table is locked after the conversion.

• Grayscale: The color table is reduced to grayscale and is then locked.

• Mac OS: Only the 256 colors of the Macintosh system palette are used.

• Windows: Only the 256 colors of the Windows system palette are used.

Number of Colors Used

You have the option of choosing a specific number of colors for the GIF or letting ImageReady or Photoshop do so for you, by selecting Auto, rather than a number between 2 and 256. Why does it matter? Again, the reason is to save a smaller file with no more information than is necessary to re-create the picture. The posterized cat in Figure 11.11 required only 20 colors. There's no reason to keep 236 unused colors in the table for this picture. Set the number of colors to use in the Color Table pane.

Dithering

Dithering is, in its most basic form, mixing two colors to simulate a third color. When viewed at 100% in a web browser, the dithering results in a smoother transition between colors than an undithered image. In Figure 11.12, I'm comparing a reduced and dithered GIF to the original.

Figure 11.12. If your image should have distinct edges, as is the case for many interface items, set the Dither Method pop-up menu to No Transparency Dither to prevent softening of the edges.

You can use dithering to further reduce the number of colors in the color table. When you optimize an image, reduce the number of colors to the point where the image is starting to degrade; then select Diffusion from the Dither Method pop-up menu and adjust the slider to regain image quality.

If your image should have distinct edges, as is the case for many interface items, set the Dither Method pop-up menu to No Transparency Dither to prevent softening of the edges.

The Image Size Palette

Docked with the Color Table palette in the Photoshop Save for Web dialog, the Image Size palette enables you to change the size of the image directly in the dialog box (see Figure 11.13).

Figure 11.13. The Image Size palette has options comparable to those found in the Image Size dialog (opened with the command Image, Image Size), with the exception of resolution (which isn't required for web graphics).

You can specify an exact pixel dimension or a percentage. Selecting the Constrain Proportions check box automatically maintains an image's width/height ratio (as does sizing by percent). One of the Bicubic options in the Quality pop-up menu should be used with photographic or other continuous-tone images. Use Bicubic Sharper when reducing image size, and use Bicubic Smoother when enlarging an image. The Nearest Neighbor method is often more appropriate for interface elements and other web graphics that have large areas of solid color or distinct edges.

Using the Image Size palette changes all panes of the Save for Web dialog, including the Original pane. Clicking the Apply button simply resizes the image and does not optimize it.

PNG-24 Format

Unlike the JPEG file format, PNG-24 supports transparency. However, you can also choose to use a matte color in place of transparency. As you can see in Figure 11.14, when the Transparency check box is selected in the Optimize palette, the Matte pop-up menu is grayed out. To select a matte color, uncheck the Transparency option.

Figure 11.14. Matte choices are None, Eyedropper Color, Foreground, Background, and Other, which opens the Color Picker. ImageReady offers a palette of web-safe colors rather than the Eyedropper color.

In addition to a choice between transparency and matte, PNG-24 offers an interlacing option, which is comparable to the JPEG progressive option and to GIF interlacing: The image begins to appear in the web browser more quickly.

WBMP Format

The WBMP file format is intended for the creation of tiny black-and-white image files that transfer speedily to wireless Internet devices, including web-surfing cellular phones. Because the images are 1-bit color, file size is minimized. As you can see in Figure 11.15, the color table contains only white and black. Essentially, everything that's less than 50% black becomes white. Everything that's greater than 50% dark turns black. To change the ratio of black and white, go back to the original picture and experiment with the contrast.

Figure 11.15. The Save for Web dialog and ImageReady offer the same WBMP options. You can create some very interesting etching effects by applying these settings to an appropriate photograph.