Making Side-by-Side Comparisons

When you can't decide between two (or worse , three) things, a side-by-side comparison can be a real help. Which shoes go with the dress? Try them on and look in the mirror, with the dress in question. Not sure whether gray or beige is the best interior for your new black car? Ask to see pictures of both and then choose. Understanding that seeing is believing, Photoshop lets you compare palettes and dither settings for a GIF image as well as contrast different qualities of JPEG compression. It'll even let you take a gander at your image in PNG, if your heart so desires (as if two choices weren't enough). You can even measure an image com- pressed with JPEG against that same image rendered as a low- color GIF. You know that expression "You can't compare apples and oranges?" Well, obviously it's wrong. In fact, you can compare all the fruit you want, and in just a few moments, you will. Meanwhile, throughout your many and varied comparisons, the original image remains on-screen so you always know where home is.

The command at work here is Save For Web. This one command lets you apply compression, index colors, add transparency, and even resize an image to make it small enough to fit on a page, all in one operation. So there's no need to use Save As, Indexed Color, or any of the others. In fact, Save For Web works best if you start at the point you normally do when saving a file, with a full-color image open on- screen, in its final state, ready and waiting to be unleashed on an eager public.

Tip  

Technically, you can choose Save For Web when working with a large, layered image and then scale and flatten the image inside the resulting dialog box. Well, you can, but you shouldn't. Big images can result in such slow performance that you find yourself suddenly impatient with your computer. You may even be prompted that you're trying to optimize an image not intended for the Save For Web dialog box ”i.e., a very large file. To avoid the seizure-inducing slow computer and the frenzy- producing prompt, flatten your image and resize it down to close to the desired dimensions before choosing Save For Web.

Caution  

When flattening and resizing your original file, which you may want to keep in a layered, larger-than-for-the-Web size , you might forget that you've taken this pre-Save For Web step, and end up with a saved, closed file that's lost its precious layers . To prevent the ensuing swearing and fist-pounding, save the file first, in its layered, larger size, and then flatten and reduce its size before using Save For Web. Remember that alleged drawback, that the optimized file had no connection to the original? Here's where that's a good thing.

So when you're ready, choose File Save For Web or press Ctrl+Shift+Alt+S ( z +Shift+Option+S on the Mac) to display the large window pictured in Figure 14-18. At first, you may think there's a lot going on here ” and you'd be right ” but don't worry. Many of the options duplicate functions that have already been discussed, and by default, you'll only see a 2-up view (the original and a single optimized version of the image). Those options that aren't familiar are logical and intelligible, provided you approach them in the following order.

Figure 14-18: Click the 4-Up tab at the top of the window to compare the original image (upper left by default) to three sets of Web compression settings. Conveniently, zooming or scrolling inside one preview zooms or scrolls them all.

STEPS: Optimizing an Image for the Web

1. Click the tab for the display you want to use. When you first enter the Save For Web dialog box, you have to decide which image or images you'd like to preview. Photoshop defaults to the Optimized view, which shows the image with JPEG compression or color indexing applied, as it will appear when opened in a Web browser. To compare multiple settings at a time ” the real power of the window ” click on the 2-Up or 4-Up tab in the top left corner of the window. Figure 14-18 shows the 4-Up view, obviously.

   Tip  

   To get a better look at the image in the previews, scroll and zoom using the Hand tool and magnifying glass in the upper-left corner of the window. You can also use the standard navigation shortcuts, including spacebar for the Hand tool and Ctrl+plus or minus to zoom ( z +plus or minus on the Mac). To keep track of the active zoom ratio, keep an eye on the zoom level value in the lower-left corner of the window.

2. Click a preview and choose the optimization settings you want to apply. By default, the first preview shows the original image, untainted by compression settings. You probably want to leave that one alone. But the others, you can click and change to your heart's content. You know when a preview is selected because a blue border appears around it.

   The optimization settings ” so-called because they optimize the file size for the Web ” run down the right side of the dialog box and change according to the file format that you select. Each time you change a setting or advance to the next one, Photoshop rebuilds the preview to show you the result.

   Tip  

   To preview a group of settings in your favorite Web browser, click the colorful world-and-question-mark button at the bottom of the window. If the button doesn't represent your favorite browser, choose another browser from the accompanying pop-up menu.

3. Select the preview you like best and click the Save button. Photoshop displays a variation on the standard Save dialog box. But instead of selecting the file format ” you've already done that ” you specify whether you want Photoshop to create one or more image files, an HTML file describing a sample Web page, or both. Name the image and specify the location of your files on disk as usual.

Now that you understand the basic approach, the next few sections go into detail about the optimization settings for the JPEG and GIF file formats. If you would prefer to use one of the two PNG formats ” which rely on subsets of the same options used by GIF ” then reference the "GIF optimization settings" section.

Note  

In addition to GIF, JPEG, and PNG, Save For Web supports the Wireless Image Format (WBMP), which is a black-and-white bitmap format used by Web-surfing cell phones and other personal wireless devices. WBMP supports dithering, but beyond that, there's not much to say about it. If you can use it, great.

JPEG optimization settings

When you select JPEG from the format pop-up menu, you gain access to the options shown in Figure 14-19. Most duplicate options are found in the JPEG Options dialog box (refer to Figure 14-9), so there's no need to risk boring you and wasting paper explaining them all over again. Instead, take a look at the unique stuff:

Figure 14-19: JPEG image settings, displayed whenJPEG is chosen from thePreset/Settings menu. The resulting options are JPEG- specific.

• Quality: The Quality pop-up menu (labeled in Figure 14-19) and the value to its right mirror the Quality controls in the JPEG Options dialog box. But although the latter permits values from 0 to 12, this value tops out at 100. Rather than adding better quality, it provides more variety ” in other words, 100 in Save For Web is roughly equivalent to 12 in JPEG Options.

  Tip  

  If your image contains a mask channel, you can apply compression selectively by clicking the mask icon to the right of the Quality value. The resulting dialog box lets you select text, shapes , or an alpha channel to use as your mask. In Figure 14-20, an Alpha Channel created in advance (see the steps in Chapter 9) is in use. Next, adjust the Minimum and Maximum settings, either using the values or sliders. Where the mask is white, Photoshop applies the Maximum quality setting (minimum compression); where the mask is black, you get Minimum quality (maximum compression). The resulting effect reduces file size without harming the edges.

  
  Figure 14-20: To apply variable compression settings, click the mask icon next to the Quality value, select the desired mask channel, and adjust the Minimum and Maximum settings.

• Optimized: Selecting this check box applies more efficient lossless compression to a JPEG file. It's the same as choosing Baseline Optimized in the JPEG Options dialog box (see "Other JPEG options"), and usually shaves off a K or two.

• Blur: JPEG's lossy compression scheme is better at compressing soft transitions than hard edges, meaning that it can compress blurry images better than sharp ones. So by blurring an image, you reduce its file size without applying more compression. Of course, this removes detail, so leave this value set to 0.

• ICC Profile: This check box embeds a color profile with the JPEG image. The color profile adds about 3K to the file size, which means an extra second of download time at 28.8Kbps (the default modem speed shown in the Save For Web dialog box load estimates). As mentioned in "Working with sRGB" earlier in this chapter, browser support for profiles is pretty scarce , so leave this option turned off.

• Image Size: Because JPEG images are full-color, the Color Table options are unavailable. However, the bottom-right side of the dialog box does not go entirely wasted . If an image is physically too large to fit snugly on your Web page, you can make it smaller by clicking the Image Size tab and fiddling with the Width, Height, and Percent values. These options work just like those offered by Image Image Size.

  Tip  

  If you're tempted to use your Web design application ” say, Adobe GoLive or Macromedia's Dreamweaver ” to resize an image to fit into the allocated space on your Web page, resist that temptation . When resizing in the design application, there's no control over how the change in size will be accommodated in terms of resampling ” you usually end up with choppy edges and that blocky, pixelated look. Better to determine the size you need, size the image within Photoshop, and then know it will fit when you're composing the page in another application. If changes are made to the page later that require resizing the image yet again, the retention of image quality is worth the time it will take you to crack open Photoshop again and change the image to the size you now need.

GIF optimization settings

Selecting GIF from the format pop-up menu displays the slew of options shown in Figure 14-22. Many are familiar from the Indexed Color dialog box, and the redundant ones will be skipped in the following coverage. The new ones are as follows :

• Lossy: Technically, GIF relies on lossless LZW compression, so no data is sacrificed when saving a file. But by cranking up the Lossy value, you can rearrange the pixels in an image so that they compress better. You may find that a setting as low as 30 reduces file size without compromising quality, but you should keep an eye on the preview and make sure you're not losing so much quality that the second or two you gain in estimated load time isn't worth it. Conversely, don't make the image take so long to load that no one will ever see your nice clean edges and smooth colors.

• The mask icons: When you index an image using Indexed Color, you can make Photoshop favor a certain area of the image by selecting that area first. In the Save For Web dialog box, you can likewise stress one area over another using a mask that you've created in advance. Just click the mask icon next to the palette pop-up menu (labeled in Figure 14-21) and select the desired mask. Photoshop emphasizes colors inside the white portion of the mask just as it emphasizes colors in a selection.

  
  Figure 14-21: The sheer number of GIF options might be confusing to some, but not to you ” because you have opposable thumbs!

  The mask icons next to Lossy and Dither use masks to selectively rearrange and intermix pixels. White areas in the mask receive preferential treatment over black areas, as described in the tip in the previous section. Here again, an edge mask serves very nicely .

• Colors: As inside the Indexed Color dialog box, you can enter the specific number of colors you want to retain. But you can likewise choose presets from a pop-up menu that correlate to incremental bit-depth settings. If you can reduce down to one of these settings, you will in many cases see a significant reduction in file size. For example, if 36 colors looks good, try to get the value down to 32 colors, or 5 bits of data per pixel.

• Transparency: If an image contains transparent areas marked by the checkerboard pattern, select the Transparency check box to keep those areas transparent. Inside the Save For Web window, you also have the option of simulating translucency using a dither pattern. Choose one of the options in the pop-up menu below the Transparency check box to dither a tapering shadow or gradual fade.

• Web Snap: This ingenious option replaces a specified percentage of colors in an image with members of the 216-color Web palette. It's a way to hedge your bets: you can lock down some colors so they're compatible with older 8-bit monitors and permit other colors to roam free so that the image still looks great on 24-bit screens.

• Color Table: Clicking on this tab shows all the colors in an indexed image. Below the colors, you'll notice five tiny icons, which enable you to edit one or more selected swatches in the palette. (Just click a swatch to select it.) In order from left to right, these icons let you convert a swatch to transparent, change a color to its nearest Web equivalent, lock the color so it can't be modified, add a color selected inside the original image with the eyedropper to the palette, or delete a color. You can also double-click a color to dial in new settings.

• Color palette menu: When the Color Table tab is active, you can modify selected colors, sort colors, and load and save palettes by choosing commands from this menu. Just click the arrowhead to the right of the tab.

PNG optimization settings

It may seem as though PNG has gotten the short shrift in this book ” and it sort of has, but only because it's less commonly used for creating Web graphics. The bias toward JPEG and GIF is partially appropriate, and substantially not. As stated earlier, much of the problem with PNG is the result of rumor and innuendo; for a while, PNG was not universally supported by most browsers, so people shied away from it for creating Web images. That lack of support, however, was short-lived, and for the past few years , the current browsers have all supported PNG. The stigma stuck with PNG, however, and people just don't seem to use it as much as JPEG and GIF, despite it being a reasonable alternative.

Now, "reasonable" is quite a term . Juries must convict only when the prosecution has made its case beyond a "reasonable doubt." Reasonable people don't do rash, wild, unreasonable things. PNG is a reasonable choice for your Web-bound image, if your image would be a good GIF candidate ” loaded with high-contrast line art, large areas of solid color, and type. If this sounds like your image, PNG-8 is for you. With PNG-8, you get 128 colors, transparency, dithering and matte options, and even the Web Snap field is available ” check out Figure 14-22 if you don't believe it. You can reduce the number of colors, just like you can with a GIF file. You get a small file, great for fast-loading graphics. Nope, there's absolutely no reason not to go with PNG.

Figure 14-22: PNG-8's options are barely distinguishable from GIF's. For the appropriate image, PNG is a perfectly acceptable choice. The PNG-8 preview (lower right) shows that the image will be just a little bit smaller than its GIF128-color alternative (see upper-right preview) and will load a few seconds faster. The PNG-24 preview (see lower-left preview) will create a humongous file.

PNG-24 is supposed to be the equivalent of JPEG, and in terms of the way the image looks, it is; but as you can see in the preview in Figure 14-23, it creates incredibly large files ” files that take hundreds of seconds to load, based on the Save For Web dialog box estimates that appear beneath each preview. So it's not really a good choice for Web graphics, and that's really all there is to say. Of course, it does offer some very limited options ” a Transparency check box, an Interlaced option, and if Transparency is turned off, a Matte option that goes from dimmed to available, offering None, Eyedropper Color, White, Black, and Other (which spawns the Color Picker). No color table, no quality setting, no nothing else.

Figure 14-23: Optimizing slices (shown at top, left) independently can be dangerous because it can result in harsh edges between one slice and its neighbor when slices are assembled inside a browser (right). Link the slices to use one palette throughout (bottom, left).

The Optimize menu

So with PNG given more of its due, let's go back to discussing the more commonly used formats, JPEG and GIF, and their optimization options found in the Optimize menu, labeled back in Figure 14-18. This menu supplies a few extra goodies that are equally applicable to JPEG and GIF images:

• Save Settings: Choose this command to save the current optimization settings as a preset. You can then apply the same settings by simply choosing the preset from the Settings pop-up menu.

• Delete Settings: Choose a preset and then select this command to delete it.

• Optimize to File Size: One of the best reasons to open the optimize menu, this command lets you forgo messing with a bunch of settings and instead enter a target file size. After you click OK, Photoshop automatically changes the settings to meet the target size. If you don't know whether you want to use GIF or JPEG, select Auto Select GIF/JPEG.

  If the image contains slices, select Current Slice to optimize the selected slice only. Select All Slices Separately to optimize each slice to the same file size or All Slices Together to make all slices add up to the target size. For more information on slicing, see "Slicing Images" later in this chapter.

• Repopulate Views: When you're working in 4-Up view, the first preview shows your uncompressed image, and the selected preview (by default, the second one) illustrates your custom optimization settings. Photoshop fills in the two remaining previews with automatic variations, each of which results in a smaller file size than your settings. If you make changes to your custom settings, you can update the two alternative previews by choosing Repopulate Views.

• Link Slices: By default, Photoshop optimizes each slice independently, applying different JPEG compression settings or calculating separate color palettes. In many cases, that's fine. But what if you have two or more neighboring slices that you want to save as GIF images using Selective palettes? Photoshop may stick completely different colors in the slices, resulting in an obvious edge between them, as demonstrated in Figure 14-23. To avoid this, Shift+click with the Slice Select tool (the one that looks like an X-ACTO knife ) to select the slices you want to link and then choose the Link Slices command. From now on, the linked slices share a common set of optimization settings, as in the final example in the figure. If you later decide you want to optimize slices independently, choose one of the two Unlink commands.

• Edit Output Settings: When you slice a document, Photoshop saves the slices as individual image files and then automatically generates the HTML code necessary to assemble the files into a cohesive Web table. This means Photoshop has to automatically name the various image files, write the code, and generate links to the images based on certain, mostly sensible assumptions. If you don't like Photoshop's assumptions, you can modify them by choosing the Edit Output Settings command. Note that this command assumes you have a working knowledge of HTML scripting so that you can make selections from its Formatting section, offering Tags Case, Attributes Case, Indent, Line Endings, and Encoding options. If you just said, "Huh?" then just skip the Edit Output Settings command.

  Tip  

  If you want to design Web pages ” and not just the images that populate them ” you should take the time to develop that "working knowledge" of HTML. It's not difficult to learn, and there are plenty of books to refer to ” heck, there's even an HTML Bible ” and courses abound online, on CD, or even through continuing-education programs everywhere. You can use programs like GoLive and Dreamweaver to develop your Web pages, but you'll get more out of those programs if you understand the underlying HTML code that is being created as you use the graphical interface to design your pages.

The Preview menu

One last menu, loitering unpretentiously near the top of the Save For Web dialog box, controls the appearance and feedback provided by the previews. Its commands are divided into four sections:

• Browser Dither: Select this option to see how a selected preview would look if displayed on an old 8-bit monitor. When editing a GIF image, this is an exceedingly useful method for gauging the performance of the Web Snap value.

• Hide Auto Slices: In order to fill in the gaps between your slices, Photoshop has to draw in its own. This is of course a good thing, but it can lead to screen clutter. To remove this clutter from all previews, choose Hide Auto Slices. Only your custom slices remain visible. (As always, for complete information on slicing, see the section "Slicing Images," coming up soon.)

  Tip  

  To hide all slices ” custom or automatic ” click the icon at the end of the tools along the left side of the Save For Web window. (It reads Toggle Slices Visibility when you hover the cursor over it.) When no option is highlighted, use the keyboard shortcut Q.

• Color Compensation: As stated earlier, there's no way to predict exactly how an image will look on another screen. But you can use the four color commands to get a sense. By default, Uncompensated Color is active, so Photoshop makes no attempt at a prediction. Select Standard Windows Color or Standard Macintosh Color to see how the colors might look on another platform. The final color command, Use Document Color Profile, shows the colors as they normally appear in the active color space, most likely sRGB.

• Size/Download Time: The last dozen commands change the connection speed according to which Photoshop calculates the estimated download times listed below each preview. Note that these commands affect all previews, not just the selected one.