Purpose and Guidelines for Effective Use of Web Graphics

Purpose of graphics in web design

1. Graphics add visual/aesthetic appeal to the information on the web page, helping to maintain viewer interest and attention
2. Help to create visual structure for information and links on the page
3. Communicate or explain ideas visually

Guidelines for effective use of web graphics

1. Graphics should fit in with the purpose, organization, and style of the page. They should enhance the design, structure, or informative content of the web page without distracting attention. As much as you may want to add an image to a page because it shows off some fancy new effect you learned in the graphics program, think first about whether it fits in or not. You may want to keep these types of graphics in your personal portfolio under the heading, “Cool Effects I Know in My Graphics Program.”
2. Avoid using graphics with large file sizes that add to the load time of the page. Also, consider the cumulative file size of all images on the page. Excessive “page weight” caused by poor image use can result in slow load times for pages. According to the Yale University Web Style Guide, 2nd Edition, "At today's average modem speeds most pages designed for users dialing in from home should contain no more than 50 to 75 kilobytes of graphics."
3. Graphics should help to guide the viewers’ focus to the important content on the page. Using visually strong graphic elements on a page can be useful in directing viewers' attention and providing structure for the page. Be careful, though. Strong graphic elements can also pull attention away from central content or compete with one another on the page. This results in the page appearing overly busy or cluttered and makes it difficult to read. Remember, if you attempt to emphasize everything then nothing ends up standing out.
4. Avoid repetitive use of overly bright or potentially “obnoxious” images. These types of "eye catching" images may be attractive at first, but after the novelty wears off, they may cause viewers to lose patience with the site. While an animation of a dancing monkey may seem interesting and funny at first, over time it may become annoying and drive viewers away.
5. Avoid the use of graphics to convey textual content information. While it may be tempting from a design standpoint to use images for textual information because of the greater number of design options such as font choices and text effects, graphic based text presents a variety of problems: Images of text can't be resized like true text, so users with poor vision are unable to resize it to meet their visual needs; images require much longer to download than text; users can't search for images of text using their browser's find feature; and search engines are better able to index websites that contain actual text, well-structured with HTML.
6. Provide textual equivalent alternatives for graphic content. Remember that not all users are able to see the images on your web page. Whenever images are used, it is important to provide equivalent content or descriptions of the image in a textual format. The most common way this is done is to provide descriptive text using the alt attribute. This is especially important where images are used as navigation buttons or links. For a more in depth look at using alternate text with graphics to improve accessibility, read the section on Graphics Markup within the Web Style Guide.
7. When using text in graphics, make sure there is sufficient contrast between the text and the background color. Design graphic elements so that users can easily distinguish the text from its background. Also, be sure to avoid color combinations (reds and greens for example) that color blind users will not be able to distinguish apart from one another.