Image sizes

  • During the website build process, you should have received some guide sizings for images to use in different elements of your website - for example banner, thumbnail and so on. If you need reminding of these sizes, get in contact and our developers will be able to provide them to you.

Image quality

  • For web, images should ideally be 72dpi or above. Lower quality images can look blurry or pixelated, lowering the overall quality of your site. If any of your images appear to be low in quality we would suggest replacing them with a similar image at a higher resolution.
  • Small images that are 'stretched' to fit into a larger area will also end up looking blurry/pixelated. Please check the recommended image sizes for your site (mentioned above) and ensure that images used are roughly the correct size for the area they are to be placed into, or larger.

Relevance

  • When selecting images to add into your site's pages, think about the audience and the tone of voice of your content. For example, a clinical website probably wouldn't look quite right if it were to feature cartoonish graphics - whereas these could work well for a children's health or CAMHS website.

Accessibility

  • When adding images, it's important to add "Alternative text" - this allows screen readers to read out a description of the image, for those who are unable to see it. When adding an image, a dialogue box will pop up including a field to add some 'alt text' into. Type in a simple description of the image (without including "An image of..." - the screen reader will take care of this part) and save:

How to add alt text screenshot
 

  • We would advise against adding images which include text, for both accessibility and aesthetic reasons. Screen readers are unable to read 'images of text', and often this text can be obscured by other elements of the carousel, for example link buttons or overlay text.