Purpose and Guidelines for Effective Use of Web Graphics
Purpose of graphics in web design
- Graphics add visual/aesthetic appeal to the information on the web page, helping to maintain viewer interest and attention
- Help to create visual structure for information and links on the page
- Communicate or explain ideas visually
Guidelines for effective use of web graphics
- 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.”
- 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."
- 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.
- 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
- 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.
- 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.
- 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.
Copyright © 2005-2008 by University of Washington.
Permission is granted to use these materials in whole or in part for
educational, noncommercial purposes provided the source is acknowledged.
This product was created with support from the National
Institute on Disability and
Rehabilitation Research of the U.S. Department of Education (grant
#H133D010306), and is maintained with support from
the National Science Foundation (grant #CNS-0540615). The contents do not
necessarily represent the policies of the U.S. federal government, and you
should not assume their endorsement.