This Web Skills module on images will help you understand the reasons for adding images to your website, where to find them, how to commission a shoot, how to add them to your site and best practice on the page.
Lets get started
1. Why bother?
Show don’t tell
- Photographs on your website support your message.
- Instead of writing long paragraphs to describe what something looks or feels like, try and capture it with an image.
- Images particularly useful for pages targeted at prospective students / staff / alumni – helps you sell the campus and facilities.
- Can really enhance research / news content.
Visual Standards, templates and infrastructure policy
Templates for all pages built within the College’s content management system (SiteManager) have been developed which automatically implement Imperial’s visual standards on colour palette, graphics, fonts, margins, page layout. Images can compliment this look and feel.
Find out more about the visual standards, templates and infrastructure policy.
2. Where to find pictures?
College digital image library
- Nearly 90,000 images covering all aspects of College life.
- Uploads in past 12 months: 20,985.
- Downloads in past 12 months: 24,631.
Add your own images to the library
If you have images of your departmental activities and are happy to share them with the College community, get in touch with your Faculty Web Officer.
Image library copyright
The copyright of these images belongs to the photographer. They are licensed for Imperial College London non-profit use only.
- Do not pass them to a third party for any other purpose.
- If using in print, please credit the photographer. You can find this information in the image's tags and meta data.
- Any queries contact firstname.lastname@example.org.
There are various online image libraries, but they may have cost implications.
- Read the rules – make sure you have permission to use image and acknowledge copyright when necessary.
- Don’t just copy and paste images from the web (e.g. Google images, wikipedia etc) and check copyright before using anything that isn’t yours.
3. Commissioning photography
4. What style of photo?
- Clearly show faces, show emotion or ensure to show how people interact with what they are using.
- Move the camera around and take a variety of shots including; landscape, portrait, close-up shot, medium shot and long shots.
- Decide what kind of shot you require before arriving to take the picture. Choose from a portrait shot (head and shoulders), an academic action shot (full length in their teaching environment) or a research action shot (with equipment in a lab).
5. Taking your own pictures
- Try to integrate Imperial name /logo. (No competitor's name!)
- Stay safe.
- Be natural.
- Who? What? Where? When? - write it down.
6. So you’ve got your pictures, now what?
College image crop tool
Find out how to upload an image using the Image crop tool.
- You do not need to re-size your images before uploading them! The image crop tool in the editor will help you to do this.
- The following upload formats (file extensions) are all acceptable: jpg, jpeg, gif, png, tiff, tif, JPG, JPEG, GIF, PNG, TIFF, TIF.
- As the site is responsive across devices, images can display at up to four times their size.
- Upload an image that is at least double the desktop size, if not at least four times the desktop size.
- The higher the quality, the better your image will be. Any small images that you try to increase in size will appear pixelated and grainy, so try and find an image in its original size where possible.
- The current maximum upload size is 24 MB.
- Alt text - describe the image, not the page, this helps with accessibility.
- You can make images links – highlight picture and use link wizard.
- Take quality seriously – blurry, stretched image can have big impact on user view on your content.
- Make your pictures add value to your content.
- Don’t just use the Queen’s Tower! Images should be relevant and enhance the written content.