Banner images and focus points

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:
  1. On the desktop, as a full sized "horizontal" banner image (what is called a "landspace" orientation)
  2. On the browser, as a "vertical" banner image (what is called a "portrait" orientation)
  3. In various sizes for various tour / collection cards
  4. When sharing a tour / collection on social media (the size of the image depends on the guidelines of the social media website)
  5. 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:
  1. Homepage: Navigate to Website > Pages > Homepage > Banner slides
  2. Collections page: Navigate to Products > Collections > Edit the collection > Collection image
  3. Tour page: Navigate to Products > Trips > Edit trip > Basic Details > Photos & Videos
  4. Static page: Navigate to Website > Pages > Select the static page > Banner slides
  5. 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

  1. Do not upload images with text overlaid on the image itself, because:
    1. It does not work well when the same image needs to be auto-cropped and auto-aligned in varioud different sizes, devices, and orientations
    2. Is not good from an SEO standpoint as you are "hiding" important textual content from search engines
  2. Instead stick to using the standard feature where text is overlaid separately on the banner image by the platform itself.
  3. 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

  1. 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.
  2. Consider composition: Pay attention to how different elements interact and choose a focus point that enhances overall balance and visual appeal.
  3. Think about user attention: Direct the viewer's eyes to the main thing you want them to see or understand.
  4. 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.


Focus point on a beach sceneryFocus point on a beach scenery

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 TowerFocus 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.


Focus point on a couple against a sunset sceneryFocus point on a couple against a sunset 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.


Focus point on a group photoFocus point on a group photo

    • Related Articles

    • Adding sliders to the homepage banner

      Vacation Labs allows you to add multiple banner slides to your webpage (i.e Homepage, Static page) so that you can showcase your products to your visitors once the website loads on the first fold itself. You can display a Tour page slider, collection ...