Web Graphics Dos and Don ts

Web Graphics Dos and Don'ts

The Web provides a highly satisfying outlet for creative expression. How else can you get your work in front of millions of total strangers without really trying? But as is the case with just about everything in life, success on the Web depends not just upon your artistic prowess, but also upon your understanding of the right and wrong ways to prepare your images. To that end, the next few sections discuss a few basic rules, some things to do and not do, when creating Web graphics.

Work large, then shrink

If you have any experience with the Web, you know that small images are speedy images. "Small" refers to both small in physical size and in the amount of disk space the files consume . Physically small images are flexible because they can coexist with text and other elements on a page displayed on a low-resolution screen. Meanwhile, disk size affects speed. A 20K image that fills your screen takes less time to download and display than a 50K file no larger than a postage stamp. It's the act of getting the data through the network lines, routers, cables, and modems that takes the time.

That said, you probably don't want to start out by making your graphics small ” either physically or on disk ” from the outset. The better approach is to build your images large, as if they're going to print, and then shrink them down for Web use. For example, Figure 14-1 shows an image created from a digital photo. The image includes a few layered permutations ranging in size from 20MB to 60MB, and was saved as a PSD file at significant alterations in the development of the graphic. Then it was flattened and saved as a TIFF file. This file (Figure 14-1) weighs in at 5MB and measures a little more than 4 4 inches when printed at 300 pixels per inch. In terms of file size, that's way too big to post on the Web. It would take anywhere from about a minute to download on a 1MBps cable connection to close to 20 minutes over a 56.6Kbps modem. That's altogether unacceptable, because Web site visitors want to see the pictures now . If you make 'em wait, they move on.

Figure 14-1: A graphic that started out meant for printing ” large and layered ” a 300-dpi, 24-bit graphic that measures 1398 1316 pixels and weighs in at 5MB.

