A Closer View of Web Graphics

Graphics are an integral part of the Web, but the art and science of using them effectively can be confusing for novices and professionals alike. Whether you’re a designer, work on a Web development team, or just want to know why the images on your screen look lousy on one site and great on another, this article will help you choose and use the main graphics formats on the Web today: GIF, JPEG, and a new contender, PNG. In the end, you’ll have some mental ammunition for when people start babbling about "indexing images to 8 bits," or the wonders of adding transparency to an interlaced GIF’s Web-safe color palette.

GIFts and More for Slow Modems — From the beginning of time, GIF (Graphics Interchange Format, pronounced "jiff" as reported in NetBITS-003) files ruled the Web – that is, since 1993. The folks who brought you NCSA Mosaic – and later, Netscape Navigator – used GIF as the ideal base format for graphics because it has built-in compression and displays correctly on 8-bit-capable monitors (which can show only 256 colors at a time). The compression enabled images to zip across 9,600 and 14,400 bits per second (bps) modems – the cutting edge of technology back then – with ease, and the overall format let images display much the same on all systems.

Here at the end of 1997, it’s hard to buy a computer with anything less than 16-bit video (thousands of colors), a 2 GB hard disk, and a 33.6 Kbps modem. However, tens of millions of people still use older machines; and even at 33.6 Kbps, graphics files take time to transfer.

Although the GIF format still dominates, JPEG (named for the body that created it, the Joint Photographic Experts Group) has become a widely used alternative, especially for more "photographic" images. And PNG (Portable Network Graphics) has finally begun to make inroads, especially now that Microsoft Internet Explorer 4.0 for Windows supports a basic version of PNG.

GIF, JPEG, and PNG each have their strengths, but to choose the right one for the right purpose, you must know how they compare in each of several major image file features. Each feature affects how users view images, including whether they look the way you intended, how fast they appear to load, and if they even appear at all. Specifically, you need to be aware of how each format deals with bit-depth, Web color palettes, compression, transparency, and interlacing.

Bit Depth — Image files and computer video systems – a card or built-in circuitry – represent colors by assigning numbers to them. The more digits in that number (measured in "binary digits" or "bits"), the larger the possible number of colors that can be represented. So, a video system that can handle more bits can display or represent more colors. Most color computer video systems can display each of over 16 million different colors – eight bits each for red, green, and blue (known as RGB), or 24 bits overall – but not necessary all at the same time. To the human eye, 24-bit color creates a smooth and realistic image.

GIF files can store from one to eight bits of information for a pixel, meaning that they can contain as many as 256 different colors in the same file, or as few as two. JPEG can store 8-bit grayscale or 24-bit color images. PNG can do both – even in the same file.

However, not all computer configurations can display 24-bit color (millions of colors), so you must account for different bit depths, or the number of bits the computer can handle. If you’re not viewing a 24-bit file or are viewing one without a 24-bit video card, you can see only a limited number of selections from that 16-million-plus color palette. The amount of memory in a video card or allotted to built-in video circuitry determines how many pixels it can display onscreen, and how many bits are allotted to each pixel for colors. This is why some computers are only able to use 8-bit or 16-bit color.

For instance, I have a PowerBook 3400c, which can do 16-bit color when it displays 800 by 600 pixels onscreen. When I go up to 832 by 624 on an external monitor, the PowerBook lacks enough video memory to handle a 16-bit color depth; instead, I’m suddenly limited to 256 colors.

On the other hand, my Windows 95 machine has a Diamond Stealth S220 card with 4 MB of video RAM. It can do 24-bit color at up to about 1,200 by 1,000 pixels.

So what happens when I display a 24-bit JPEG in 8-bit video on my external Macintosh monitor? I get dithering: a pattern of colored dots that tries to fool the eye into seeing a color that the video circuitry can’t display. Dithering can look spotty and grotty, and might not convey the original effect. Fortunately, there are techniques for controlling how an image dithers at the content-creation stage; if done properly, a person’s Web browser shouldn’t have to impose its own dithering. Many Photoshop plug-ins and image editing programs now include the ability to tweak the impact of dithering.

Palettes — Computers can work only with a finite number of colors, defined in sets called palettes. Since GIF can use only a maximum of 256 colors (8-bit), the colors are stored in an "indexed color palette," which contains the limited number of colors selected from the broader range of full, 24-bit color. In many image editing programs, you can open a 24-bit file – which doesn’t have a palette per se, since it can represent every RGB color – and convert the file’s colors to indexed colors.

When creating images for the Web, choosing the right indexed color palette is vital to making your 24-bit image look as good as possible in only eight bits. Many designers pick the "Web safe palette" (also known as the "browser safe palette" or "Netscape safe palette"), a collection of 216 colors that (in theory) should display the same on all machines that have at least 8-bit color monitors. What happened to the other 40 colors? Typically, they’re reserved by the user’s operating system and/or the Web browser being used to view the image. The precise details vary between platforms, but suffice to say the 216 colors in the Web palette are the ones most likely to be shown to users without dithering or substitution.

You don’t have to stick with all 216 or 256 colors if you don’t want to. In fact, the fewer the number of colors, the more an image will compress when saved as a GIF (see below for more on compression). Many image editing programs let you specify a bit depth from one to eight or a specific number of colors from 1 to 256. You can also choose to generate an adaptive palette, which will have the best set of colors needed to represent the image. The image can be converted to its palette either by mapping all colors to ones in the palette, or by dithering.

