Color Theory and Consistency on the World Wide Web

By / March 24, 2016 / Uncategorized

Creating graphics for the World Wide Web is a very tricky process. Although designers use graphics to enhance their Web sites, many don’t realize that there are numerous issues that affect how their graphics will be seen. In the next several issues of PEI, we will provide downloadable graphics and instruct you in how to handle Web graphics, from creation to color issues and streamlining the use of commercial applications such as Adobe Photoshop and Equilibrium Debabilizer.

The Web is comprised of millions of different computers, which affects the way graphics are viewed. There are many computers that can display only 256 colors at a time. When this is the case, the computer operating system reserves some of the 256 colors to keep them from being changed. These reserved colors are called a system palette or CLUT (color look-up table). Each computer platform has its own specific CLUT. Although the colors within those CLUTs are similar, they differ enough to cause color reproduction problems.

Each operating system has its own specific palette. Mac and Windows have about 40 reserved colors out of a 256 color palette. (UNIX systems allow the applications to choose the palette; therefore, they may have more or less colors available than Mac or Windows.) This leaves 216 colors for a running application to use without interfering with the appearance of the system or dithering the images. With this in mind, a common browser palette has been implemented into Netscape Navigator, Microsoft Internet Explorer, and NCSA Mosaic.

The standard “browser safe” palette consists of 216 colors. It was developed from a 6x6x6 color formula: six color values each for red, green, and blue (6x6x6=216). The other 40 colors are undefined so that the operating system can use its system palette.

Pros and Cons of using CLUT

Although there are many ways to prepare graphics for everyone to view, there are several advantages and disadvantages to the browser CLUT. One advantage is that images created with the browser CLUT can be viewed by all current browsers. Also, images that are index colored through the browser safe CLUT are smaller in size than images index colored with an adaptive palette. Among the disadvantages is the fact that using the browser CLUT can change the colors of your graphics. This can be overcome by using the colors found in the browser safe CLUT when creating graphics or selectively swapping the colors that become unacceptable. Dithering, which may be needed to overcome loss in quality by the change in color, can double the file size (for more information on dithering, see “Imaging Basics,” page 46). The browser safe CLUT is not a practical solution for continuous tone images (photographs, gradients, and images requiring more than 256 colors).

Now that we’ve addressed the underlying issues of color on the Web, let’s look at available graphics file formats on the Web. The primary formats found online are GIF and JPEG. Each format has an application for Web graphics. GIF stands for Graphic Interchange Format, and it’s a standard format for images that was developed to be a device-independent method of storing pictures. GIF allows high-quality, high-resolution graphics to be displayed on a variety of graphics hardware and is intended to be an exchange and display mechanism for graphic images.

GIF is reasonably well matched to inexpensive computer displays, since it can store only 8 bits per pixel (256 or fewer colors), and most PCs can’t display more than 256 distinct colors at once. GIF does well on images with only a few distinct colors, such as line drawings and simple cartoons. A GIF picture file has an extension .GIF. The latest revision is known as “GIF89.” It also supports animation and transparency.

JPEG is a standardized image compression mechanism and stands for Joint Photographic Experts Group, the original name of the committee that wrote the standard. JPEG is designed for compressing either full-color or gray-scale images of natural, real-world scenes because it supports 24-bit images. It works well on photographs, naturalistic artwork, and similar material, but it doesn’t work as well on lettering, simple cartoons, or line drawings. It has the capability of “shrinking” a large file to just kilobytes. Unfortunately, the more the file size is reduced, the more the visual quality is reduced.

JPEG stores full color information: 24 bits/pixel (16 million colors). Therefore, JPEG images look much better than GIFs on full-color hardware. JPEG files are much smaller than GIFs, making them superior to GIFs in terms of saving disk space and transmission. A JPEG picture file has an extension.JPG.

Which is better, JPEG or GIF?

Almost all browsers can view JPEGs, and there are free libraries available to do that, so the remaining browser vendors are very short on excuses. There’s no need to avoid JPEG any longer because all the browsers mentioned previously support JPEGs. Therefore, the question is which format is better for your specific purpose? JPEG is for photographic images, and GIF is for line art, such as icons, graphs and line art logos. You will likely find that JPEG produces smudgy line art and GIF produces large, washed-out photographs.

Among the things you should consider when choosing formats are:

  1. Is it a graphic or a photograph? How many colors doyou need?
  2. Is there a lot of detail, especially vertical lines?
  3. How small does the file need to be?
  4. What are the viewers/browser capabilities?

How to Make a JPEG File

  1. In Photoshop, be sure that the image is in RGB mode. Also, make sure it has been flattened (Layers Palette>Merge Down for Photoshop 4.0) and does not contain any extra channels.
  2. Select Save As from the file menu and choose JPEG. Name the
  3. Users are given a dialog box allowing them to select how much compression to apply to the image (try to not go below Medium image quality. Any lower and artifacting becomes evident). Press Return or click OK.

How to Make a GIF File

  1. In Photoshop, flatten your image and discard any extra channels.
  2. Under the IMAGE menu, select MODE, then Indexed Color.
  3. Palette options:

* Adaptive: allows Photoshop to create a custom palette based on the colors contained in that specific image.
* Exact: chooses only the exact colors of that image to include in the image’s palette.
* System Windows: uses the default 256 colors of the Windows System.
* System Mac: uses the default 256 colors of the Mac system.* Custom: allows you to load a custom-create palette.* Web (Photoshop 4.0 only): selects the 216 color palette from Netscape.

There’s a GIF89 Export in Photoshop 4.0 (available for 3.5) that can be downloaded free from the Web for Macintosh (http://www.adobe.com/supportservice/custsupport/LIBRARY/psmac.htm) or for Windows (http://www.adobe.com/supportservice/custsupport/LIBRARY/pswin.htm). It provides other features, including the transparency setting, as well as which palette to be used, maximum number of colors found in the graphic, and whether the GIF image should be interlaced. Interlacing simply allows the browser to view the lowest resolution first, followed by a higher version.

Color Depth Options

  1. #Bits/Pixel allows you to set the number of bits per pixel or essentially the number of colors when in adaptive, uniform, or custom palette modes.
  2. Other allows you to set a number between 2 and 256 for the number of colors that the image will contain.

Dithering Options

  1. Diffusion: the best form of dithering, helps to preserve gradient effects when using limited colors.
  2. Pattern: uses a pattern to achieve the same effect as diffusion dither with smaller file size, but poorer results.
  3. None: does not allow any dithering of the image, resulting in the smallest possible file size.

 

About Author

Cedric Baird

Back to Top