Factors to Consider When Preparing Graphics for Web

Pages

by Rick Brower and Dr. Jerry Waite

Because of the growth of the Internet and World Wide Web, web pages are

becoming a necessity for businesses that want to stay competitive. A worldwide audience is

available to both small and large companies alike. However, the appearance of your web

pages, coupled with their loading speed, will greatly affect the amount of traffic a site

receives. This will affect the potential customer base for the web page. Some major issues

that should be considered when preparing graphics for a web page are file size, file format,

resolution, image size, and color choice.

File Size

The most important thing you should remember when preparing a graphic is to keep

it as small as possible. Your graphic may look wonderful, but if it is too large and takes

longer than a few seconds to load, most people will not wait around to see it. Size, in this

sense, does not refer to an image’s physical size as you might think. Instead, the size of the

file determines how fast a web page loads. As a general rule, try to keep web graphics

under 30K.

A common misconception among many users is that the file size shown at the

bottom of an image in Photoshop is the size of the actual file. In reality, Photoshop is

displaying how much RAM that the image consumes while it is being displayed.

However, most graphics distributed on web pages are compressed (Photoshop

automatically expands compressed files when opening them). In order to determine the

compressed file size of an image, you can either check the Finder when the View is set to

any option except “Icon” or “Small Icon,” or use the “Get Info” command (which can be

found in the File menu on Mac systems).

Brower & Waite, page 1
 The importance of small file sizes can best be illustrated by the fact that one kilobyte

of information takes one second to download on a 14,400 BPS modem. Therefore, a 150K

file—one that would be considered small to most printers—would take nearly three

minutes to display on the screen. Few people have the patience to wait three minutes to see

a photograph! Therefore, you must consider methods to compress graphic files before

placing them on a web page. Fortunately, file compression can easily be accomplished by

choosing the correct format in which to save the file.

File Formats

Selecting a file format is important both in terms of file size and appearance. The

two major file formats used in web work are GIF (Graphic Interchange Format) and JPEG

(Joint Photographic Experts Group). The GIF file format is best for illustrations and

graphics while JPEG, as its name implies, is mainly used for photographs.

The GIF format uses LZW (Lempel-Ziv-Welch) compression, which looks at

patterns of data and searches for changes along a horizontal axis. LZW compression is a

lossless compression scheme, meaning no information is actually thrown away. When you

save a GIF file, the LZW algorithm checks for color changes along a horizontal axis.

Whenever a new color is found, the file size is increased. An example of the effect this can

have on the size of a file is illustrated by the results of a simple test. An original image,

consisting of a black background and several horizontal white lines, was saved as a 6.7K

GIF file. The same image was saved again, but this time it was flipped on its side so that

the lines were vertical. The file size jumped to 11.5K—nearly double the size of the first

file. The file consumed 56K when noise was added to the same image using Photoshop.

The point to remember is that artwork with horizontal patterns and large areas of flat color

compress smaller than complicated line work or images with vertical patterns.

Brower & Waite, page 2

 Bit depth must also be considered when you use the GIF format. When saving a

graphic in the GIF format using Photoshop, you are given a choice of bit depth from eight-

bit down to one-bit. The bit depth refers to how many colors the image will contain. By

way of example, the same color image was saved using bit depths of eight, five, and one.

The eight-bit image contained 256 (28 ) colors and had a file size of 41.9K. The five-bit

image contained only 32 (25 ) colors and had a file size of 21.5K. The one-bit image,

containing only two (21 ) colors, had a file size of 7.1K. Which bit-depth should you

choose? If you rely on file size alone, the immediate choice would be the 1-bit graphic.

However, the poor quality of the image—caused by an insufficient number of colors—

makes that choice unacceptable. To choose the best bit depth, you have to rely on your own

judgment to balance the file size with how the image appears on the screen. In this instance,

the five-bit graphic looked pleasing and provided the best balance between appearance and

file size.

Even if you use the highest available depth (eight-bit color) when saving a GIF file,

the image will contain only 256 colors. By way of comparison, most computer monitors

can display at least 65,536 colors, color film can record tens of millions of colors, and

humans can distinguish over 100 million colors. To simulate missing colors, eight-bit GIF

images rely on substitute colors, called dithered colors. Images that contain dithered colors

often look noisy or spotted. Because of dithering, the GIF file format is best used when

saving images that contain few colors—like illustrations—and is not appropriate for most

photographs.

