Images

Choose and present images that are useful, inclusive and recognisably Camden.

Use images to support written content and help people understand information.

Images can include photographs, illustrations, charts, diagrams and icons. Avoid using images as decoration or simply to add colour. Use an image when it meets a clear user need.

Any essential information in an image must also be available as text so people who cannot see the image are not excluded.

When to use images

Most pages do not need images. Write clear, simple content first. Use an informative image when it shows what something looks like or helps someone find something. Use decorative images sparingly, mainly for campaigns or homepages where they add warmth or empathy.

Avoid decorative images on guidance pages. They can slow people down when they are trying to complete a task.

Photography

Use photography to show a lifelike representation of a service, place or object. Avoid generic stock photography and images that use abstract concepts without evidence that they help users.

Represent people inclusively and realistically. Avoid showing only one age, gender, ethnicity or type of user.

Aspect ratio

Use a 3:2 aspect ratio for photographs unless the image represents a physical object, such as a document or card, where its real proportions are more useful.

Illustrations

Use illustrations to simplify something complex, such as a physical interaction or a location on a document. Use as few visual elements as possible, flat blocks of colour and a consistent visual style. Avoid shadows and gradients unless they communicate depth or a distinctive feature.

Images of text

Give text as HTML wherever possible. Do not use an image just to show a social media post, document excerpt or presentation slide. Text that happens to appear in a photograph, such as a sign in the background, is usually fine.

Icons

Avoid icons unless research shows that people understand them. Use an icon with a text label, never use one icon to mean multiple things, and make linked icons at least 24px by 24px with enough spacing.

Charts and diagrams

Follow an image of a chart or diagram with a description, a table of the raw data, or a link to an accessible data file. Explain the important trends in text and consider whether a table would communicate the information more clearly.

Alt text

Alt text should be specific, meaningful and concise. Describe the information and function of the image, use normal punctuation, and do not start with “Image of” or repeat nearby text.

Decorative images and icons that repeat a visible text label should use an empty alt attribute. Use the WAI image decision tree when deciding what an image needs.

Optimise your image

Resize and compress images before publishing. Aim for a file size under 500KB where possible; smaller files load faster and use less energy. Squoosh is one tool you can use.