Images

Images in a document or web page can enhance its appearance greatly and persuade a web visitor to keep reading.

However, images also increase the size of a document or page, so it will take longer to download or appear. Images also need to be made accessible for all web visitors.

Use these guidelines to ensure that you use images to their full potential.

Image formats

LTS will require specified bitmapped images in high resolution formats and a supply of vector graphics in editable EPS format.

Images and graphics must use a colour depth that is no more than necessary. Use compression and other optimisation techniques to minimise download times. Finally, files must be specified in one of the following formats:

Portable Network Graphics (PNG) version 1.0
Joint Photographic Experts Group/ISO10918 (JPEG)
Graphics Interchange Format.

Images in documents

In order to optimise your document for the web, you should remove any non-essential images.

Any remaining graphics should be compressed to 150 dpi (laser quality resolution) for complex diagrams or images used as part of a worksheet, and 96 dpi for all other images.

Provide alternative text descriptions for all graphics embedded within files - for example images, maps, and so on. (To add alternative text to images in MS Word, right-click on the image, or Ctrl-Click for a Mac, select ‘Format Picture’ and complete the text box under the ‘Web’ tab.)

Note - You may be providing a document whose contents will be turned into web pages, rather than kept as a downloadable document. An example of this could be a case study. In this case, please supply the images separately rather than pasting them into a document. Originals are best, at the highest quality you can obtain.

Image quality and size

Images should be supplied at the highest quality possible and be provided as separate files.

There is a standard size for ‘feature’ images, ‘tabbed page’ images and ‘thumbnails’ on LTS websites.

Standard image sizes on LTS websites

Description	Resolution	Size	Example on LTS website
Feature image	72 dpi	200 x 200 pixels	Supporting Polish pupils in your school
Thumbnail	72 dpi	100 x 100 pixels	Parents as Partners in Learning home page
Tabbed pages (e.g. a case study)	72 dpi	150 x 150 pixels	Early Years case study 'Children make a book about their nursery'

Making images accessible

All images, maps, graphs and other interactive elements embedded on a page or within files require to be accompanied by descriptive text.

There are two types of descriptive text which should be attached to an image:

a title attribute - shown when the user hovers their PC mouse over the image
an alt attribute - shown in the image’s place when the user turns off images in their web browser

Title and alt attributes should be short and descriptive and use sentence case. No full stop is required at the end of an alt tag.

Title attributes

Title attributes are used by people who can see the image and want to read its description - for example, .

Examples of title attributes:

Sunset on Loch Katrine
Young girl using a mobile phone
Meldrum Academy's foyer
Three pupils using a Bunsen burner in a classroom.

Alt attributes

Alt attributes are used by people who have visual or aural impairments and users who have chosen to turn off images/sounds in their browsers. They are more descriptive as they allow users to understand the message an image conveys without having to see the image itself. Alt attributes also appear instead of the image if there is a problem displaying the image.

An alt attribute should be as descriptive as possible - if in doubt, imagine how you would describe the image to someone over the telephone.

The format (for example ‘photo’, ‘drawing’, etc.) should be indicated at the beginning of the alt tag.

Examples of alt attributes:

Photo of the sun setting over Loch Katrine
Photograph of young girl using a mobile phone
Image of Meldrum Academy's foyer showing a spacious and modern seating area
Video stills of physics classroom experiment showing three pupils using a Bunsen burner

Copyright and permissions

Ideally, all images supplied to LTS should be free of copyright restrictions. If copyright restrictions apply, these should be made clear by the provider and the restrictions will be noted by the web content team.

Written permission should be sought for all photos involving members of the public.