Banner images and focus points
Overview
The "banner" image that you pick for a tour, collection, or static page, is shown at a number of places in a variety of sizes, aspect ratios, and orientations. For example:
- On the desktop, as a full sized "horizontal" banner image (what is called a "landspace" orientation)
- On the browser, as a "vertical" banner image (what is called a "portrait" orientation)
- In various sizes for various tour / collection cards
- When sharing a tour / collection on social media (the size of the image depends on the guidelines of the social media website)
- And so on...
Uploading a different image optimized for each of these sizes and aspect ratios is a time-consuming process. To save you from this hassle, the Vacation Labs platform has the concept of "focus point" on banner images. You pick the part of the image that should remain visible irrespective of the size and orientation of the image, and the platform does the rest.
How to pick a focus point in a banner image
As of writing this article, it is possible to upload banner images at the following places:
- Homepage: Navigate to Website > Pages > Homepage > Banner slides
- Collections page: Navigate to Products > Collections > Edit the collection > Collection image
- Tour page: Navigate to Products > Trips > Edit trip > Basic Details > Photos & Videos
- Static page: Navigate to Website > Pages > Select the static page > Banner slides
- Coupon / promotion page: Navigate to Products > Promotions > Edit Coupon > Promote on Website > Photos
Once you upload an image, set it to be the banner image, and click "continue"....
...you will see the option to set the focus point for that image:
Guidelines for picking high-quality banner images
- Do not upload images with text overlaid on the image itself, because:
- It does not work well when the same image needs to be auto-cropped and auto-aligned in varioud different sizes, devices, and orientations
- Is not good from an SEO standpoint as you are "hiding" important textual content from search engines
- Instead stick to using the standard feature where text is overlaid separately on the banner image by the platform itself.
- Try uploading high-quality banner images of at least 1024px x 768px size. If you upload banner image smaller than this size then they will look grainy / blurry on desktops. Do not worry about the image becoming too "heavy", because the platform automatically serves smaller images on mobile and larger images on desktop.
Guidelines for picking focus point on banner images
- Identify the main subject: Determine what the main focus of the image is, whether it's a product, person, scenery, etc. Check the examples given in the next section.
- Consider composition: Pay attention to how different elements interact and choose a focus point that enhances overall balance and visual appeal.
- Think about user attention: Direct the viewer's eyes to the main thing you want them to see or understand.
- Preview across devices: Ensure the chosen focus point maintains its impact on both mobile and desktop screens.
Examples for picking focus points on different kinds of images
Example of image with only scenery
Positioned the focus point at the center of this banner image to cover the beach and hill with trees. This ensures proper viewing across all devices.
Example of image with point of interest (eg. building, bridge, etc)
Placed the focus point on the Eiffel Tower here to ensure proper display across all devices, including tour and collection cards.
Focus point on the Eiffel Tower
Example of image with scenery + one/two person
Positioned the focus point on the couple to ensure proper viewing across all devices, including the scenery.
Example of image with many people (group photo)
Positioned the focus point at the center of the group photo to ensure that all individuals are shown as much as possible. In some cases, such as on mobile devices, some individuals may be partially cut off, but the image should still be displayed in a way that adequately covers them with some people.
Related Articles
Adding sliders to the homepage banner
Overview Vacation Labs lets you add multiple banner slides to your website (Homepage, Static Page, etc.) so you can showcase products in the first fold of the page. You can display different types of sliders, such as: Tour Slide – Shows tour details ...Add or change photos on a tour
Overview While you can upload any number of images, we recommend limiting each product to 8–10 photos for the best user experience. One image must be selected as the banner image, so make sure it meets the minimum dimension requirements. To learn ...Adding Images inside Itinerary
At the moment we don't have an inbuilt option to add images inside the itinerary, but we do have an option in our text editor that allows you to add images. Quick Overview Steps to Add images to the Itinerary of a tour: Upload all images to that ...How to add Alt tags to Images?
Alt tags (also known as alt text, alt descriptions, or photo captions) are important for both your visitors and your website's visibility in search engines like Google. For Users: If an image fails to load, the alt text is displayed in its place. It ...How to Add an Autoplay Video to a Page Banner
You can enhance your website's homepage by adding an auto-playing video to the banner slider. This feature is ideal for short, engaging clips that play on a continuous loop. Important Considerations Before You Begin Performance Impact: Autoplaying ...