For images with flat colors (large areas of single colors, like logos, titles, or cartoon-type drawing), you can often get by with just 16 or 32 colors; for photographic images under indexed-color mode, you might have to use the adaptive option to achieve the ideal set of colors; and for displaying lots of different images on the same Web page, using the Web-safe palette for all the images means that all the colors will display correctly. The biggest problem with indexed color involves a situation where an 8-bit monitor tries to display multiple images having different 8-bit palettes: the computer is forced to dither – it can only display a total of 256 colors at the same time, regardless of how many colors are in all the images onscreen at once – and the results can be unpredictable.

As opposed to GIF, JPEG can store 8-bit grayscale or 24-bit color image data, which makes it a better option for storing photographic images that don’t have large areas of flat colors. PNG, the newcomer to the Web image arena, represents the best of both depths: it can store both a "deep" bitmap (16 or 24 bits) and an indexed color palette (8 bits) in the same file. So, in theory, but not yet in practice, on a machine that can display 24-bit color PNG will display the full color version. On an 8-bit machine, it will display just the indexed color data.

When selecting a graphics format, keep in mind that bit depth and palette size relate directly to file size, all other things being equal. A 24-bit JPEG, with minimal JPEG compression can be three times as large as the same file saved as an 8-bit GIF. If you go down to 32 colors for a GIF, the fewer colors means an even smaller file size and overall better compression, too. The larger the file, the longer it takes to transmit – and the longer it takes an older, slower machine to display it in a Web browser.

Compression — GIF, JPEG, and PNG each have a mandatory method of compression built-in. GIF and PNG use lossless methods, which means that the image data after compression and then decompression is identical, pixel for pixel, with the original image.

Lossless compression uses a variety of techniques, including finding patterns in the data (identical series of ones and zeroes) and replacing them with small tokens pointing to the full pattern. Other algorithms look for runs of the same number – like a thousand of "10" in a row – and replace the run with a code that says "1,000 10’s."

JPEG, on the other hand, is lossy, an awful-sounding word coined by engineers. Lossy compression means the compressed image is an abstraction or an approximation of the original information. After compression and then decompression, the file won’t be identical to the original. JPEG has a range of compression options from most accurate (worst compression) to least faithful (best compression), so depending on your setting, you may not even see a difference in the compressed image. Finding the right balance between image quality and file size will be a matter of your choosing (and often a bit of trial and error).

Transparency — One of the great advantages of the GIF and PNG formats is the ability to specify transparency in images, so you’re not stuck with rectangular, opaque graphics all the time. You can specify that a single color or an entire channel – a set of tones – allows images or text behind it to show through wherever that color or tone appears.

PNG allows complex transparency, where you can control the opacity of the PNG image as it sits on top of type or graphics on the Web page itself. This is called "alpha channel" transparency: you use a grayscale image in a separate channel to control what parts of the PNG image appear, what parts are mixed (say a 50-percent value of the image and a 50-percent value of what’s underneath the image), and what parts are totally transparent (allowing the underlying art to show through). This can be as simple as a black rectangle that knocks out a piece of the PNG file to let text show though; or a complex set of tones that blends the PNG image with another image behind it, creating composites – a blend of different images – on the fly.

GIF allows only individual colors to be transparent, making it harder to nicely blend the transition between the GIF image and what’s behind it. (Some image editors only allow a single color, while others will allow several.) When that color (or those colors) appear in a GIF image, the background image or color shows through 100 percent for that pixel. Designers often use this fact to give a GIF a softer edge; they make the background color of the GIF the same as the background color on the Web page where the graphic will display.

Current support for PNG in Internet Explorer 4 doesn’t fully implement transparency features, but when browsers do allow for this, it will be easy for Web page designers to blend photographs and type in a way that seems more photographic – or maybe even more creative. There will be fewer limits in how they can present material on the Web versus how they can currently use image editing programs to create interesting effects.

Interlacing — Interlacing, also called progressive rendering, happens when an image is stored and transmitted in such a way that the computer gradually fills in more detail as the image displays. Designers use interlacing to make images appear to load more rapidly – even though it’s really just a matter of perception.

With progressive GIF and JPEG rendering, the image loads a line at a time, where a line is the full width of the image by a single pixel tall. In an interlaced GIF that’s, say, 16 pixels tall, single-pixel stripes of the image are stored in this order 1, 9, 5, 13, 3, 7, 11, 15, 2, 4, 6, 8, 10, 12, 14, 16. Some browsers will interpolate the missing lines until they fill in, so the image comes into focus slowly as it loads.

GIF interlacing is simply on or off in most implementations; JPEG interlacing has several options, where you can load lines of pixels farther apart in the image. Photoshop, for instance, allows 3, 5, and 6-line interleaving, so it loads every third, fifth, or sixth line, then starts on the next pass through the image until it’s loaded. The more lines, the faster the first pass of the image comes in.

PNG interlacing is two-dimensional (rather than being based on lines), so single pixels are extracted both down and across the image in a regular, progressive pattern. The PNG spec points out that the first pass of a PNG image can display in one-eighth the time of the first pass of a GIF image. You’ll see less detail, but the point of progressive rendering is that people viewing the image can make decisions – click a link, click the Back button, or go elsewhere – based on initial information, without waiting for the image to load completely.

Choosing Formats — The choice is still clear for most online uses. GIF works everywhere and in pretty much the same way. For applications where you’re reproducing lots of photographs – rather than artificial images generated by 3D illustration programs or fancy, rendered type – JPEG is probably more appropriate, because it can represent 24 bits of color and deliver a more photorealistic image. PNG looks to be the wave of the future, with its delivery of features such as complex transparency, great compression, plus support for indexed and full color palettes. However, the delay in supporting PNG in the major Web browsers (Navigator currently offers no support at all) has hindered its widespread acceptance.

[Glenn Fleishman is editor in chief of NetBITS and is currently writing the second edition of Real World Scanning and Halftones, a Peachpit Press book due out in January 1998.]