Add banners and featured images to your website
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 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.