Adding a banner image can help to engage your customers and establish your brand identity on your public booking pages.
Each public booking page is mobile responsive, which means that the screen's layout adjusts according to the device's size. When selecting a banner image, it is advisable to consider which device your bookers may use to view it and how much of the image will be visible, as some of the image will be cut off.
We generally recommend uploading 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 will allow for the largest possible section of the image to be displayed and prevent the image from being skewed or distorted when enlarged to fill space.
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:
Those with larger screens will see the full width but lose a little height:
And people viewing on tablets, such as the iPad or iPad Pro, lose width while keeping the height of the image:
Because of the variation in how your image is displayed, 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.