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.
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:
Figure 11.10. Use the mouse to drag the Quality Amount slider or enter an amount in the window above it.
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.
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:
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 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.
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.
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.