Instructional Graphics for the Web

Last month I stated that "[g]raphics for use on the web can be both fun and challenging--they can impart much more information than only text. But graphics on the web comes with a price in terms of download times and the amount of space required on the server to house them. Whatever you do in developing or selecting your graphics be sure they serve a purpose by enhancing the instruction. Poorly developed and placed graphics may be a hindrance to your instructional message." Well this month, I will discuss this aspect of instructional design in a little bit more detail.

There are two basic graphic file formats in use on the web today. One is GIF [Graphic Interchange Format (pronounced “giff” not “jiff”)] and the other is JPEG (Joint Photographic Experts Group). GIF images are compressed and are best used on images with large expanses of homogeneous color. Compression is the name of the game on the Internet. However, compression can be hazardous to scientific images. For instance a 525 KB TIFF (Tagged Information File Format) image is usually too large to display on a web page. The download time may take up to 10-15 minutes depending upon the spend of the user’s modem.

A GIF protocol may reduce the size of this 525 KB image to 35 K. But in order to increase the efficiency of the compression, the number of colors in the picture are reduced by eliminating any unnecessary or stray colors. The loss of these “colors” represent the loss of scientific data if the image is one used for a scientific purpose. The compression keeps the file size to a minimum but is limited to a color depth of 8 bits (256 colors maximum) also known as Indexed Colors. The fewer the colors, the better the compression. This compression is most efficient in reducing the file size of line art which usually consist of the “colors” black and white, or graphics, as mentioned earlier, with large expanses of solid colors.

The advantages of the GIF format is dependent upon how it is used. There are two types of GIF formats 87a and 89a-the numbers refer to the year of introduction. The 89a has an advantage over the 87a in that it allows one color to be transparent. Why transparent-it allows the background color of a web-page to show through, giving the page a “clean” form-fitting appearance as opposed to a squared off look showing a different background color.

Another advantage of a GIF image is its ability to be animated, and interlaced. Interlacing is the ability of adding layers of the image to the web-site. The layering effect allows the user to get a sense of how the image will look as it is being downloaded.

Unlike GIF image compression, JPEG (“jay-peg’) image compression is “true 24-bit color.” Dithering the image to 8 bits does not compromise the color quality. However if a JPEG image is displayed on a monitor set to 8 bits, the image will dither to 256 colors. This compression is used for photographs with subtle color changes and depth. The JPEG compression scheme allows the developer to quantify the degree of compression. However this freedom comes with a price for it directly affects the image quality. The greater the image is compressed, the worse its quality, but the smaller the file becomes. The algorithm introduces greater amounts of noise as the image becomes greatly compressed.

Depending upon the purpose of the image, download time may need to be sacrificed for clarity of information (Lynch and Horton, 1999). Since compressing any image causes the loss of information, it is always best to keep the image in its original format.

When displaying graphics on your web-site you must be concerned about the download time. Make sure the image is necessary to the idea or point you are trying to get across. To assist in the reduction of download times, there are programs which can help you reduce the size of the image file without losing information. Studies have shown that if an image, for that matter any web-page that takes longer than 10 seconds to download, may not be seen by the visitor.

In summary use GIF for illustrations (line art) or images with large expanses of color. Save these images as 8-bit color, indexed color, and 72 pixels per inch (ppi). Use JPEGs for photograph, illustrations with many different colors, line art which has expanses of gradient colors or soft edges, etc., and complex or gradient designs, It is best to save these images as 24-bit color, RGB (Red, Green, Blue, and 72 pixels per inch. Make sure that any image to be used is saved in your web development folder.

If you find that you need to provide images to your students in formats other than .gif or .jpg, then it is best to make them available as a zipped downloadable file. To be able to view other types of image files in the browser, special plug-ins are required. The installation of some plug-ins may be beyond the technical expertise of your students. Opening all of the images simultaneously will illustrate the difference in quality