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:
- 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.
- 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.”
- 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.
- There is space between the text on the page and the photo.
Here are some examples of poor image selection and placement (using the image below):
- The image faces out, drawing attention away from the text.
- 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.
- 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.
- 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).
Remember when inserting images:
- Make sure your images are appropriately sized and saved for the web before uploading.
- 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.
