Technical Issues

In this section we address some technical issues concerning the manipulation and display of images on computers: (1) image resolution, (2) representation of colors, and (3) the effect of "color dithering". Of necessity, this discussion will be a little more arcane than most in the Tutorial. Don't fret if this causes a problem. It is not essential to understand all of this discussion in order to implement basic image use on the Web. However, it is useful to know some the of the terminology, and these concepts are important if you wish to do sophisticated things having maximal visual impact with Web images.

Image Resolution

A computer monitor screen is divided into discrete picture elements ("pixels" in computerese). You can think of the screen as being composed of a grid of these elements. A monitor screen's resolution is a measure of the fineness of this grid. We say that a monitor with a large number of pixels per inch both horizontally and vertically has a higher resolution than a screen with fewer pixels per inch horizontally and vertically.

This should be borne in mind when constructing in-line images for Web pages. GIF images (and JPEG images) have a certain pixel size. As a result, they will display physically larger on a low-resolution screen than on a high-resolution screen. For example, an in-line GIF image that is 700 pixels wide will display in-line on only a fraction of the full screen width on a high-resolution 1280 x 1024 pixel, 17" monitor, but the same image will be larger than the entire screen on a lower resolution 640 x 480 pixel, 14" monitor.

Since many less-expensive personal computer displays have only 640 x 480 pixel resolution, it is a good rule of thumb to keep in-line images smaller than about 600 pixels in width, to ensure that they fit in the browser display without scrolling when users with lower resolution screens access your Web pages. If you use frames, as in this Tutorial, you have even less screen real estate available for the main window display. For example, in this Tutorial, we have tried to limit in-line images to about 400 pixels in width so that they display without horizontal scrolling in the main frames window for smaller, lower resolution monitors. Of course, one also must ensure that the image is large enough for detail to be legible.

The preceding considerations concern in-line display. If the image is displayed by an external viewer they often scale the image automatically to fit the available display size. Thus, one need not be as concerned about the size in this case. In the case of either in-line or external viewer display, another important consideration is the size of the image in the computer memory sense: how many bytes of data are required to represent the image. This generally increases with the size of the image and the number of colors used; naturally, download times are minimized if these are kept as low as possible, consistent with quality and legibility constraints.

Image Colors

Good use of color graphics can greatly enhance the appearance of your Web pages. We don't propose to offer a course in the aesthetics of graphics art here; we only want to make you aware of a few points that will help you in your creation of graphics for use on Web pages.

The RGB Color Model

There are several different "color models", or ways of creating colors. One of the most commonly used is the RGB model, whereby a color is defined in terms of its red, green, and blue primary components. For instance, pure red is 100% red, 0% green, and 0% blue. Similarly, pure green is 0% red, 100% green, and 0% blue, and pure blue is 0% red, 0% green, and 100% blue. In this model black s 0% red, 0% green, and 0% blue, and white is 100% red, 100% green, and 100% blue.

In some graphics programs you are able to create "new" colors to use in your artwork by simply specifying the percentage of red, green, and blue you need to use to create the desired color.

8-Bit Colors

In many cases graphics software makes use of "8-bit" colors. In this case a red, green, or blue component of a color is specified in the computer's memory as an eight digit binary number. Without getting too technical, just realize that this means that since each of the 8 binary digits (or "bits" in computerese) can have two different values (i.e., either 0 or 1), there are 2x2x2x2x2x2x2x2 = 256 possible different values for the 8-digit binary number. What this means in practical terms to you is that such graphics programs are capable of defining 256 different "degrees" of red, 256 different "degrees" of green, and 256 different "degrees" of blue. By convention, each of these 256 degrees of primary color is labeled by an integer from 0 to 255. Since any given color is a combination of its red, green, blue components, this means that such graphics programs are "limited" to being able to differentiate 256x256x256 = 16,777,216 different colors (which is not really so limited, is it?).

Hexadecimal Notation for Colors

At the risk of getting too technical again, let's just note that another notation is often used in displaying the R, G, and B components of an 8-bit color. The 8 binary digits used to define a red, green, or blue color component can also be thought of as consisting of two sets of 4 binary digits. Now since each binary digit can have 2 different values, each of these sets of 4 binary digits can have 2x2x2x2 = 16 different values. (Note that the total number of possibilities for the two 4 binary digit sets is 16x16 = 256, the same total number of different possibilites that we got when we considered the red, or green, or blue component to be determined by a single 8 digit binary number).

Since each of the 4 digit binary numbers can have 16 different values, it is convenient to assign a unique "name" to each of the possibilities. The name that is conventionally assigned is just the numerical value of the 4-digit binary string, but the numerical value not as it would be represented in traditional decimal notation, but rather in hexadecimal notation. Note that this notation is perfect for the task at hand because while in a decimal "base" numbers are represented in terms of 10 unique digits (0, 1, 2, 3, 4, 5, 6, 7, 8, 9), in hexadecimal notation numbers are represented in terms of 16 unique digits (conventionally represented as 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f; the letters are sometimes shown as lowercase and sometimes as uppercase). Thus each R, G, and B component of an 8-bit color can be represented as a sequence of two hexadecimal (or simply "hex") digits.

In this notation 0% of R, G, or B is represented as 00, and 100% of the component is represented as ff, because 00 is 0 in base-16, and ff is 255 in base-16. Some graphics programs (used for professional graphics arts work) use 24 binary digits for each of the red, green, and blue components of a color, and hence are able to diffentiate a vastly larger number of different (24-bit) colors. It is highly unlikely that you will free unduly restricted in your use of color graphics if you use a graphics program that uses 8-bit colors.

Color Dithering

This topic, like the previous one, will again concern rather technical issues that are not essential to basic image use, but are relevant if you aspire to design Web pages with ultimate image quality.

Are Your Images in a Dither?

You should be aware that although you can create over 16 million different colors with 8-bit graphics software, not all of them will display well in most browsers. Web Browsers make approximations when they try to display certain colors; when this happens, you will observe the results of "dithering". In practical terms this means that the new color you created that looked so good in your graphics software may look quite different when used on a Web page and viewed with a browser. When this happens, you will see what appears to be a speckled combination of several different colors in place of the one single color you'd hoped for. This effect is most noticable on lower-resolution monitors, where the pixels are larger. On high-resolution monitors the dithering effect may be almost neglible for many cases.

Non-Dithering Browser Colors

Browsers like Netscape are designed to display certain RGB color combinations without dithering (this is associated technically with what is called the "Color Map" for the display). In the case of Netscape, there are 216 such combinations of R, G, and B that are displayed without dithering. Thus, if you use only these "safe" colors in your images, they should display as solid colors, without the speckled pattern associated with dithering.

It is probably easiest to describe the "safe" colors you can use to avoid the dithering problem in terms of the two-digit hexadecimal representation of a color's R, G, and B components that we described in the previous section. The bottom line is that you will not have a dithering problem if you use one of the following (and only one of the following) values for each of the hex digits of an R, G, or B value: 00, 33, 66, 99, cc, ff. This corresponds in decimal notation to using only multiples of 20% for each basic color (R, G, B): 0%, 20%, 40%, 60%, 80%, and 100%. Thus, a color that is 20% Red, 40% Green, and 40% Blue will not dither, but one that is 10% Red, 20% Green, and 40% Blue will be subject to dithering.

Next   Back   Top   Home   Help