Brower & Waite, page 3

 The JPEG format is used mainly for photographs because it offers 24-bit color (224

or 17.6 million colors). JPEG images do not contain dithered colors because the format

provides enough colors to match most of those in the original image. JPEG is a lossy

compression format. Information is removed from the image every time an image is saved

using a lossy compression format. When information is deleted, a loss in quality occurs.

Photoshop allows you to save JPEGs at four levels of quality: low, medium, high,

and maximum quality. Maximum quality images are compressed the least, while low

quality images are compressed the most. For example, a particular color photograph saved

using the maximum quality level had a file size of 16.3K, while the same photograph saved

using medium quality had a file size of 6.1K. When viewing photographs on web pages,

most people cannot tell the difference between medium, high, and maximum quality JPEG

images. Because of this, you can generally save JPEG images for use on web pages using

the medium quality setting and take advantage of the small file sizes that result. While

JPEG images are widely used and are quite suitable for web pages, it is important to note

that the loss of data that occurs when images are compressed using the JPEG algorithm

make those images inappropriate for use in print media.

Resolution and Image Size

Because the medium that will be used to deliver web graphics is the computer

screen, there is no need to use a resolution higher than 72 or 76 pixels per linear inch (ppi).

Computer screens display 72 ppi on a Macintosh or 76 ppi on a Windows machine. When

you prepare an image for a web page, you should be sure to set the resolution and size of

the image. In Photoshop, you set both image resolution and size in the Image Size dialog

Brower & Waite, page 4

box (which is accessed from the Image menu). Set the ppi to 72 or 76, and adjust the size

to match the requirements of the web page. In general, it is best to keep images smaller than

800 pixels wide and/or 600 pixels high because that is the maximum size that can be

displayed on a 17” monitor. Increasing the size or resolution of a graphic above these

parameters only serves to increase file size and downloading time.

Color Choice

Color choice is an important consideration in terms of attracting and keeping a web-

site visitor’s attention. Because the World Wide Web reaches such a vast audience, it is

impossible to know the type of equipment that will eventually display your page. One user

may view your page on a Mac with a 24-bit color display card, while someone else may

observe the same page on a Windows machine with an 8-bit color display card. For whom

should you design? The answer is to determine, as best as possible, what most of your

audience will be using and then prepare the image accordingly. The main problem is

insuring that the color that you intend the graphic to be is what visitors ultimately see on

their machines. Unfortunately, you cannot control the user’s type of computer, monitor, or

monitor settings. Therefore, you cannot accurately predict what your image will look like

on the user’s computer. Although it will never be possible to predict exactly what colors

viewers will see, you can take some steps to reasonably insure that both you and the viewer

see approximately the same image.

Suppose you choose to design graphics to look good on an eight-bit monitor. You

know that you have 256 colors (28 ) with which to work. Of these 256 colors, there are 216

that are considered “browser safe.” The Macintosh Operating System uses about 20 special

colors and Windows machines use 20 different special colors. The remaining 216 colors

Brower & Waite, page 5

are compatible across both platforms and across web browsers. A “browser safe” color

palette can be downloaded from Lynda Weinman’s web site at http://www.lynda.com/files.

Once downloaded, the palette can be loaded into Photoshop. In Photoshop, from the

Windows menu, choose “Palettes,” then select “Show Swatches.” Choose “Load

Swatches” from the pull down menu on the Swatches palette, then navigate to the

downloaded file and choose “Open.” Once the palette is loaded, use the eyedropper tool to

click on a color within the swatch set. The color selected becomes the foreground color

and can then be applied using any of the paint tools. As long as these colors are used, your

graphic will look approximately like you intended it to when viewed on either a Macintosh

or a Windows computer.

You can apply a browser-safe palette to a photograph if you convert it to the

Indexed Color Mode using Photoshop. First, display an RGB image. Then, from the

Image menu, choose Indexed Color. After the Indexed Color dialog box appears, choose

“Web” from the Palette pop-up menu. When you click OK, the image will be reduced to

216 browser-safe colors.

Conclusion

Businesses can benefit greatly from a web presence if graphics are prepared properly.

Insuring that the file size, format, resolution, and color choices meet specified goals will

provide an atmosphere that invites the customer to browse the site and hopefully respond to

what he or she sees.

Brower & Waite, page 6

About the Authors

Rick Brower is a senior in the University of Houston’s College of Technology specializing

in Graphic Communications Technology. Dr. Jerry Waite is an assistant professor of

Industrial Technology at the University of Houston.

Document is 1845 words and 9051 characters.

Brower & Waite, page 7