Introduction

Images can make or break a web site. Many web sites abuse the use of images. In this section, we'll go over several misuses of images that should be avoided in proper web design.

Overuse of Images

The most common problem with images on a web site is overuse. Too many images will clutter the page and confuse the user, in addition to increasing the load time of the page. Users do not want to wait for their content. People want to find what they looking for in 7 seconds.

This is a great web site to check out Load time.

Overcrowdedness at it's finest. The load time for someone on a 56k modem is somewhere from 30-60 seconds. Once the site is up, no one can figure out what to do with it.

When Should Images Be Used?

Ask yourself : "What does this image do for my site?"

If the answer is "It looks cool", or "I just love the picture", you had better try again.

Images are mostly a tool to supplement content. They usually are not content themselves.

The key point to remember: If you can't think of a reason why a user would want the image on the site, do not put it in.

Parson's Situated Navigation --This site is a perfect example of how to have an aesthetically pleasing design with only a few images. The load time for this site is quite short for even 56kmodem users, but very bearable given the amount of content on the page.

Proper Size and Format of Graphics

Just about all web images are pixel formatted graphics: arrangements of tiny, single- colored pixels -- as opposed to vector graphics: mathematical equations representing shapes. Probably, very soon in the future, most graphics will be vector-based, eliminating the resolution problems below.

This current pixel formation inclination creates several consistency issues for web graphics. The first of these is file resolution:

Pixel-formed images have a setting telling the computer how many pixels per inch are in the image. Because most monitors show images at a low dpi (72 dots per inch), any image meant solely to be displayed on the web should be at 72 dpi. Higher resolutions may simply spread the image across the page, unless they are constrained by coding.

If the image is meant to be saved to a user's hard drive and printed, a higher dpi may be necessary, so the higher resolution should be hyperlinked and stored on another internal webpage specified for printing.

            

The three images above are all saved at different resolutions. The left one has a low resolution of 23 dpi, which is why it appears blurry. The center image has the correct 72 dpi, while the one on the right is set to a dpi of 200. As you can see there is no discernible difference between the center and right images.

Every web image should be in *.gif or *.jpg format, the current standard web image file formats.

Choose .gif as your format if you do not have many colors, or you want a transparent background in your image.

If your image has many colors, .jpg is the better file format.

Photoshop is a wonderful program for editing images and preparing them for the web. A quick tutorial on Photoshop is available at Lehigh's IMRC web site.

Other graphic file formats will also work, but are relative to more advanced forms of web authoring -- for instance, Macromedia web authoring systems such as Dreamweaver and Fireworks use .pngs, which contain vector graphics and are therefore more scaleable.

Proper HTML Formatting of Graphics

Image size should be set for every graphic. If you don't know HTML and are using a graphical program such as Composer, Front Page, or Dreamweaver; finding the properties setting for the image will usually let you set the attributes.

The physical size of the image tells the browser the height and width of the image before it is loaded.