Summary

Guidance on the use of images to illustrate content online.


Selecting images

Using images will help to break up text and provide points of interest in the layout of pages but care should be taken to ensure that images are always relevant to the content. Using generic or incorrect images can have a negative impact and create confusion, for example, if a web page is about using public transport and the content relates specifically to the train network but an image of buses is displayed on the site, users may glance at the image and assume they are in the wrong location.

We recommend that if images are used on a site, they should form part of routine user testing to ensure that the assumptions made about their suitability correspond to the view of the users.

In addition, images selected for resources should always be quality assured, images should never be pixelated, stretched, squashed, blurred or over/under exposed. The DPI (dots per inch varies for screen media and traditional print, web images should be saved at 72dpi to ensure site efficiency. Responsive sites may require a suite of pre-sized images tailored to the viewport size and layout of the site.

It is also essential when selecting and using images to ensure that you have the appropriate copyright permissions from the owner. Images can be sourced from either commercial image banks for which a fee will be payable or via a creative commons licence where an attribution will usually be required, indicating the owner of the image and licence arrangement.

Design theory

Images are a powerful means of communicating messages. The human brain recognises visual representations of objects in a matter of milliseconds, where reading and processing a text-based description of a similar objects would take much longer to comprehend. This speed of recognition can be used to orientate users and communicate topics covered in the content of web pages at a quick glance.

Images also help to engage users and will hold the attention of visitors for longer when used in combination with text. For example, studies have shown that a post on social media is 10 times more likely to receive engagement if it includes a picture.

Many users will also be visual learners, finding it easier to retain information which is communicated in illustrated form, this has led to a rise in the use of infographics to deliver complex content. In the communication of public services this must be balanced with alternatives for users who are blind or visually impaired.

Usage

Images used on responsive sites will require resizing to fit the viewport used to access content. This can be achieved by manually re-sizing images in software such as Photoshop, or freeware such as GIMP or PIXLR. File formats suitable for the web are .jpeg .png and .gif, all images must be 72dpi (dots per inch) and set to RGB (red, green, blue) colour values.

Image files should be named in a meaningful way that will allow for easy identification without the need to preview. Use files names such as NicolaSturgeon.Mobile.jpeg instead of DCIM109778x.jpg. The mygov.scot site has image sizes and naming conventions pre-defined, these can be accessed in the image guide in the /design-standards/resources/.

Image selection should also capture the spirit of public services and include real people, reflecting a mix of ethnicity, age, sex and physical ability wherever possible.

Accessibility

Images provide visual clues to the content and can help to better communicate ideas and messages to certain groups of users, such as those with dyslexia and autism. Images should always be relevant to the content and tagged for assistive technology, this is achieved through the use of alt attributes which provide a description of images should they fail to load on screen or where images have been switched off or are accessed by the use of a screen reader.

Images should not include text as this can easily be missed by some users and the often uneven backdrop of images behind the text renders it hard to read. Text in images is also fixed and cannot be either translated or easily magnified by users.