WebMaster Solutions

Web Site Design

The Best Use of Web Graphics

by Kenneth Catto

When used correctly, graphics add to the attractiveness of a web site and contribute positively to a visitor's first impression of the site. However, the reverse is also true. If a web site is unattractive, a visitor will be negatively affected and may click away from the site, never to return.

Use common sense when including any graphics on your web pages. More is NOT better! Don't plaster your site with graphics, clip art, and animated gifs. An excessive number of graphics makes for slow page loading times, clutters the web page, annoys visitors, and makes it difficult for a potential customer to read a sales message.

Only use a graphic if it contributes something to the web site. You may want to include a header graphic for site recognition, a graphic representation of your product, arrows or check boxes to draw attention to important sales points, and a button for your payment link. A footer graphic, buttons for your navigation menu, and/ or a background image may also be added if desired. If you include any other graphics, only do so if they add something positive to your site.

Use only JPG or GIF formats for your graphics as these two formats are used universally on the Internet. Although PNG format is starting to come into use, it is not widely used as it is not supported in all browsers.

There are many places from which you can obtain images. You can use images you've taken yourself, images that you've purchased, or you can download free images from web sites such as Free Images at http://www.freeimages.co.uk/ which offers over 2500 free photos or from Stock.xchng at http://www.sxc.hu/ which has over 100,000 free photos for you to choose from. There are also numerous sites that offer graphics such as buttons, arrows, clip art, GIF's, etc. Some of these are free, others you must purchase. If you do decide to use a free image or graphic, be prepared to spend hours wading through thousands of images or graphics to find the one you want.

For faster page loading, you will need to optimize your images and graphics by reducing them to their smallest size while still retaining their quality. The larger the file size, the more KB it will take up and the longer it will take to load. Don't use any graphic larger than 30 KB on your web pages and always include a height and width attribute in your image tag for optimal download time.

You can optimize your graphics and images with one of these tools:

1) Download PIXresizer, a free image resizer from Bluefive software at http://bluefive.pair.com/pixresizer.htm.

2) Dynamic drive offers a free online image optimizer for JPG, GIF and PNG formats at:

http://tools.dynamicdrive.com/imageoptimizer/.

Use Jpg's for photos and GIF's for other graphics on your web site such as buttons and arrows. Jpg's can use a compression method that does not reduce the number of colors in the image which is why Jpg's are good for photos. GIF's can only use a 256 color palette and are generally better for graphics containing few colors. If you have a GIF with a lot of colors, you may want to save it as a JPG to preserve quality.

The first graphic a visitor sees on entering your web site is your header graphic so it should communicate what the content of your site is about. A header graphic should be part of a web site's identity so use it on every page of your site.

Think of your header graphic as if it were the cover of a book. A book cover is meant to grab the attention and curiosity of the user and entice him or her to open the book. A header graphic has the same kind of purpose. Your header graphic should entice your visitor to stay on your site and have a look around. It should convey the feeling that there is something worth further exploring on your site.

If you are selling a product, include an image of the product. This is especially important for eBooks and software that are downloaded from your site. Since these products are virtual products and not physical ones, your customer will feel more secure about purchasing the product if they can see a book cover or software box.

Use graphics of arrows or check boxes to draw attention to the most important parts of your sales message. Be conservative in their usage. If you use too many, your visitor will start ignoring them and what they point to.

You will need some sort of button for your payment link. This can be a simple "Pay Here" type button or a more complex one which includes images of credit cards along with payment information. Use the type that fits in with the theme of your web site.

Your footer may be just a narrow colored strip or a miniature version of your header graphic. It should always include your copyright information.

Your background image, background color, the colors used in your text, and the colors in your graphics shouldn't clash. The components of your web page should harmonize. Look at how everything comes together as a whole, not at the individual graphics.

No matter how many graphics you use on your web site, they should be appropriate for the theme of your site. If your site is soft and romantic, use pastel colors and muted graphics. On the other hand, if your site screams boldness, use bright colors and brash images.

Graphics can be an important part of any web site design. Use them correctly and they will be come an asset to your site. Use them incorrectly and they will become a burden.

Recommended Reading