LINK 1
LINK 2
LINK 3
LINK 4
LINK 5
LINK 6

Affordable Web Site Templates, software, and scripts at Webmasters Profit Pak

Using Web Templates for Web Design: Tips and Best Practices

Image Design Considerations

Optimize images for fast download, when displayed, print, and accessibility.

What: Image optimization is comprised of several components:

Type of Image
Web images are typically JPEG (JPG) or GIF file types. JPEGs are best suited for displaying images, such as photographs, that contain many slight variations in colors. GIFs are best suited for images with large areas of flat color, such as clip art or icons. Both image types can be optimized.

Find an appropriate balance between low-resolution images (for faster loading pages) and high-resolution images (with slower loading pages). Consider the user's modem speed when determining the best resolution. A Web page with multiple high-resolution graphics may take too long for the viewer to download, causing them to look elsewhere for information.

Size of the Image
The larger the image the longer it will take to load. Consider whether a large image is worth the viewer's time to download. An image that is 100 pixels high by 100 pixels wide is actually four times the size of a 50 X 50 image, and will take four times as long to load.

Recurring Images
Whenever possible, reuse graphic images throughout the Web site. Most browsers are set to first look for a file in the computer's cache before attempting to download it again. If it finds it in the cache, no additional download is necessary, saving a great deal of time. Recurring images include page banners, navigational icons, and agency logos.

Computer Monitor Display Setting
Design for monitor display of 800x600 pixels. Images that are intended for on screen viewing, such as e-mail and web sites, should be no more than 800x600 pixels in size. A generally accepted standard for e-mail image size is about 400 pixels wide.

Monitor Resolution
Monitor resolution determines the display size of an image. A monitor's resolution is fixed at either 72 ppi for a PC, or 96 ppi for a Mac. It cannot be changed by the user.

Image Resolution
Use an image resolution that matches the typical monitor resolution for online display.

Image files fall into three general quality categories:

• High resolution - for photo quality print output
• Medium resolution - for desktop printing and full screen viewing
• Low resolution - for e-mail and Web site use

Accessibility
Provide a text equivalent for every non-text element by using the ALT tag. Follow the accessibility guidelines within the Access Washington Style Guide for Accessibility to create accessible Web sites and Web-based applications.

Why: Web images help to improve readability and reinforce the overall message of a site. Distracting or slow loading images may have the opposite effect. Use images appropriately for maximum impact.

Tools/Web Links/Templates: Image Design Considerations