Taking Your Talent to the Web

231

Expanding on Compression

As explained previously, we compress images to minimize wasted bandwidth and speed the arrival of the web page. We’ve shown you how Photoshop optimizes images when preparing them for the Web, so you know all you need to know to handle the basics. The following are some extra tips.

Make your JPEGS smaller

You can make your JPEGs even smaller in file size (and reduce the appearance of JPEG artifacts) by blurring them slightly before compressing them. Not all areas of all images react well to blurring, but it’s surprising what you can achieve by blurring, say, a distant sky and sunset while preserving the sharpness of a human subject in the foreground.

This kind of work requires selecting the parts of the image you want to blur, feathering the edge of the selection slightly, and masking out the parts of the image where sharper focus is important. As we said in the beginning, we assume you already know how to do these things in Photoshop.

If you prefer, you can apply subtle (or not-so-subtle) blurring effects to your entire image in the Save For Web dialog box, but we generally find this method too coarse. Blurring, say, an entire portrait makes the subject look drunk—or the viewer feel that way. Selectively and subtly blurring large areas of undifferentiated skin tones, while preserving the sharpness of eyes, brows, hair, and lips, will usually be much more effective. And that kind of work you do in the main Photoshop window before entering the Save For Web dialog.

Combining sharp and blurry

Subtle problems can arise when choosing the appropriate image format. Say you’ve designed a header graphic that includes both photography (a shot of the corporate board of directors) and typography (a superimposed headline in Meta or Helvetica Neu Condensed Black). The headline requires sharp focus and crisp handling—thus it begs to be a GIF. The photograph wants to be a JPEG. What’s a mother to do?

232 HOW: Visual Tools: Format This

Figure 9.8

The background image, a layered photomontage, wants to be saved as a

JPEG because JPEG would best reproduce its subtly modulating hue and brightness variations. But…

Usually, what you do is give greater weight to the need for crisp typography and export the entire image as a GIF, accepting that the photographic imagery will not render as well as it would have in a JPEG (see Figures 9.8, 9.9, and 9.10).

Figure 9.9

…the typography insists on being saved as a GIF because only the GIF format will reproduce the crisp, clear lines of type. A JPEG would soften the headline and render the small type as an illegible blur. So…

Figure 9.10

…the image is saved as a GIF because type takes precedence over photographic nuances. The image could also have been saved as a PNG. But the PNG would have been far larger and not enough browsers fully support the PNG format yet.

Taking Your Talent to the Web

233

Alternately, you could export the human subjects as a JPEG, export the typography as a transparent GIF, and superimpose the GIF over the JPEG using any number of web sleights of hand. For instance, you could employ CSS absolute positioning to layer a crisp, transparent typographic GIF on top of a soft photographic JPEG. (This would not work in Netscape 3 or IE3 and might destabilize Netscape 4. Thankfully, these browsers are finally limping away from the playing field, although not as fast as we’d like.)

Depending on the layout, you alternatively could use the old, nonstandard <bgimage> attribute of the HTML table cell <td> tag to position a photographic image in the background of a table cell and then place a type GIF in the foreground. The type GIF would have to be the same size as the background image and would require GIF transparency to allow the background to peek through. The size of the GIF would be marked up in the table cell attributes to ensure that the cell was the correct size. Though this technique works well in almost every graphic browser since the svelte boyhood of Fred Flintstone, it is a lot of silly (and nonstandard) markup—and it’s probably not worth the bandwidth.

Or you could do what Magdalena Donnea did on the front page of her award-winning personal site, “Water,” at www.kia.net/water/. (Use View Source to see exactly what Magdalena did.)

As we said, most of the time, you’ll use the GIF format to ensure that your text is legible. You also might consider rethinking the entire design idea in favor of one that is more in keeping with the limitations of the Web (see Figure 9.11).

Figure 9.11

The ever-popular “striped” effect that dominated the web in the late 1990s had its roots in a technique to minimize bandwidth by making the most of the GIF compression algorithm’s preference for straight horizontal lines.

234 HOW: Visual Tools: Compression Breeds Style

COMPRESSION BREEDS STYLE: THINKING

ABOUT THE MEDIUM

The GIF format not only compresses by removing millions of colors, it also employs the LZW algorithm to keep track of those colors and further reduce

file sizes. A clever web designer can create large images that use little bandwidth by designing with LZW compression in mind. To understand how that is possible, we must take a closer look at how LZW compression actually works.

Onscreen images are like diners inside a burger joint. A mentally challenged waiter says, “The first gentleman at Table One would like a cheeseburger. The second gentleman at Table One would like a cheeseburger. The third gentleman at Table One would like a cheeseburger. The fourth gentleman at Table One would like a cheeseburger.”

