Images
Please email the Web Team if you would like to discuss any aspect of image use on our website.
- Choosing an image
- Resolution and sizes
- Captions and function
- Style on page
- Use of animations and video
Choosing an image
All graphics or images on the NERC website should have their copyright owned outright by NERC, be owned by a NERC research centre or facility, be obtained for that specific use (on a public website), or be copyright free.
When sending images to the Web Team to use, please ensure that you:
- include the copyright status
- provide an image whose resolution is the same or larger than how it needs to appear
- provide a caption, including time, location and names of people
Use NERC copyrighted satellite images where possible because we can write: copyright NERC Dundee Satellite Receiving Station, University of Dundee.
Resolution and sizes
For crisp, clear images it is essential to have adequate resolution, of at least the same resolution as actual size on the site. Resizing down is fine - image quality does not degrade. Resizing up should be avoided - crisp edges and any text become visibly blurred very quickly.
Unless page layout precludes it, all images should be produced to the following set of standard sizes - in pixels width x height:
- banner images: 780 x 170
- landing page images: 338 x 150
- portrait shots (small): 70 x 100
- A4 publication covers (standard): 110 x 155
- A4 publication covers (small): 60 x 85
- A4-DL leaflet covers: 59 x 165
Sometimes the page template doesn't allow an image to be included at a large enough size to see relevant details. A way around this problem is for the Web Team to include a smaller image (just large enough to give an impression of what the image is) as a "thumbnail" - and to set this as a link to the full size image (including a warning on the data size of the image as with any download file).
Captions and function
All images should be given a caption, and where they are used as a hyperlink or other specific function this too should be described. HTML allows images to have two main descriptions:
ALT - this is essential for all images, and should be a basic description. We prefix certain image types with a label, such as "Logo:", "Cover:" (for publications) or "Diagram:" - the rest of the text should be a concise but clear description. For text as an image, it should be precisely the same wording.
TITLE - this optional additional attribute provides further information about an image object that may not be directly related to what the image is showing. Use this where you want to make a point rather than simply describe the image or if the image performs an additional function (such as being a hyperlinked button - in which case the TITLE describes what will happen when the link is followed - 'images links to external site' for example).
When supplying an image, please make sure you also supply suitable text for the "ALT" and (if necessary) "TITLE" attributes.
Style on page
The Web Team will ensure consistent style on pages. Images should be used without any border unless there is a strong design reason for adding one.
The caption should appear beneath the image and separated from text below using the "underline" style, unless the image is at the bottom of the page in which case the caption should appear above the image, and the preceding paragraph have the "underline" style applied.
Images that are less than a full column width (338 pixels) should be sized narrow enough to allow a narrow column of text to appear alongside. Use "DIV" tags and stylesheet classes to position and style these elements.
See the research highlights for examples.
Use of animations and video
The designers of the website were given a brief to develop a style that was uncluttered, clear and restful on the eye. To maintain this approach, animated graphics or video should not be used to draw attention or as a promotional device.
Animations or video can be used where they illustrate a specific point (such as a diagram of ocean circulation) that would be hard to show with still graphics. They play through only once (not looped repeatedly), and start of playback should be under the control of the user where possible.