https://insidegovuk.blog.gov.uk/2013/07/23/organisatio-homepages-choosing-the-right-image/

Organisation homepages: choosing the right image

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.

Four departmental homepages showing good use of visuals
Good use of homepage images - some recent examples

 

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.

Examples of how to format images
Avoid keylines or borders around imagery

 

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:

A railway and a minister, yesterday
Illustrating a story on a speech about rail travel: two options

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.

Michael Gove with the Chief Social Worker for Children
Michael Gove with the Chief Social Worker for Children, in a context which illustrates their work

 

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:

Whatever image you use, it should not be overtly blurry, grainy, stretched, pixelated or badly lit.

Illustration of image quality
Grainy and low definition: bad. Nice and sharp: good.

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.

Examples of stock imagery
Avoid cheesy stock imagery like this, if possible

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.

Illustration of how not to put text within images
Green Deal promotion: avoid using lots of text within images

 

Image attribution

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.]

Read further guidance on image copyright issues.

 

10 comments

  1. Rod

    I really like the new GOV.UK homepage.

    Just one thing, the three new feature images under depts and policy...

    - How government works
    - Get involved
    - Worldwide

    ...seem counter-intuitive compared to the rest of the site, where every other photo has an active hyperlink to the story.

    Also is "Read more" acceptable as link text? I'm genuinely curious as all guidance on accessibility and seo suggests otherwise?

    Cheers

    Link to this comment
    • Graham Francis

      Thanks Rod, I'll pass these comments on to the product team.

      Link to this comment
  2. Paula Powell

    Your section on image attribution mentions that all images need to be attributed which I agree with. However, some images we use are from commercial photo libraries such as Shutterstock. Is it ok to attribute a commercial organisation on the .GOV website?

    We have had advice from the National Archives who are responsible for Crown copyright and they stated that we should attribute commercial organisations but please could you clarify the situation from a .GOV.uk perspective.

    Thanks

    Paula

    Link to this comment
    • Graham Francis

      Hi Paula - it is OK to credit commercial organisations, if those are the terms of your agreement with them. However, you should check with the organisation to see what's needed - with some agreements, no crediting is necessary.

      Link to this comment
  3. Andrew Robertson

    That's helpful, thanks. Do you have similar guidance for the use of video?

    Link to this comment
    • Graham Francis

      Hi Andrew -

      No, we don't have any guidance on video usage - but it's a good idea. We'll look into it.

      Link to this comment
  4. Dan Elmont

    Hi,

    Are you going to provide any further guidance on the format and colour mode of the images? I think that some digital editors asked to add images are not going to know that they need to be RGB or a JPEG or PNG formats.

    I have also found that not all images on GOV.UK pages are 960 x 640 pixels. For instance on the Cabinet Office page images can be found at 960 x 622 and 960 x 624.

    Thanks

    Link to this comment
  5. Amanda Kerry

    Re: (NB it isn’t currently possible to put text attribution on organisation homepages).....
    How, therefore, should we attribute an image for a piece of content that's featured on our org homepage, but isn't used on the document itself?

    Thanks

    Link to this comment
    • Graham Francis

      Hi Amanda - if attribution is needed, you should probably also feature it within the document, and attribute it there. Would that work?

      Link to this comment
  6. Colin

    The suggested attribution for Creative Commons licensed images isn't correct. It is important to be clear that "Creative Commons" is not a licence, but an organisation that creates and maintains various licences each of which have different restrictions. It is vital to indicate which licence is used, in-text, rather than rely on the URL (which doesn't appear on a print-out). The licences vary by restrictions imposed, and by version. For example "Creative Commons BY-SA 3.0".

    The guidance (here and elsewhere on the gov.uk standards) should be amended to ensure the specific CC licence used is made explicit. Also the text above suggests a link to the CC BY-NC-ND 3.0 licence is required, when of course a link to the relevant CC licence is required.

    It would be more helpful if the example was realistic and actually had a link to a real photo combined with the photographer's name.

    Link to this comment