To ensure your images load quickly and look good, it's important to optimise them for the web.

Images for the web should be high quality and less than 1MB in size. Larger images cause pages to load slower – this affects your website's user experience and search engine rankings.

When saving images for the web, the smaller the file the better, as long as quality is retained.

Recommended image properties

Image type

Dimensions

File size

Teaser images

640px by 640px

50KB to 200KB

Card images

640px by 640px

100KB to 300KB

Hero banners

2560px by 560px (landscape)

150KB to 400KB

Profile images

640px by 640px

50KB to 200KB

How to optimise images

Use Photoshop, or another photo editor, to adjust the image properties:

  • Resize the image to the recommended dimensions.
  • Set the colour format to sRGB (not CMYK).
  • Set the resolution to 72 DPI. Higher DPI resolutions are for print, not screens.
  • Save the image in jpg format. Don't use png or gif formats unless the image is a vector graphic.
  • Save at high quality – around 80%.

Once you’ve saved your image with the adjusted properties, compress it using a compressor like Kraken.io.

Compressing images allows you to reduce file size while still maintaining quality. If the quality of your image lowers when compressing, use the 'lossless' option.