Color Issues on the Web

To create first-class Web images, you need a basic understanding of how computers define and display color. The explanation that follows should help you design fast-loading and attractive graphics for the Web.

Color bit depth.Computer monitors display color by mixing three basic colors, giving each a separate intensity. These basic colors are Red, Green, and Blue. Depending on how many bits it uses to define the intensities of red, green, and blue (a bit is the smallest unit of data a computer manages) a monitor may be able to display up to 256 possible intensity values for each of these three colors. For your computer to display red, green, and blue using 256 levels each, it requires 8 bits of data for each color channel, and so needs a total of 24 bits of data (3 x 8 = 24) for each colored spot (pixel) on the screen; hence the term 24-bit color.

For reference, here are the additive primary colors:

 #FF0000    (255,  0,  0)    Red
 #0000FF    (  0,255,  0)    Green
 #00FF00    (  0,  0,255)    Blue

And their complements, the so-called subtractive colors:

 #00FFFF    (  0,255,255)    Cyan
 #FF00FF    (255,  0,255)    Magenta
 #FFFF00    (255,255,  0)    Yellow

Not all monitors can display 24-bit color, but those that can are capable of displaying approximately 17 million different colors (16,777,216 to be exact). This yields vibrant, photographic-quality, continuous-tone images. But, on the Web, 24-bit images pose certain problems.

Specifically, since 24-bit images need so much color data, they fill relatively big files which can take a long time to download. Moreover, not all monitors can display full 24-bit images: some handle only 16-bit or 8-bit color (65,536 or 256 colors, respectively). When 24-bit images are put on a system that can only display fewer colors, the system handles colors it can't display exactly by dithering them.

To understand what dithering is, imagine trying to draw an orange using only red and yellow pens. You would do this by putting tiny red and yellow dots close together. This is what is meant by dithering.

Although by no means perfect, dithering often works quite well. Consequently not all images need be 24-bit to look good on the Web. Correctly dithered 8-bit images often look almost as good and are three times smaller. But eight-bit images are confined to a 'palette' of 256 colors.

Netscape Color Basics

The Macintosh and Windows each provide a default set of 256 colors, called a system palette, as a basis for dithering. But only 216 of these 256 colors are common to both palettes. So each of the 40 non-shared colors must be dithered when an image is moved from the Mac to Windows or vice versa. This is something to be aware of, particularly when working with areas of solid, undithered, ungradated color, such as backgrounds, type, and line art, which are those for which dithering is most apparent when it must be applied.

In order to avoid this, and so look the same on Macs and PC's, Netscape Navigator actually restricts itself to a 216-color palette (a 6x6x6 color cube) when your system is running in 8-bit color mode (256 colors on screen). In this slightly reduced palette, the intensity value for each of the basic color "channels" — Red, Green, and Blue, — will always be one of:

          0,  51, 102, 153, 204, 255 (decimal)

         00,  33,  66,  99,  CC,  FF (hexadecimal)

These are the colors which you see in this color chart.

Netscape can display these 216 colors precisely. If you use other colors, Netscape Navigator will dither them, sometimes with results that are not very pretty or predictable.

Click here (or on the palette above)to experiment with the 216-color Netscape Palette.

The following animated image shows which colors in the standard Macintosh system palette are left out of Netscape's standard 216-color palette.

Web Graphic File Formats

Dithering of 24-bit, photograph-like images is unavoidable on systems that display less than 24-bit color depth. The subtle color transitions created by natural lighting and shading effectively conceal most dithering in such images. But dithering is discernable in flat-color areas of images. These are graphic concerns you will need to consider as you decide what file format to use.

Choosing a file format for Web graphics. There are currently two standard graphics file formats or the Web: GIF (the graphic interchange format originally developed by CompuServe as a way to store images in small, easy-to-download files) and JPEG (which stands for Joint Photographic Experts Group, and was developed as a way to achieve high levels of compression in photographic-type images without visibly compromising image quality).

The GIF format works only for 8-bit (or less) images, while the JPEG format was developed specifically to compress 24-bit photographic-type images. JPEG does not work for images less than 24-bit, and it does not work well for nonphotographic images such as illustrations and line art.

Using the JPEG Format. The JPEG format compresses 24-bit images just as well as the GIF format compresses 8-bit images in terms of file size. The drawback is that while these 24-bit JPEG images look great on 24-bit monitors, on 8-bit monitors they are force-dithered into the host's operating system palette. At that point, you lose control over the dithering process, even if you prepared for it by filling flat areas with colors from the 216-color palette. This is because the JPEG compression process introduces noise (dithering) into solid-color areas. This can muddy synthetic-type images and even make them look blurry. Therefore, don't use the JPEG format with flat-color art, type, or images with sharp, well-defined edges.

