Web Resources and Guidelines

Using graphics on your Web pages

Graphics, especially photographs, make your Web site much more attractive and interesting. Our pages should use graphics whenever appropriate. However, if used incorrectly they can cause your pages to be slow to load, make it harder to see the information you are providing, or reduce the accessibility of your page. Follow these guidelines when using graphics:

• For fast page loading, don't use more then one or two photographs per page.
• Only use logos and trademarks that have been approved by our Marketing and Communications.
• Don't use graphics as a replacement for text.
• Always provide an ALT tag and a TITLE tag with every graphic element to describe the graphic or provide a text translation.
• Never use height and width dimensions to scale your graphic. See below on preparing your graphic for the Web.

Preparing your graphics for the Web.

You can't simply use a photograph as it comes out of your digital camera. It must first be scaled, optimized, and saved in the correct format.

Scaling graphics

Graphics should be scaled to the exact dimensions that they will be displayed on your page. After taking a raw photograph from a digital camera, you may first want to crop it to better focus in on your subject matter. In general, close-up pictures look better on the Web than distance shots. Then scale the image appropriately. For most Web pages, the width will be the determining factor. On SOU's typical layout, a picture should be no wider then 336 pixels.

Optimizing graphics

Most photo editing software will have a “save for the Web” option. The idea is to reduce the quality of the image so that it loads faster. Computer monitors normally display 72 dpi (dots per inch), while images for print need to be much higher. On the Web, a 300 dpi image will not look any better then a 72 dpi image yet will take three times as long to load. Check the file size. An optimized 300x300 pixel photograph should only be about 20KB.

Choosing the right format

We support three graphics formats on our Web site:

SOU Logos

Marketing and Communications provides logos for download