Add banners and featured images to your website

Banner images

Banners can only be added to normal pages. They are optional but usually desirable on your homepage and other important pages. Choosing banner images can be tricky as there are lots of things to consider. The image is designed to support the introductory message and the most important thing is that the banner text is legible.

Here's an example of a good banner image:

Banner image guidance

Focus Keep the subject/focus on the right leaving space for text on the left
Edges Keep important details away from the outer edges as these will be cropped at some screen sizes
Dark tones Use dark tones to help the white text be readable
Negative space Try to use images with plenty of negative space on the left
Contrast Aim for images with relatively low contrast and avoid images with very bright spots
File types Files must end in .jpg, .jpeg, .gif or .png and be no larger than 10MB
File size The minimum size for banner images is 1500 x 500 pixels. Larger images will be automatically scaled down.

Featured images

Featured images can be added to any type of website content. They are more forgiving than banner images because the page title and introduction are displayed next to them, not overlaid. 

Here's an example of a good featured image:

Featured images are also used in image grids like this example:

Featured image guidance

  • Use landscape images
  • Files must end in .jpg, .jpeg, .gif or .png and be no larger than 10MB.
  • The minimum size for featured images is 450 x 300 pixels.

Fill vs Fit display mode

If your images appears cropped in an undesirable way when viewed in a list or grid you can edit the page and change the image display mode from Fill to Fit. This will ensure that the entire image is displayed within the featured image field without being cropped.


Where to find good images

There are lots of places to look for images on the web but you need to make sure you have the necessary permission. This guide on how to  Find and optimise images for your website gives lots of useful tips on where to look and how edit images the achieve the above characteristics.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us