JPEG offers several compression levels. The more you compress your JPEG image, the smaller the JPEG file will be, but the more image detail you will lose (and this loss is permanent - you can't get the detail back by saving the image at a different compression level). The only way to determine which compression level will work for a particular image is through experimentation. You should save several copies of the file in different compression levels and then reopen them in Photoshop to see the results. Compare the versions and use the most compressed image that has the least noticeable amount of detail loss.

Using the GIF format. If you are not working with 24-bit photographic-type images, you will probably want to use the GIF format for your Web graphics. Here are some ways to get the best results from that format.

First, fill all of your flat-color areas with colors from the 216 non-dithering color palette. Using other colors in non-flat areas of your image should be fine - they will dither on some systems, but it shouldn't be too noticeable. And, if you do use some of the 40 system-palette colors not shared by both platforms, those colors won't dither on at least some of your viewers' systems (computers with 24-bit displays or with the operating system that includes those colors in its system palette).

The GIF format does a good job compressing images, but it can do an even better job if you design your graphics with the GIF's compression system in mind. The GIF format compresses graphics by looking at each horizontal line of pixels and recording the color changes. If there is one solid color that runs the length of a horizontal row of pixels, there is less detail to record. Therefore, the fewer color changes per horizontal row of pixels, the smaller your GIF file - and the faster it downloads. Try not to introduce extra vertical detail or noise into GIF images. If you use stripes or a gradation in your image, make the stripes and the gradation run horizontally instead of vertically.

How to Create Animated Gifs

Gif animation is a lot like film or cell animation. A Gif animation file contains a number of frames that are layered on top of each other. In simple animations, the first frame provides the background and subsequent frames provide the changing image. Gifs are 8-bit or less. The maximum number of colors in a Gif palette is 256. Fewer colors reduce the file size.

Gif Animation Tools.Three main animation tools are currently in use: GifBuilder, a freeware package that is easy to use is the dominant Macintosh program for Gif animation; Gif Construction Set for Windows only, has modules for creating rolling text and special effects; and Gifmation for Macintosh, is a commercial package from BoxTop Software. We will describe how to create a Gif animation using GifBuilder.

Using GifBuilder.GifBuilder is the most widely used scriptable utility for creating animated Gif files. As input it accepts a series of PICS, PICTs, Gifs, TIFFs, Photoshop files, QuickTime movies, and Adobe Premiere Filmstrip 1.0 files. GifBuilder lets you convert QuickTime, PICS, and FilmStrip files to Gif format without opening them by selecting File -> Convert. GifBuilder's Options include pixel depth, color palette, interlacing, transparency, interframe delay, frame offset, looping and dithering. The following steps can be followed to produce an animated Gif using GifBuilder:

Create frames in Photoshop or other program, save them all in the same size and resolution in a named sequence.
Launch GifBuilder. Drag the files from the Finder into the Frames window. You can also add each frame by choosing Add Frame in the File menu. Drag the files into the correct order in the Frames window.
Set options. Set the standard graphic options (pixel depth, palette and dithering); the Gif options (size, interlacing, transparency); and the animation options (interframe delay and position). Interframe delay can be the same on each frame except the last one which should have do delay to account for the loading of the image.
Run the animation. Choose Animation -> Run. Use Command-period to stop the animation. In the Animation window you can move a frame by dragging it or select the transparent color by Shift-clicking it.
Build the animation. Choose File -> Save As. Name your animation with the extension ".gif".
Add an image tag to your HTML page.
Example:
<IMG SRC="gifs/anim.gif" ALIGN=CENTER> <IMG SRC="gifs/construction.gif" ALIGN=CENTER> <IMG SRC="gifs/rabbit.gif" ALIGN=CENTER>

Becomes:

GifBuilder Settings.These settings are a good starting point for creating animations in GifBuilder:


Color Palette:		6x6x6 Netscape Palette
Interlacing:		Off
Dithering:		On for photographic images; 
			Off for drawings with few colors
Image Size:		Minimum size
Background Color:	Black
Looping:		None or Forever
Transparency:		Off
Disposal Method:	Varies

Tips and Tricks

Below are some tips and tricks for using Adobe Photoshop, Elastic Reality, DeBabelizer, and Kai's Power Tools to create interesting layers for Gif animations.

Making Animation Frames in Adobe Photoshop. One technique for creating Gif animations is to create them in separate layers in Photoshop. When you import a multi-layer Photoshop file into GifBuilder, each layer is loaded as a subsequent frame. The Background layer is the first frame. GifBuilder is currently the only Gif animation editor that supports this feature.

Using a Transparent Background. Sometimes it helps your web page design enormously to hide the square boundaries of your Gif animation. This can be done by using a transparent background or by matching the background color of the Gif to the <BGCOLOR> of the web page.

Creating A Rolling Texture Mask Gif Animation in Adobe Photoshop. The first step in creating a rolling texture mask is to create the texture. KPT's Texture Explorer is a good tool for creating textures within Photoshop. Create a full-screen layer containing the final texture. Next you will need to create a text mask. On the layer containing the texture, select "Add Layer Mask" from the layer palette's pop-up menu. You cannot add a layer mask to a background layer, so you will need to make sure your texture is not in the background layer. Select the type tool and type in your text. You can resize your text by using the Scale function. The text will appear white on a black background. Next add a new layer behind the masked texture layer. Fill this layer with the same color as the color of your web page. Now the image is complete and you will need to create your animation frames. Save the file as a numbered sequence beginning with "01.psd", for example. Now you can move the texture around in increments to create the component frames of the animation. To create the second frame, duplicate the image, and click the Merge Layers box. Select the texture layer in the Layers palette and select the entire image by doing a Select All. Using the arrow keys, move the texture 5 to 10 pixels in the direction you would like it to roll. Once you have moved the texture, save a new version of the file as "02.psd". Repeat this process for each frame of your animation, between 12 and 30 frames. After you complete all frames, crop each file down to the size you want for your Gif file. If you have centered you text you co do this easily with the Canvas size command.

Animating with Photoshop Filters. A simple and effective way of creating animations is to incrementally apply Photoshop filters to an image. Some of the most effective filters to use are:

Crystallize - This filter creates crystal-like formations. You can start at a low distortion level and build up to the highest (15 pixels), then return to the lowest level to create an animation.
Displace - This filter uses a displacement map to create the distortion. Try the mezzo effect displacement map with 40-pixel distortion in both the horizontal and vertical axis.
Emboss - This filter can be applied in increasing increments changing angle, effect height (up to 10 pixels) and amount (from 0% to 100%).
Fade-In - Gradually increase the opacity of an image from 0% to 100% using the Opacity slider on the Layers palette for a fade-in effect.
Gaussian Blur - Gradually increase the percentage of blur for an interesting effect.
Median - Median creates a softening effect. Gradually increase the effect and then decrease it, returning to the original image.
Mosaic - This filter pixelates the image making it look like it's made up of large squares.
Motion Blur - Try applying a Motion Blur at a 40 degree angle using 60 pixels at the most extreme setting.
Pointilize - This filter breaks the image into Impressionistic-like points. Try using 5 pixels as the most extreme setting.
Radial Blur - This filter can be used to create a spin or zoom blur. Try using 30 pixels as the most extreme setting.
Ripple - This filter has options for small, medium, or large waves. Try using medium waves and a value of 600 for the most extreme setting.
Shear - This filter lets you pull an image to the right in an animation, then pull it back to the left.
Twirl - This filter creates a twirl effect. Try a setting of 400 in the most extreme frame.
Wave - This is a complex filter with settings for number of waves, amplitude, wavelength and scale. There is also a randomization option which can be used to create interesting animations.
Zig Zag - This filter gives you a choice of number of ridges and the amount of distortion. Try the Pond Ripples setting with 5 ridges and an amount of 10.
Kai's Power Tools - KPT Pixel, KPT Edges, KPT Page Curl, KPT Planar, and KPT Smudge. Try these various filters for various interesting effects.

Using a Morph to Create a Gif Animation. Using a program like Elastic Reality, you can create animation frames consisting of morphs and warps. These morphs can be exported as QuickTime movies (QuickTime movies can then be converted into separate Gif files using DeBabelizer), PICS or numbered PICT files which can be imported into GifBuilder. Morphing can create very impressive fluid effects.

Using a Single-Pixel Gif for Spacing. Sometimes it is extremely difficult to place something exactly where you would like it to appear on a Web page. Using a single-pixel gif for spacing is the best way to quickly place objects on a page. Click here to download a transparent single-pixel dot gif file which you can use for spacing in your HTML documents.
This paragraph uses a single-pixel GIF to create the usual five-space indentation at the beginning. The code looks like this: <IMG SRC="gifs/dot_clear.gif" HSPACE="10">. By using a transparent, single-pixel image, with HSPACE=X and VSPACE=Y arguments in the <IMG> tag, you can position the elements on your page where you want them. The examples below will give you an idea of the differences between WIDTH/HEIGHT and HSPACE/VSPACE.

This has 5 pixels of HSPACE on either side.

This has 25 pixels of HSPACE on either side.

This has a WIDTH of 5 pixels.

This has a WIDTH of 25 pixels.

This has a WIDTH of 25 pixels and a HEIGHT of 5 pixels.

Using HSPACE and VSPACE is preferable, since the image is not actually scaled, and gives you twice as many pixels for each unit you specify.

Click below to jump to another page.

Go Back

Color Issues on the Web