Designing Web Graphics

Speed

Web images give the web it's pizzazz. Web graphics can however make the display of a web page take forever. Designers need to be cognizant of the amount of information that browsers download. Ideally web pages should display in 10 seconds or less. Users with slow modem connections, 28.8 baud or 56 baud, still comprise the majority of net users. As of the spring 2000, only 10 percent of web browsers have access to internet connections such as DSL, cable modems, or T1 lines. To minimize user frustrations, most web pages should limit the amount of information presented to between 30k and 50k.

Resolution

Graphic images need to be saved at 72 dpi (dots per inch). Higher resolution cannot be effectively displayed on computer monitors. Higher resolution increases the size of a graphic and the time required to transfer the graphic to the browser.

File Types

The most popular browsers support a limited number of file formats. They are:

GIF - GIF and transparent GIF file formats display a maximum of 256 colors with no loss of image format. Transparent GIF files allow the image to appear on top of the background without a square box to frame the image. GIF file formats are generally appropriate for line art and drawings that don't display a high degree of tonal gradiations.
Jpeg (jpg) are most appropriate for displaying photograpic images that display many levels of tonal gradiations. Most photos fall into this category. Jpeg images can be saved with compression techniques that limit their size. Compressed Jpeg files lose image quality as the degress of compression is increased. Image editors need to experiment with the degress of compression that results in the smallest file size and best image quality without excessive loss of image detail.

Image Size

Images that display filling the full screen can be extremely large. Generally web designers limit the size of images to small pictures to keep file size small. If a large image needs to be displayed, ofter thumbnail (small) representations presented that the user can click on to bring up a window with a large image.

Image Clarity

Sometimes images appear jagged when they are reduced in size or resolution in preparation for the web. This is because of anti-aliasing. If the image is jagged, try saving the image with anti-aliasing turned off. Sometimes images saved in Jpeg will be less jagged than if the image is saved in GIF format.