Preparing Images

No matter whether an image is destined for print or for screen, we always recommend that you do the tonal correction, color correction, and sharpening in Photoshop. But the kind of correction and sharpening you need for on-screen images is almost always different than for printed images.

Ultimately, the one rule that almost always applies to images for the screen is that no matter what the image looks like on your screen, it will look different on everyone else's. Preparing images for multimedia and the Internet is an exercise in frustration for anyone who is used to print production; even the whims of a web press seem trivial compared to the variations from one person's screen to another on the Web.


Electronic commerce demands that Web color get more consistent; the number one reason for merchandise returns is, "it wasn't the color I saw in the catalog." Without an easy way for people to characterize their monitor and for images to be compensated on the fly, customers will never be able to tell whether the shirt they're looking at is a dark burgundy or a light red, and e-commerce will flounder. With so much money riding on this, you'd think that there would already be good commercial solutions to ensure accurate color. Unfortunately, the tough part is getting the person-on-the-street to create custom monitor profiles on their machines.

While the display on some computer monitors is darker than on others, monitors connected to a Macintosh tend to display images lighter than those on a PC (see Figure 14-1). You can compensate for this to some extent by choosing an appropriate RGB space for your images (see Chapter 5, Color Settings); but it's unlikely that the people who view your images will have calibrated monitors, so the above gamma numbers are no more than a general guideline.

Figure 14-1. Monitor gamma and image tone

There are several strategies for dealing with this mismatch. All involve some compromises. Since the destination monitor is essentially an unknown, you can be fairly certain that until self-calibrating monitors are ubiquitous and all browsers support system-level color management, your images are going to look much better (or worse) on some systems than on others. Ultimately, it's simply impossible to produce images that will look good to every Web user.

