Images can enhance the look and user experience of your website.
When used properly, they can tell your brand’s story, evoke emotion, highlight important content, and maintain consistency. But if used incorrectly, images can reduce your site’s effectiveness and quality.
Every element on your site sends a message, and imagery is no exception.
The Website Builder team is not responsible for providing images for your site. In all of our service levels, you’ll need to provide imagery for your website.
Imagery standards
Read GOV.UK guidance on images and about images in the GOV.UK Design System for best practice when using images.
Images should not contain text for accessibility reasons.
Using imagery to enhance your site
By ‘imagery’ we generally mean photographs taken with a camera, but imagery can also refer to illustrations or drawings that can also be used to improve the look of a page.
Both photographs and illustrations have their pros and cons:
- photographs are generally more realistic, emotive, and easier to source
- illustrations are generally cheaper, easier to manipulate, and sometimes more eye catching
When choosing which types of images to use, the most important thing is that there is visual consistency between them.
How to choose good images
General
When choosing images, you should think about:
- relevance: ensure the images you choose are directly related to your content – they should reinforce your message, not distract from it
- quality: high-resolution images make your site look professional – avoid pixelated or blurry images
- emotional impact: choose images that evoke the right emotions in your audience, for example, a smiling face can create a sense of warmth and approachability
Photography
When choosing or taking photographs, you should consider:
- lighting: where possible, use natural lighting or techniques that mimic natural lighting
- composition: think about how elements are arranged within the frame of the image – read more about composition from Adobe
- depth of field: the main subject of the image should be sharp and in focus
- effects and filters: where possible, avoid enhanced images that have been recoloured, special effects added, or objects removed or added
Illustration
When looking for illustrations or icons, look for:
- colour: choose illustrations where you can change or manipulate the colour so they match your brand colours – you can do this by changing the hue of the image in free photo editing software such as GIMP
- style: choose illustrations with a similar drawing style
Sourcing imagery
Photography
Sourcing consistent photography is tough. If you don’t have access to an image bank, you could use online stock image websites such as:
Free:
- Unsplash
- Pexels
- Pixabay
- Age-positive image library from Age Without Limits
Paid:
When sourcing several images, don’t worry if the lighting or colour varies slightly from one to another, the main focus is to make sure the image is relevant to your messaging.
Top tip: find a photographer’s style that you like and explore their image bank as you’re more likely to find images in a similar style. Also explore pre-made collections that other users have made.
Illustrations
Sourcing consistent illustrations can be really tricky if you don’t have access to design software. You could try using software that has the ability to customise the colour of some illustrations and icons.
Free:
Paid:
What you’re responsible for
It’s important to understand your responsibilities when it comes to sourcing and using images.
Editor role
As the website editor, you are responsible for sourcing, selecting, and uploading images.
The Website Builder team is not responsible for providing images for your site.
Copyright and licensing
Always ensure that the images you use are properly licensed – for example, if using stock images, check the licensing terms to avoid legal issues.
Image credits
If required by the licence, always provide appropriate credits to the image source.
GOV.UK has more information on image copyright standards.
Accessibility
Making your website accessible is not only good practice but is also a legal requirement. Here’s how to ensure your images are accessible.
Alt tags
Always include descriptive alt tags for all images. Alt tags provide a text description of the image, which is crucial for users who rely on screen readers. The Website Builder platform will alert you if your image is missing alt text. The GOV.UK Design System has more about writing good alt text.
Descriptive filenames
Use descriptive filenames for your images (for example, ‘woman-smiling.jpg’ instead of ‘IMG1234.jpg’). This can improve search engine optimisation (SEO) and accessibility.
Avoid text in images
Avoid placing important text within images. Screen readers cannot read text within images, so include any text in the main content of the page.
File types
Use an online converter such as CloudConvert to convert your images from JPG or PNG to WEBP. WEBP files are smaller and load quicker, so loading a page becomes easier for people with slower internet speeds.
Find out how to add and edit images in Website Builder in the user guides section.