Home>Section 1 Main Page>Graphics & Special Effects

Site ID Logo, hyperlink to Home Page

Graphics & Special Effects

"Avoid Unnecessary Graphics. Unnecessary graphics and animations lengthen the download time for a page to the point that people will often get impatient and go elsewhere. Make sure the graphics serve a useful purpose (are not just decorative) and keep them as small as possible. Consider using thumbnails, so that people viewing the page can decide for themselves whether it is worth their time to view the whole graphic by previewing the image in a smaller, faster-loading version." (1)

"Avoid Wide Graphics. If you create wide graphics, portions of the graphic can be cut off if viewers have their screens set to a lower resolution than you did when you designed the site. Many people with 15-inch screens or inexpensive laptops are limited to 800 x 600. So, unless absolutely necessary, keep the graphics narrow enough to fit on the screen without scrolling at a reasonable resolution (800 x 600 is a good compromise)." (1)

"Always Use Alternative Text for Graphics. Many people run their browsers with the graphics turned off to minimize download time. You should always supply alternative text for graphics, especially for graphical navigation controls. Without the alternative text, these readers won't be able to navigate your site." (1)

"Don't Overdo Special Effects. Special effects, such as blinking, fades, dissolves, and animation, can be very distracting if done in large quantities. If you want to call attention to something, use a limited effect, but don't go overboard." (1)

There are two main types of graphics- Clip Art and Photographs.

Clip Art is almost always in GIF format, as it is digitally-created. If you buy a clip art program, or copy clip art from the web, pay attention to how many KB it is in size. If you must use clip art because you find that it really enhances the content of your pages, use it sparingly, and try to keep the images small.

Photographs (both from a digital camera and from a scanner) are almost always JPEG (or JPG) files. If you take your own photographs and/or scan images to place in your web site, you can easily cause problems with BIG FILES

JPEGs can be big (really big) files due to two things:

The image RESOLUTION is too high for having on a web page (i.e. it was taken or scanned with the intent of printing it, so the initial resolution was set for that purpose)

The image SIZE is way too big.

The correct image resolution for displaying graphics on the web is 72 dpi (dots per inch). For printing quality graphics, like photos, the resolution can be 300 dpi or more. So don't take a photo you plan to print and put it on your web site. Make sure the resolution is appropriate.

Don't make images bigger than absolutely necessary. Also, use thumbnail images whenever possible; this is a way of putting a small image on the web page, which links to the full size image if the viewer wants to see it.

Example 1 - less desirable Graphics & Special Effects

Example 2 - more desirable Graphics & Special Effects

Back to Section 1 Main Page