Skip to main content
All CollectionsEvents, Schedules & Public PagesPublic Pages
Selecting a banner image for your public page
Selecting a banner image for your public page

Considering the size, ratio, and mobile responsiveness when uploading a header image

Anni avatar
Written by Anni
Updated over a week ago

✨ Please note: This feature is available on the Lite plan or above.

Adding a banner image can help to engage your customers and establish your brand identity on your public booking pages.

This article covers:

πŸ’‘ To note: Each public booking page is mobile responsive, meaning the screen's layout adjusts according to the device's size. When selecting a banner image, it is good to consider which device your customers may use, as some of the image may be cut off.


Recommendations

It's recommended to upload banner images in a 16:3 ratio. The ratio determines the relationship between width and height, so an image of 1600 pixels wide would be 300 pixels high.

A ratio would also apply to different size widths and heights, as it only indicates the width relative to the height. So, an image with a 16:3 ratio of 800 pixels wide would be 150 pixels high, or an image 3200 wide would be 600 pixels high.

A 16:3 ratio banner allows for the largest possible section of the image to be displayed and prevents the image from being skewed or distorted when enlarged to fill space.

Original (16:3)

  • If you upload an image with a 16:3 ratio, the section of the image shown on any device is the middle portion, as shown below:

Most smaller devices, such as mobile phones (iPhone, Google Pixel etc.), can only accommodate a narrow width:

iPhone 6/7/8/X and Google Pixel 2

Whereas those viewing your page on a standard 15-inch laptop screen will see almost the entire image:

15" laptop

Those with larger screens will see the full width but lose a little height:

24" screen

People viewing on tablets, such as the iPad or iPad Pro, lose width while keeping the height of the image:

Ipad Pro

Ipad

πŸ‘‰ Because of the variation in how we display your image, we recommend that your banner image not include specific objects of focus (such as people) and instead offer a consistent image that looks good regardless of the displayed area.

It's best to place your area of focus in the centre of the image. If you are also uploading a logo, you should consider that this will appear imposed to the left on top of the banner image and thus reduce the visible area of the banner further.


Uploading the image

To upload your banner image, select Customise page in the top right-hand corner of your public page:

From here, select Set header background:

Once you've uploaded the image, select Save settings to save your changes. You may need to refresh your screen to see the changes.

✨ Learn more information about customising your public page here.


πŸ’¬ Any questions or feedback? There are two ways to get in touch:

Thank you! πŸ•Ί

Return to the top ⬆️


Tags: publicpage, headerimage, headerpicture

Did this answer your question?