This, then, means that the image in Figure 14-1 needs to be reduced. You could start by reducing the graphic to 50 percent of its previous width and height (that's 25 percent of its previous area) and saving it in the JPEG format. You'd use the Save For Web dialog box, which will be discussed in detail later; and as shown in the first example in Figure 14-2, making such reductions creates a tremendous difference, shrinking the file size in this case to 120.6KB. That's a 2-second download over a 1MBps connection, but it still takes 30 seconds for people with 56.6Kbps modems.

Figure 14-2: Two variations of the image from the previous figure reduced in size and saved in the JPEG (the big one in the background) and GIF (the small inset) formats. The file sizes drop to 120K and 19K, respectively.

So again, reductions are called for, and experimentation with the GIF format, hoping to gain (or, rather, lose) something that way. The image in the inset in Figure 14-2 shows the result of lowering the number of colors from the 8-bit RGB-standard 16 million to a mere 32. (The two images appear the same size because they're printed at different resolutions . But the GIF image actually contains just one quarter the pixels included in the JPEG image). Measuring 325 335 pixels, this image is still large by Web standards, consuming roughly a quarter of a typical Web page. And at 19KB, it takes a fraction of a second to download over a 1MBps connection (good) and 6 seconds over a 56.6Kbps modem (fair). That's about right for a graphic of this size.

At this point, you may be thinking "Okay, but why not save yourself a lot of processing power and create the graphic small in the first place?" Good question. The answer is purpose . Create a small graphic, and it has one purpose and one purpose only ” early 21st-century Web. But what if you later want to print the graphic? And what about when the Web changes? It's not unrealistic to expect high-resolution graphics and streaming DVD-quality video to be the Internet norm in a matter of years . Further, in terms of image quality, working larger from the start enables you to do more to the image, things that are much harder to do when the image is tiny ” restoration tasks , the addition of original artwork, manipulating type as part of the graphic, and so on.

So now here's a question for you. Why waste your valuable time creating an image whose death is ensured? As you may know or can imagine, there's nothing worse than spending an hour on a low-resolution graphic, only to watch it turn out to be one of the best images you've ever created. Only then do you realize that, had you known you were going to do such a good job, you would have done it right in the first place.

World-wide color shifts

Unlike print graphics, which rely on a combination of process inks or other pigments, all Web graphics, even low-color GIF images, exist in the RGB color space ” although they open in Indexed Color. This adherence to RGB is extremely good news because it means that what you see on screen is really, truly what you're going to get.

Well, almost. Ignoring the differences in the ways people perceive colors and the variances in ambient light from one office or dorm room to the next, there are measurable differences between monitors. Some monitors produce highly accurate colors, others ” especially older screens ” are entirely unreliable. But more importantly, some types of screens consistently display images more brightly than others.

For example, the typical Macintosh user is equipped with an unusually bright screen. This is because the operating system, whether Mac OS 9 or X, automatically assigns a target gamma of 1.8. Meanwhile, most PC monitors are calibrated to a gamma setting of 2.2, which results in a darker screen, roughly equivalent to television.

Modifying the gamma

Many computers or video boards give you the option of overriding the gamma value and assigning your own. Under Mac OS X, for example, choose System Preferences from the Apple menu, and then select the Displays icon, click the Color tab, and click Calibrate. After stepping through a few panels, you'll eventually come to the Select a Target Gamma options, pictured in Figure 14-3.

Figure 14-3: Many systems let you adjust monitor gamma, but the way you do it varies from system to system and video board to video board. Typically, you have to dig your way through an assistant (like the one shown here) or multipart control panel to find what you're looking for. Fortunately, the instructions tend to be pretty detailed.

Microsoft has never given color management much priority, so things are less predictable under Windows. In fact, whether or not such options exist usually depends not on your model of computer, but on the drivers supplied by the manufacturer of your video board. Right-click on the desktop and choose Properties, and then click the Settings tab and look for an Advanced button. If you find one, click it. From there, it's a matter of hunting down options like the greater trackers of yore. In other words, you're on your own.

Generally , it's not recommended that you change screen gammas, but there are exceptions. First, if you're a Macintosh designer who creates nothing but Web graphics, then you may want to switch to a gamma of 2.2 if only to see how most of your audience lives. Meanwhile, if you're working for print on the PC, you may find that you actually prefer working with a gamma of 1.8 because it tends to bring out more detail in midtones and shadows. If you do, however, bear in mind that you'll be slightly out of step with other PC users.

Gamma distortion and adjustment

Chapter 12 mentions that entering higher gamma values in the Levels dialog box leads to brighter colors. And yet here we have higher gamma values leading to darker colors. What gives? Well, your monitor is incapable of interpreting the signal from its video board without distortion. This distortion manifests itself as an exponential brightening effect. As with Levels, the exponent itself is called the gamma. A gamma adjustment compensates for the overly bright screen distortion, but in the opposite direction. It's as if you inverted the image and then switched the black-and-white Output Levels triangles in the Levels dialog box. The result is that higher degrees of compensation ” 2.2 versus 1.8, for example ” lead to darker colors on-screen.

 

Anticipating PC monitors

To give you an idea of how screen gamma can affect the brightness of an image, Figure 14-4 shows a sample photograph shot of St. Mark's Square in Venice, taken with a digital camera and corrected on a calibrated display in the platform-independent color space, sRGB . Co-developed by Hewlett-Packard and Microsoft, the sRGB space was reverse-engineered from the display portion of the high-definition television standard, which uses a set of phosphors known to its friends by the unforgettable appellation ITU-R 709.BT. HP, the main proponent of sRGB, is vague about what the s stands for, although the words standard, single, and simple all figure prominently into the company's press materials. Anyway, sRGB's intention is clear ” to provide a uniform standard for consumer-level digital cameras , personal printers, and screen displays from a wide variety of manufacturers.

Figure 14-4: A digital photo prepared on a calibrated monitor in sRGB color space. The photo was taken by author Raymond Mungo ( www.raymondmungo.com ) on a trip to Venice.

Although sRGB is becoming increasingly prevalent ” all kinds of hardware and software, including Photoshop, assign sRGB to their images by default ” support is by no means consistent or universal. Even so, it enjoys general praise and success in the preparation of Web graphics. The reason has less to do with support and more to do with design. Although originally conceived as a de facto standard for profiling vast image libraries such as those controlled by Corbis, National Geographic, and the Library of Congress, sRGB seems best suited to describing the display capabilities of a run-of-the-mill, gamma 2.2 PC monitor.

Figure 14-5 shows the results. Here we see the very same image introduced in Figure 14-4 as it appears when displayed first on a Mac and second on a PC. As you can see, the Mac version of the image is significantly lighter thanks to its gamma setting of 1.8. Meanwhile, the PC image is just a bit darker and more saturated than the image from the previous figure. Although this screen is not actually calibrated to sRGB, the sRGB color space is a rough approximation . Just so you can see how wildly things can vary, however, Figure 14-5 ends with a third shot of the image as displayed on an older-model PC combined with a low-end flat-panel monitor whose colors were never much better than those displayed on a Palm Pilot. The image is hideously dark with exaggerated contrast.

Figure 14-5: The image from the previous figure opened inside InternetExplorer on an iMac (top), a top-of-the-line PC (middle), and an old Windows 98 computer (bottom). The iMac display is very light, the high-end PC's display is best, and the older PC display is painfully dark.

Tip  

Photoshop lets you preview how your image looks on a foreign monitor. To see how an image may look on a typical Macintosh monitor, choose View Proof Setup Macintosh RGB. To see how it'll look on a typical PC, choose View Proof Setup Windows RGB. Photoshop also gives you a shortcut to toggle between the preview and the standard RGB mode ” Ctrl+Y ( z +Y on the Mac). Bear in mind that these are approximations only; Photoshop cannot anticipate aberrant screen displays like the one pictured at the end of Figure 14-5.

The lesson you can draw from Figure 14-5 is that although by no means perfect, sRGB represents a happy medium between the lightest and darkest screens out there. If you work inside sRGB, your graphics will appear to lighten slightly on Mac screens and darken to some extent on old PC monitors. But most people will see something that more or less resembles the image you intended them to see, as in the middle example in the figure.

Working with sRGB

So the question becomes, how do you ensure that you're seeing colors in sRGB? Thankfully for Web artists , sRGB is Photoshop's default working space. To confirm that this is the case, choose Color Settings from the Edit menu (or the Photoshop menu on the Mac) or press Ctrl+Shift+K ( z +Shift+K on the Mac). This brings up the dialog box shown in Figure 14-6. You can choose Web Graphics Defaults from the Settings pop-up menu, which changes all kinds of settings in the dialog box. Or, if you don't want to disturb your other settings, just choose sRGB IEC61966-2.1 from the first RGB menu, labeled in the figure. (IEC61966-2.1 is HP's designation for the sRGB standard.) Position your cursor over the sRGB option to see Adobe's official description of the sRGB space, shown at the bottom of Figure 14-6.

Figure 14-6: If you do most or all of your work for the Web, choose the Color Settings command and change the first RGB option to sRGB (top). You can also mouse over the word sRGB to see a description of the color space (bottom).

If you create artwork for either print or video in addition to the Web, you may prefer to work in Photoshop's recommended prepress space, Adobe RGB . Described at length in Chapter 16 of the standard edition of the Photoshop CS2 Bible, Adobe RGB offers a wider gamut than sRGB, meaning that it's better suited to high-end monitors. It also transitions better to CMYK (not to mention Adobe's video applications Premiere Pro and After Effects), making it well suited to process-color output. But it's a poor space in which to save your final Web graphics because it tends to exaggerate color saturation, leaving your images looking drab, even dingy, when displayed inside a browser that doesn't support Adobe RGB.

But just as you can work large and then shrink a graphic to make it fit the confines of a Web page, you can work in Adobe RGB and then convert to sRGB prior to saving the image in a Web file format. Choose Edit Convert to Profile (or on the Mac, Photoshop Convert to Profile). As shown in Figure 14-7, the source space, Adobe RGB, will be selected automatically; all you have to do is choose sRGB as the Destination Space. It's also a good idea to set the Intent to Perceptual and turn on all check boxes except perhaps Flatten Image, which merges all layers in order to ensure the most accurate color transitions. This option you can turn on or off to suit your needs.

Figure 14-7: If you create images for both print and the Web, you'll most likely want to do most of your work in theAdobe RGB (1998) color space. Then, when optimizing the image for the Web, convert it fromAdobe RGB to sRGB before scaling the image and saving it in the desired Web file format.

Tip  

When saving an image using File Save As, Photoshop asks you if you'd like to embed a source color profile, generally sRGB when saving Web graphics. If you choose to do so, this profile may tell the browser how to display the graphic. Older browsers, such as those prior to Internet Explorer 5 for the Mac, didn't support profiles. Given that people tend to update their browsers more frequently these days, this is less and less of a concern.

If you do want to concern yourself with this potential (but unlikely ) browser support issue, you can activate profile support by choosing the Preferences command, click Web Content, and turn on the Use ColorSync check box. From that point on, when IE comes across an image with an embedded sRGB profile, it displays the colors as in Figure 14-4 as opposed to the first example in Figure 14-5. (Although OmniWeb 4.5 for the Mac also supports ColorSync profiles, both IE and Apple's own Safari browser are much more prevalent among Mac users.)

Meanwhile, the Windows versions of IE treat all images as if they were created in sRGB. But as you saw at the end of Figure 14-5, that by no means ensures success. So the best advice is this: Either create your image in, or convert your image to, sRGB. If you like, preview the image using the View Proof Setup commands. Finally, save the image without a profile. The presence of a profile serves only a small group of people, but the absence of a profile saves on file size and downloading times for everyone.

More Web graphics guidelines

Here are a few last-minute items to remember when creating Web graphics:

• Resolution doesn't matter. Regardless of the Resolution value you enter into the Image Size dialog box, the Web browser displays one image pixel for every screen pixel (unless you specify an alternative image size in your HTML file). Occasionally, you hear warnings that browsers may one day pay attention to resolution values, but if so, it'll be a preference setting that's off by default. Otherwise, whole Web sites would go to pieces. (Then again, little details like that rarely deter Microsoft, so you never know.) All that counts, therefore, is the pixel measurements ” the number of pixels wide by the number of pixels tall.

• Save in JPEG, GIF, or PNG. Discussed at length in the upcoming sections, JPEG and GIF are the most common file formats for Web graphics. GIF supports at most 256 colors, so it's better for high-contrast artwork and text. JPEG supports more than 16 million colors, but applies lossy compression, making it better suited to photographs and other continuous-tone images. PNG is a 24-bit competitor to GIF that also happens to support 256 degrees of transparency, just like a Photoshop layer. Due to a few years of real and then several years of only rumored lack of support by different browsers, PNG hasn't grabbed the market share that GIF and JPEG have. There's no reason, however, not to use PNG, provided you use it for the right kind of images (choosing a format is covered shortly). Currently, PNG images are widely used as elements in media files that require separate plug-ins, such as Flash animations. Important last point on this ” while JPEG, GIF, and PNG are the big three when it comes to web graphics, don't forget to save your image in PSD or some other layer-supporting format, too. Doing so assures you of having an editable version of the graphic for future use or to fix or change things about the graphic you're saving in a Web-friendly format.

• Save As versus Save For Web. Photoshop lets you save images for the Web using either File Save As or File Save For Web. The latter opens the large and option-filled Save For Web dialog box, and automatically dumps all nonessential data, including paths, color profiles, and image previews. This means that to update a file on disk, you have to reoptimize and rename your image, which you may or may not like doing. If for some reason this bothers you, consider the rest of what the Save For Web dialog box has going for it: tools for choosing only from Web-friendly formats (no chance of choosing something that browsers won't display), options for setting image quality, multiple image previews and preview-sizing tools, and a simple way to establish the number of colors used in GIF and PNG graphics. You also get the ability to animate GIFs. Do you need anything else to prove that the Save For Web dialog box should be your final step in creating Web graphics?

• Save essential data only. If you anticipate you'll be using File Save As to save your JPEG and GIF images (despite the persuasive argument presented in the previous bullet point), the peskiest elements to eliminate are the previews. On the Mac, image previews are mostly stored in the resource fork of a file, which cannot be seen by Windows and UNIX machines and is therefore never downloaded. However, a little of the Mac preview goes in the data fork and all of the Windows preview does, so the file would be smaller without it.

  Tip  

  To turn off previews, first press Ctrl+K and then Ctrl+2 (that's z +K, z +2 on the Mac) to visit the File Handling panel of the Preferences dialog box. Next, set the Image Previews option to Ask When Saving, as in Figure 14-8. From now on, when you choose the Save As command, you'll see either a Thumbnail check box under Windows or four Image Previews check boxes on the Mac. Either way, turn all the check boxes off when saving Web graphics; leave them on for other kinds of images.

  
  Figure 14-8: If you use the Save As command for saving Web graphics, first set Image Previews to Ask When Saving in the Preferences dialog box (top). Later, when confronted with the Save As dialog box, turn off all check boxes (bottom).

By recognizing which commands and formats to use when and how best to reduce colors inside GIF mages, you can better ensure that visitors to your Web site will spend less time sitting on their hands and more time enjoying your site. The following sections explain the fine points of file formats, color indexing, and all the rest.