Given the current state of the art, the best you can do is to choose an aim point appropriate for the audience you're trying to reach. We suggest you choose one of the following alternatives.

  • Convert to sRGB. Back in Chapter 5, Color Settings, we discussed the sRGB color space, developed by several industry giants to describe the general characteristics of the "typical" Windows monitor. Of course, the sRGB color gamut excludes many of the intense colors that you may want to display. (Ironically, the logo color of one of sRGB's main proponents, Hewlett-Packard, lies outside the sRGB gamut.) Also, we doubt that the majority of monitors on the market actually display sRGB. Still, you can convert your edited images into the sRGB space before saving them, accepting its inherent limitations.

    Given the marketing muscle behind sRGB, it's probably the most sensible choice unless you're trying to sell color-critical merchandise or show fine art on the Web. However, there are many good reasons to work in a better RGB workspace and only convert to sRGB just before saving the file (see "Tip: Work in a Big Space," on the next page).

  • Prepare two sets of images. We know some photographers who care so much about color that they've prepared two sets of their images, one at gamma 1.8 and one at gamma 2.2. Then they set up their sites so that Mac users see the gamma 1.8 version while Windows users see the gamma 2.2 version. It's a good theory, except that it still doesn't take into account that out in the real world some Mac monitors actually display more darkly than Windows monitors, and vice versa. It is also a lot more work to do this, of course.

  • Embed the profile. The best solution to the color mismatch problem is to embed an ICC profile in each image. Unfortunately, this approach relies on two things: that every person looking at your images has created their own custom monitor profile, and that their browser supports (and corrects for) embedded profiles. But let's get real: Neither of these is likely in the real world, at least not anytime soon. For instance, as far as we know, only Safari and Internet Explorer 4.x and 5.x for the Mac support embedded profiles (and in the latter, only when you turn on the ColorSync checkbox in the Preferences dialog box).

    Note that Photoshop does not embed profiles in GIF files because they're always in Indexed Color mode rather than RGB. However, there are ways that you can specify a profile for a GIF file (see the Web site for more information on specifying an associated profile within your HTML code). Embedding an RGB working space profile usually only adds about 0.5 K to a JPEG image, so file size shouldn't be a consideration.

All three approaches have their strengths and weaknesses, and each of these three strategies optimizes the image for a different set of users.

Tip: Work in a Big Space

Even if every image you create is for the Web, we still suggest setting the RGB popup menu in your Color Settings dialog box to a reasonable color space, like Adobe RGB (if you don't know what we're talking about here, check out Chapter 5, Color Settings). Then, if you want to convert your images to the sRGB space before saving them, you can use Convert to Profile (from the Edit menu) to convert from your RGB space to sRGB. If you use the smaller sRGB space as your RGB working space, you're limiting your color options unnecessarily when editing your images.


Not only can you rarely predict tonal shifts in images for the screen, you can't assume anything about color. Most graphic arts professionals have 24-bit color ("true color") monitors, but just because you have one doesn't mean that your audience will. In fact, some users of older computers can only view 256 colors at a time, due to the constraints of their video hardware (or the games they like to play on their computer). The occasional computer user only has a grayscale screen, so they won't see color at all.

What's worse, even two people with the same kind of screen and computer system will probably see the same image differently on each of their monitors. Again, monitor calibration can help considerably, but it's too rare to depend upon. (And a thoughtless quick twist of the brightness or contrast knobs means that the color is even further off.)

However, there are a few rules you can generally trust.

  • It's usually more important to retain the contrast between colors than the particular colors themselves. Image details that result from subtle changes in color (like the gentle folds in a red silk scarf) are often lost in translation.

  • Solid areas of color, including text, should be set to one of the 216 "Websafe" colors (see "Tip: Web-Safe Colors," below) so that they won't dither on old 8-bit screens.

  • If you built your image on a 24-bit color monitor (which is a good idea, even when making Web graphics), switch your monitor to 8-bit color (256 colors) to test how less-well-equipped folks will see your image. (Or, use the Browser Dither feature in the Save For Web dialog box, which we talk about later in this chapter.)

  • While you're testing, also try looking at your image on both Macintosh and Windows systems. You can also select Windows RGB or Macintosh RGB from the Proof Setup submenu (under the View menu), and then turn on Proof Colors (press Command-Y) to see how they change. This isn't perfect, but it should give you a general idea of how the image may look on a different system.

  • Images for multimedia and the Web should always be in RGB or Indexed Color mode.

Tip: Web-Safe Colors

There is a myth that people making GIF images should always save them using Web-safe colors. The problem is that "Web-safe" really should be called "Save for 8-bit monitors" because this is only relevant when viewing images on a monitor set to 8-bit color (256 colors). The vast majority of computers on the planet now display 16-bit ("thousands of colors") or 24-bit ("millions of colors" or "true color") color, so Web-safe just isn't that important anymore.

However, if you do use a non-Web-safe color in your image, itby necessitygets dithered using the system palette's colors when viewed on an 8-bit color monitor (see Figure 14-2). The dithering is distracting in many images (especially images with text), but is usually unavoidable in pictures that contain anti-aliasing, gradients, or photographic images.

Figure 14-2. Web-safe colors

There are various ways to choose Web-safe colors for a Photoshop image, but the easiest is simply to turn on the Only Web Colors checkbox in Photoshop's Color Picker dialog box. Or, you could open the Swatches palette and choose any of the Web-safe palettes from the palette's popout menu (any palette that begins with the word "Web" or "Visibone").

By the way, if you do the math, you'll find that all the Web-safe colors are in 20-percent steps within the 256-level scale. That is, a typical Web-safe color might be 20-percent red and 60-percent green. You might be tempted with this knowledge to change your Color Picker (in the Preferences dialog box) in order to specify colors by percentage. Don't do it! Photoshop translates these values based on the RGB profile in the Color Settings dialog box, so you won't get the proper values at all. Instead, if you want to type specific numbers into the Color Picker dialog box, use 0, 51, 102, 153, 204, or 255 (these correlate directly with 0, 20, 40, 60, 80, and 100 percent).


One of the wonderful advantages to working on images for screen display is that resolution is almost always 72 ppi, making for very small images (relative to prepress sizes, at least). A 4-by-5-inch image at 72 ppi takes up 300 K, where the equivalent prepress image might consume over 4.5 MB of disk space and RAM. With smaller file size come faster processing times and lower RAM requirements. You can actually use any resolution you want, but when it comes time to put the image on screen, each image pixel is mapped to a screen pixel. A 300-ppi image will become enormous on screen!

Of course, similar to the vagaries of color and tone on the Internet, you rarely know what resolution screen your images will be viewed onyour 72-ppi illustration quickly becomes much smaller if someone views it on a high-resolution monitor. Because you cannot assume monitor resolution, it's often a good idea to design your 72-ppi images slightly larger in size so they'll look okay on a higher-resolution screen. The "standard" resolution of most Windows and Macintosh monitors is around 96 ppi. Bruce runs a 22-inch monitor at 1920-by-1440-pixel resolution, which is close to 125 ppi! (This makes all Web images on his screen appear about half the size they were intended.)

Note that when scanning images destined for the screen, we still almost always scan them at a higher resolution (often the full optical resolution of the scanner) and then downsample them in Photoshop.

Tip: Pages to Graphics

People spend a lot of time trying to figure out how to get their InDesign or QuarkXPress pages up on the Internet. Converting to HTML is one option, though the page almost never looks the same as it did originally. Saving in the PDF format is another option, but then people need Acrobat Reader to view the page, which is a hassle.

Our favorite method of getting pages from XPress or InDesign (or any other program) up on the 'Net is to make a picture out of each one. Adobe InDesign CS lets you export a document page as a JPEG file (select Export from the File menu). If you're using XPress, an earlier version of InDesign, or some other program, here's what to do:


Save a page from the program as an EPS or PDF. InDesign and QuarkXPress have specific features to do this; if your program doesn't, you can print to disk as an EPS file using the LaserWriter PostScript driver.


Open this file in Photoshop. When Photoshop opens the Generic EPS or Rasterize PDF dialog box, choose to open the image as an RGB file at 72 dpi. Small type doesn't convert well to bitmap, but you might get a better result by turning on Anti-alias in the Open EPS dialog box.


Select Flatten from the Layer menu.


Save the file as either a GIF or a JPEG, depending on the content of the page and how much compression you're likely to achieve (see the next section for more on these file formats).

By turning the page into a picture, anyone with a Web browser can see it on the Internet. And surprisingly, even a full-page "page image" can be made very small if it's mostly text.

Real World Adobe Photoshop CS2(c) Industrial-Strength Production Techniques
Real World Adobe Photoshop CS2: Industrial-strength Production Techniques
ISBN: B000N7B9T6
Year: 2006
Pages: 220
Authors: Bruce Fraser © 2008-2017.
If you may any questions please contact us: