Definitions
General Policy
Policy Authority
Right to Use University Resources
Approval
of New Sites
Required Elements
Off-Campus Vendors
Personal Pages
Security
Servers
and URLs
Responsibilities of Server Administrators
American's with Disabilities Act Compliance
University Templates
Validating
and Testing
Web Design Tips
Web Design Tips
Images
|
Images create interest and engage the user. They can also convey information (a picture, or course, is worth at least a thousand words). When it comes to images, your Web pages must walk a line between distracting eye-candy and text-heavy boredom. Too many images, and your pages may be overly busy and slow to load. No images, and your page may appear uninteresting and unpolished. There are several types of Web images: |
Only pages at the "lowest" level of your site (e.g., a specific page from a research report) can afford to be completely image-free. If you are using University templates, a collection of standard images is provided to you.
Photographs
Photographs can be scanned in from various sources, or they can be images taken with a digital camera. Before using any photograph, be sure the image isn't copyright protected, and if it is, be sure to get permission from the owner.
 |
Rule of thumb: save photos as JPEGs. |
Photos can convey specific information important to your Web page (e.g., a photograph accomanying a news article). Or, they can simply help set the "tone" of the site, or draw the attention of the user.
Photos also increase the file size and download time of your page. Do not add photographs just because you can. If the photo does not provide useful information, enhance the page design, or convey a sense of tone, don't use it.
Before using a photo or other graphic on your site, you must correctly size the image using a program like Photoshop or Photoshop Elements. All images on your Web pages should be saved at a resolution of 72 dpi (dots per inch). Most photos that were originally used is print publications have a much higher resolution of 150 to 300 dpi. These higher resolutions create larger image files and slower download times for your users. Also, do not rely on width and height attributes in your page code to set the size of your images. Size your photo correctly in Photoshop first, then upload it to your page.
|
Rule of thumb: When resizing images, ALWAYS make large images smaller. NEVER make small images larger. |
Clip Art*
Clip art, buttons, bullets, icons — any and all of these types of graphics can enhance the look and navigation of your Web site, IF they are used sparingly and consistently.
The "thumbs" and the camera on this page are examples of clip art. They help set the "tone" for the site (informal but educational — hopefully!), but the "thumbs" in particular also help users scan for basic information.
|
Rule of thumb: save clip art and simple graphic as GIFs. |
Bullets, buttons and icons can add to the overall design of your page, and are also useful as navigational elements. For example, a homepage button like this 
can replace a text link back to your homepage. Consistency is key; if you use a homepage button on one page, use it on all.
Tables and Graphs
On the Web as in print, it is often better to present large amounts of data in a table or graph, as opposed to text. If you save your table or graphic as an image (e.g., a GIF or JPEG file), then be sure to provide a link to a text-only version of the data for users who cannot read images.
Imagemaps
Images can be used as links just as text can. And normally, a linked graphic takes your user to the same URL no matter where in the graphic they click. With an imagemap, one image contains links to several different URLs depending where the user clicks. Information Technology Services offers a guide to creating imagemaps.
|
Rule of thumb: for imagemaps, choose images with clearly defined sections and/or borders. |
It should be obvious to a user that an image contains multiple links, and it should be obvious where each section of an imagemap will take them. Don't make your user play hide-and-seek.
When using imagemaps in your site's navigation, include a text alternative for users with visual disabilities.
*All the clip art and graphics used on this site come from Microsoft Design Gallery Live. Any valid license holder of Microsoft Office 95 or better, for Windows or Mac, may use clip art from this site.