This is how a noncompressed image works. The computer looks up the color of a pixel and then displays it. It looks up the color of the adjoining pixel and displays that—and so on and so on for every pixel on the screen.

A smart waiter says, “Four cheeseburgers,” which is how LZW compression works.

LZW compression looks at an image line by line and says, “Row #1 is all red pixels” (assuming that Row #1 actually is all red pixels). Obviously, the greater the number of pixel rows that are identical to each other, the better the compression engine works (for example, four tables of four cheeseburgers). Thus, horizontal and vertical elements compress better than diagonal elements because with horizontal or vertical elements, more rows of pixels can be exactly the same as each other.

Without getting too technical, horizontal lines tend to compress even better than vertical ones because LZW compression “reads” images left to right and line by line, the same way you’re reading this book. If every pixel in a given line is the same color, that line compresses better, and therefore so does the GIF (there’s more to it than that, of course). Ten lines containing

Taking Your Talent to the Web

235

all the same color compress better still. Basically, GIF compression likes large areas of flat color, whether they are confined to a single line or bleed down across several. The main point is that an image containing one or more lines of identically colored pixels will compress much better than the average image whose colors are arrayed at random.

In 1995, when 14.4 modems prevailed, some clever web designers began masking every other horizontal line in an image to maximize LZW compression and minimize bandwidth. This technique of masking images with evenly spaced horizontal lines is known as CRLI compression (www.infohiway.com/faster/crli.html).

What started out as a bandwidth-oriented tool had become a stylistic design fetish by the late 1990s, as newcomers to the field fell in love with the CRLI “look” without understanding its utilitarian purpose as a tool of bandwidth compression. To these designers, stripes were “webby,” and

“webby” was cool. As the Web exploded into public consciousness, consumers and ad agencies seemed to agree with this link between “Web” and

“cool.” The ever-popular striped effect was soon seen not only all over the Web, but also in print and television.

Among many ironies, some web designers exported these striped images in the JPEG format, where, far from saving bandwidth, the technique actually wasted it. They knew not what they were doing. CRLI compression is a GIF thing, baby.

The strengths and limitations of LZW compression are equally profound. For instance, because LZW prefers straight horizontal and vertical lines to all others, Roman type tends to reproduce better than oblique. Roman type is also better at hiding its anti-aliasing artifacts at screen resolutions— another reason it works better onscreen than oblique does.

Considering these limitations of the medium may lead you to set your headlines in Roman type more often than oblique. Of course, Roman type is far more frequently used than oblique to begin with, so this situation is hardly tragic. But you should be aware of it. Oblique type can certainly be used for headlines—we do it all the time—but it never reproduces as well as upright type.

236 HOW: Visual Tools: Compression Breeds Style

You will run into the same difficulty with lines at almost every angle. The 45-degree angle is the exception: It works perfectly with LZW, like a diagonal in a game of tic-tac-toe. As you might expect, 45-degree angles came into vogue around 1999 because they reproduce well on the Web, and within six months they were popping up in print and TV as a meaningless design fetish after everyone had tired of the striped effect. And as you might also expect, many web designers employed 45-degree angles in JPEGs, then saved the JPEGs at the highest possible quality settings to preserve the crispness of their lines. The result: wasted bandwidth.

PNG

The PNG format was developed in hopes of establishing it as an open standard for graphics on the Web—which it now is (see www.w3.org/ Graphics/PNG/). But while PNG was slowly being developed, working web designers had to create websites, and all browsers supported GIFs. In effect, then, GIF is a long-standing, unofficial defacto standard based on a proprietary compression algorithm, while PNG is a nonproprietary, officially sanctioned standard that is not as well supported as it ought to be.

There are two forms of PNG. PNG-8 is an 8-bit format (like GIF). PNG-24 offers 24-bit color (like JPEG), yet its sharpness and quality put JPEG to shame. To create PNG images for the Web, simply choose PNG-24 or PNG- 8, 128 Dithered in Photoshop’s Save For Web dialog box or in ImageReady.

PNG is still not natively supported in enough web browsers, and though support is growing, PNG is unlikely to supplant GIF or JPEG any time soon. For one thing, PNG, while high in quality, is often high in bandwidth as well. For another, while PNG stays crisp in milk (like GIFs do), the PNG format does not support animation. GIFs are therefore seen as more versatile by those who even bother to lift their heads out of their cubicles and think about these issues.

To see why PNG can be cool indeed, if your browser can handle it, visit the Audio site at www.panic.com/audion/faces.php, click any thumbnail, and a PNG image will pop up on the screen. Drag the image from place to place on the page at your pleasure. You can even drag it off screen (as shown in Figure 9.12).