Images

Choose from two standard sizes

Images in case-study web pages should be in one of two formats; half-page size or full-page size. The half-page format is based on the width that a landscape image needs to be to fill approximately half a page in the window of a standard resolution monitor. Full-page format is similarly based on the size a landscape image needs to be to fill the whole page width on a standard monitor. The dimensions for these two formats are 240 pixels wide for half-page format and 480 pixels wide for full-page format. When sizing your images, use these dimensions for the width of landscape oriented graphics and use a height dimension that is proportional to the image’s original dimensions. When formatting portrait oriented images, use either the 240 or 480 pixel dimension as the height with a proportional width.

Use WIDTH and HEIGHT tags

Always include the WIDTH and HEIGHT dimensions in your image tags. Doing so will allow the browser to leave a blank spot for the image when the page first loads then fill in the graphic later. Without WIDTH and HEIGHT included, the browser must load the entire graphic before moving on to the rest of the page. The effect of including these commands along with all the images on your page is that the text of the page loads first, then the images come after. Consequently, viewers can read the text on a page while the images load, making the wait time a little easier.

Provide links to larger images

When using the 240-pixel-width image size, provide a linked larger version of the same image if the larger version contains important details lost in the smaller version.. This is useful to viewers because reducing a scanned image down to only 240 pixels eliminates many small details. A 480 pixel wide linked version of the same image will provide interested viewers the chance to see the details while not slowing the loading of the main page.

Choose image format based on location and type of image

Use interlaced GIF format for images in the body of your write-up, and use JPEG or GIF format for linked larger versions of those images. The interlaced GIF format allows some browsers to load images in successive waves rather than straight from the first pixel to the last. This feature quickly gives viewers a coarse preview of an image and makes the time waiting for a page to load a little easier. Then, choose the file format for linked images according to the type of image you’re linking. For photographic images, use JPEG format. The compression algorithm it uses when saving files was designed to minimize image quality loss in photographic images. Use GIF format rather than JPEG for non-photographic images. GIF format was designed to compress non-photographic images without any quality loss.

Remove link borders

Do not use link borders around images when they are linked to another reference in your study, whether it is a larger version of the same image or another page reference. Users quickly become familiar with the changing pointer icon when moving across an active link, so the border provides only redundant information. Leaving off the borders will also give the page a clean look. The borders around an image are turned off by including BORDER=0 in the image tag.



Use ALIGN, VSPACE, and HSPACE tags

Include the other image formatting commands ALIGN=LEFT, VSPACE=10, and HSPACE=20 in every image tag. The ALIGN=LEFT command forces an image to the left edge of the page, and the text to flow around it on the right then below. The VSPACE=10 and HSPACE=20 commands add some blank space around an image so that the text does not crowd up next to it. These commands make a page more readable by providing enough empty space.

Place a caption next to each image

Provide a caption with each image. Captions should be formatted as one size smaller text and italics to set them distinctly apart from the body text on a page. Use the formatting tags <FONT SIZE=-1> and <I> to accomplish this formatting. Caption text should describe the image and its relevance. Try to make captions more than one line by inserting
s in the text to give the caption extra visual weight. If there is a larger version of the same image linked to a graphic, include the file size and file format in parentheses as part of the caption. Follow the caption text with two <BR>s to separate it from the body text.

Format the image according to its type

When formatting photographic images for use on a web page, create a five pixel white border around the entire image as part of the graphic file. This border helps set the image apart from the gray background of the page. Because of the 5 pixel border on each side of an image, the dimension of the photographic part of an image will actually be 230 pixels wide or high, depending on orientation.

For non-photographic images, use either a transparent or white background, depending on what you judge to look better. A white background is appropriate for graphs where the increased contract helps a viewer see details or numbers. A transparent background is appropriate for sections, plans, or other diagrams where small details are not as important. The transparent background helps give a page a cleaner look and should be used when possible.

Examples

Here is an example of HTML code for an image without a linked larger image.

<IMG SRC="images/sgl_in1.gif" ALIGN=LEFT WIDTH=240 HEIGHT=164 VSPACE=10 HSPACE=20><BR>

<FONT SIZE=-1><I>View of the two-story living room in the Siegel House,<BR>looking southeast into the sunspace</I></FONT><BR>

<BR>

Here is an example of HTML code for an image with a linked larger image.

<A HREF="images/loop_big.gif"><IMG SRC="images/loop_sml.gif" ALIGN=LEFT WIDTH=240 HEIGHT=161 HSPACE=20 VSPACE=10 BORDER=0></A><BR>

<FONT SIZE=-1><BR><I>Section diagram of the thermosiphon<BR>loop in the Siegel House (10k gif)</I></FONT><BR>

<BR>


Comments to author: vitalsigns@
ced.berkeley.edu

All contents copyright (C) 1998. Vital Signs Project. All rights reserved.

Created: 08/26/96
Revised: 09/09/02

http://www-archfp.ced.berkeley.edu/vitalsigns/bld/case_study_style/tech_body_images.html