You are here: Home >
Web Content Blog
» Main Page
» Archives


Friday, September 28, 2007
Positioning images effectively

Using images on your web pages can add visual interest and information. Placing them effectively will add to the professionalism and usability of the page.

In the first image below, the selection and placement is effective for several reasons.

  1. Its size is appropriate for the text it is accompanying - it is not taller than the space taken up by the two paragraphs, nor is it too wide. 
     
  2. Its subject is suited to the topic of the text: undergraduate academics. The photo of the young man on the computer says, in effect, "Here is one of our students studying."
     
  3. It shows the person in the photo looking in towards the content of the page. Our eyes instinctively follow the direction of the focus of the image. With some images, there is not a clear direction to the content. But when the image is a close-up of a person, the person ought to be facing in towards the page if possible.
     
  4. There is space between the text on the page and the photo.

Example web page with image

 

Here are some examples of poor image selection and placement:

Below, image faces out, drawing attention away from the text.

What not to do: image facing out

 

Below, the text has not been set to wrap around the image, so the text does not start on the page until after the image. This leaves a large area to the right of the image unused.

What not to do: text not wrapped

 

To adjust the photo alignment and wrap the text, use the "Styles" dropdown box in the toolbar, then you can choose where to place your photo.

Below, the image chosen is almost as wide as the page, causing the first paragraph to be one or two words per line. The text is a little too close to the edge of the image. The subject of the image (worship or spirituality) does not fit closely enough with the subject of the text (academics).

What not to do: image too large

 

Remember when inserting images:

  1. Make sure your images are appropriately sized and saved for the web before uploading.
     
  2. Enter alternative text (also called an "alt tag") as a brief description of the image. This helps people with visual impairment to access the content using assistive technology. It also provides a description of the image should the actual image be missing from the page.

The "Preview" in the "Image Properties" box will let you anticipate what the image will look like on the page as you manipulate the options in 1 and 2.

Image Properties box

 


 
Posted at 10:09 AM | Comments (0)