Images and graphic elements

Images can add to the visual appeal of a web page. However, images also add to the size (and hence load time) of a page and can push valuable content out of sight for readers.

If used they should be sharp and of good quality. To ensure a professional appearance clip art images should not be used.

Please note that text within graphics (such as a diagram or graphically presented table) is not indexed by the site's search engine and hence will not be found through a site search. It is good practice to use images that contain no text; we need to consider that the person viewing the webpage may be using a mobile device so will be unable to read the text on a small screen.

Recommended sizes

Images should be resized to the appropriate dimensions before being brought into the CMS.

  • Banner images (top of the page): 713 wide x 230 high pixels. This is the maximum width for any image. File size should be less than 100kb.
  • Content area images: 290 x 210 pixels

Types of image

Informative

If the image presents information to the site visitor that is not available anywhere else on the page it is considered to be informative and must have appropriate HTML 'alt text' that adequately conveys the purpose and function of the image. We must consider whether the person accessing the page is missing out on information if they cannot see the image, and provide an alternative means of conveying the message.

Decorative

Images that do not present any new information to the site visitor, and whose only function is to add visual appeal to the page are considered to be decorative. Decorative images do not require 'alt text'. They should be aligned to the right of the page.

Sensory

Images of art work and sculptures are examples of sensory images. HTML 'alt text' must be provided which describes the item, names the creator/artist and year of creation.