Web site handbook > Style guide > Graphics & images

Graphics & images

Graphics should be relevant to the content, quick to load, high quality, and convey their message easily. Graphics include photographs, illustrations, artwork, charts, graphs, etc. If you have any questions contact the webmaster.

Subject relevance to the Web page
Taking photographs
Optimizing
File format
Layout and alignment
Alternative text
Photo credits
Captions
Dimensions

Subject relevance to the Web page

Images can be included on a Web page if it enhances the impression you want to give about the service or illustrates a particular point.

If the image is not easily self explanatory then a caption should be added. Non-background images should have alternative text. See the benchmark document for examples.

Taking photographs

Subject Matter

When photographing people, diversity is key--cultural, racial, sex, age, etc. The goal is to tell the library story. By showing a wide range of people doing activities it ignites a spark.

Photos of people at their desk or in front of a computer won’t do much to help a Web page--it could be anyone anywhere doing anything. The same goes for meetings and rows of heads. Try to illustrate the important subject matter.

Try to get close to the subject. Far away photos can be boring and difficult to understand. For example: If there is a crowd of people at a library event, don't try to get everyone in the shot. Instead zoom in on the speaker or one or two participants.

Cropping photos can sometimes improve them.

Quality

Photos should be in focus with good color range (i.e. not heavily overcast by a single color).

Digital camera photos are perfect for the Web. However, they can easily look very low quality. Make sure you take pictures on the highest settings for resolution; this will also allow some leeway for cropping and sizing.

Do not use the flash unless absolutely necessary. Flash causes poor color quality and shadows. If the room is reasonably well-lit, turn off the flash.

Optimizing

Adjust the brightness and contrast to improve image quality. Color correcting can often improve photographs but should only be done by experienced Photoshop users.

File format

Jpeg

Photographs and images with subtle gradiations of hue and color must be saved as jpegs. Save jpegs between 70% and 80% (high) quality, balance quality with image size.

Gif

Images with a lot of continuous colors, limited palettes should be saved as gifs.

Central Library

Layout and alignment

Place images in a paragraph. Images float right when the image1 class is applied to the paragraph containing the image.

If a caption is needed, type it after the image. The text will automatically position below the image.

Alternative text

Define alternative text using the alt attribute of the img element. Alternative text is used by non-graphical browsers and should describe the image.

Photo credits

If photo credits are required, place them within the alt attribute.

Examples

mom and sons looking at videos - photo by Fred Wilson

2004 Tapestry of Tales storyteller Donald Davis - photo by Barrett Rudich

man looking at newspapers - photo by Kristin Beadle

Source code

Captions

Type captions immediately after the image. Text will automatically align below the image. Keep captions short. Long captions will stretch the containing paragraph and affect display. Use the longdesc attribute of the img element instead of long captions.