Images, video and audio
Images
Including 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.
Images in downloadable 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.)
Any images used within documents should also be provided to LTS as individual files.
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.
Images on web pages
Images to be used on web pages should be supplied at the highest quality possible. They will then be optimised for the web. The resolution will be reduced to the standard required for ‘screen quality’ - on LTS websites this is 72 dpi.
There is also a standard size for ‘feature’ images, ‘tabbed page’ images and ‘thumbnails’ in LTS websites.
Standard image sizes on LTS websites
Description | Resolution | Size | Example on LTS website |
Feature image | 72 dpi | 200 x 200 pixels | |
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' |
Note - although images are eventually compressed to 72dpi, you should provide original images at the highest possible quality.
Images may be integrated into resources but should also be provided as separate files to support the policy of reuse of content across the LTS Online Service.
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.
To find out more, check out the Copyright and permissions section.
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, 'Sunset on Loch Katrine'.
Examples of title attributes for images
- White cat sitting on a green bench
- Young girl using a mobile phone
- Meldrum Academy's foyer
- Waterfall at night
- 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, for example, 'Photo of the sun setting over Loch Katrine'. 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 for images
- Child’s drawing of a small white cat sitting on a green bench
- Photograph of young girl using a mobile phone
- Image of Meldrum Academy's foyer showing a spacious and modern seating area
- Digitally manipulated photograph of a waterfall at night
- Video stills of physics classroom experiment showing three pupils using a Bunsen burner