✨ Please note: This feature is available on the Lite plan or above.
Adding a banner image to your public booking page(s) is a great way to engage your customers and strengthen your brand identity.
This article covers:
💡 To note: Each public booking page is mobile-responsive, so the layout adjusts based on the device's screen size. When choosing a banner image, consider how it will appear on different devices, as parts of the image may be cut off on smaller screens.
Recommendations
💡 To note: You can upload the following file types: jpeg, jpg, png, gif, mp4, m4v, mov, txt, ics, doc, docx, pdf, ppsx, ppt, pptx, pub, rtf, xls, and xlsx. For security reasons, zip files are not accepted.
To ensure your banner image displays correctly, we recommend using a 16:3 aspect ratio. This means that for every 16 units of width, there should be 3 units of height.
For example:
A 1600-pixel wide image should be 300 pixels high.
A 800-pixel wide image should be 150 pixels high.
A 3200-pixel wide image should be 600 pixels high.
Using this ratio helps prevent distortion and ensures the image appears sharp and clear, even when resized to fill the space.
Original (16:3) |
|
If you upload an image with a 16:3 ratio, the section displayed on any device will be the middle portion of the image:
|
iPhone 6/7/8/X and Google Pixel 2 |
Most smaller devices, such as mobile phones (iPhone, Google Pixel, etc.), can only accommodate a narrow width:
|
15" laptop |
Customers using a standard 15-inch laptop screen will see nearly the entire image:
|
24" screen |
Those with larger screens will see the full width but lose a little height:
|
Ipad Pro |
Customers using tablets, like the iPad or iPad Pro, will see less of the image's width while maintaining the height:
|
Ipad |
|
💡 Tips
Due to the variation in how your image may display, we recommend avoiding specific objects of focus (like people) and instead choosing an image that works well across different screen sizes.
For the best result, place your focal point in the centre of the image. If you’re uploading a logo, remember that it will be positioned on the left, overlaying part of the banner image and reducing the visible area.
Banner images with text
It’s generally best practice to avoid using text in image files, as it can impact both readability and accessibility.
Images are great for conveying ideas, but they can also make it harder for people with visual impairments to understand the content. For more insights, check out the Web Accessibility Initiative (WAI) website.
If you need to include text in your banner image, here are some tips to help improve readability:
Font: Choose a font that’s easy to read, especially when the image is scaled down.
Text colour: Pick colours that provide good contrast, while still blending well with the background.
Text placement: To prevent text from being cut off on certain devices, factor in automated scaling and cropping.
Image size: Use larger dimensions than images without text, such as 3200 x 600 pixels (the recommended 16:3 aspect ratio).
File format: Consider using PNG instead of JPG, as PNG tends to preserve text quality better and deliver better overall results.
Test on multiple devices: It’s a good idea to test the display on mobile devices to ensure everything appears as intended.
Uploading the image
To upload your banner image:
Open your public page.
Select Customise page in the top bar:
Select Set header background:
Once you've uploaded the image, select Save settings. You may need to refresh your screen to see the changes.
💬 Need extra help?
For the quickest response, contact us via live chat on our homepage or your account. Buddy, our trusty chatbot, will assist first and pass you to a support team member if needed.
Prefer email? Send us an email instead.
Thank you! 🕺
Tags: publicpage, headerimage, headerpicture