We're really impressed with departmental homepages at the moment. There's some very strong imagery being used, to help engage users and encourage them to explore further.
In this post, we thought we'd feature some examples of best practice – and share a few tips for how to make the most of your images.
Preparing an image (size and bleed)
All images should be sized at 960 x 640 pixels at 72 dpi.
You can resize images using free tools such as pixlr.com, if you don't have photoshop or any other dedicated software.
Avoid putting borders or keylines around images – your image should go right to the edge of the frame ('full bleed').
For images with a white background – such as minister portraits – put a light grey overlay on the images to distinguish them from the website's background.
Context and content
Use custom images that are current and suggestive of the story.
For example, if the story is of a minister giving a speech on rail travel you could pick an image of the minister giving the speech, or have an image of something rail travel related. Like this:
Particularly effective images combine both context and content - for example, the below picture was recently used by DfE to illustrate a story about the appointment of a Chief Social Worker for Children by Education Secretary Michael Gove.
Image quality and things to avoid
Use good quality imagery. This doesn't mean images have to be professionally shot - smartphone images are acceptable to use if the quality is sufficient.
If you don't have access to a photo library, great places to start looking are:
- Flickr Creative Commons pages (Go to the advanced search section and click ‘Only search within Creative Commons-licensed content.’)
- Google images (Go to search tools and click on 'usage rights' to find creative commons images)
Whatever image you use, it should not be overtly blurry, grainy, stretched, pixelated or badly lit.
Avoid overusing obvious stock photography like the ones below as they can look cheesy and false. Try not to say too much with the feature images. When in doubt keep the image simple, the subject clear and let the article tell the whole story.
Also avoid using images of marketing material containing a lot of text. In instances like this try use the main image from the marketing material and put the relevant text in the story title and description.
You must always attribute images.
Attribution should appear at the bottom of the content page that the image is associated with, or under the image itself (NB it isn’t currently possible to put text attribution on organisation homepages).
For Creative Commons images, link to the original photo with the person's name and link to this licence with the words ‘Creative Commons’ - eg:
[Photo above by John Smith on Flickr. Used under Creative Commons.]