Best Practices for Banners

Chose images with topic appropriate subject-matter 

For inside banner and card images, match the subject-matter of the image to the topic of the page. The image should be simple, easy to understand, and contain only one subject. For the homepage banner photo, chose a landscape image to provide users with a sense of geography and natural beauty. If using multiple images, such as in a rotating banner, show a variety of subject-matter. 

Centre the subject-matter in the image

Keep the subject-matter centred in the image, in case of changes to the image ratio. Don’t place the subject-matter near the edges of the image, especially people, who may get cut off when the image scales. Avoid having a large portion (⅓) of the image taken up with a single colour, such as the sky. Crop and zoom the photo before use to avoid this. 

Crop the image 

Crop the image to the provided ratio. The ratio may be specified under the Add Image button. 

A screenshot of the hero image add media button with the image sizes listed below.

Stock photo use

Avoid the use of stock photos with white backgrounds or abstract images (i.e.a picture of a puzzle, a picture of an object cut out), as well as stock photos with models displaying overly exaggerated emotions. Don’t use obvious stock images for news or events. 

Avoid text on images

Text on images breaks accessibility standards and should be avoided whenever possible. Logos and signage in imagery are ok, if important text is put in a caption. Don’t add text to images for the Homepage banner, or other website images. If a custom graphic is made for a poster or event, make sure you have a version without text to use on the website.

Save the image as a jpeg with 90% compression

To keep your site running quickly, it's important to keep your image file sizes small. The human eye can't tell the difference between 100% and 90%, so we suggest saving your images at a 90% compression to keep your site loading quickly. 


Our team at Upanup is always striving to make this guide better and more accessible for our clients. We'd love to hear from you, so we can continue to improve this guide. 

Feedback