Skip to content
English
  • There are no suggestions because the search field is empty.

How to prepare images for optimal display in the guest app

Overview

Images play a key role in the guest experience. Each section of the CMS may display images differently depending on its layout and purpose within the guest app.

This article provides recommended technical specifications for images across different CMS sections to ensure consistent and high-quality display.

For each section, you’ll find:

  • The recommended technical specifications
  • Instructions on how to access and configure the component
  • A visual reference including both the CMS configuration and how the image appears in the guest app

Following these guidelines helps prevent cropping, distortion, and inconsistent visuals across your app.

 

Before getting started

Before uploading images to the CMS, keep the following in mind:

  • These specifications are guidelines. Images may adapt automatically depending on where they are displayed, but following these recommendations helps avoid unexpected cropping or distortion.
  • If a component allows you to choose between using the service image or uploading a custom image, remember that the original service image may not display as expected due to differences in aspect ratio or layout.
  • When uploading multiple versions of the same image (for example, 4:3 and 1:1), always use distinct file names.

If you prefer to upload images from the Images section (instead of uploading them individually per section), it is especially important to use clear and structured naming conventions. Including the target section in the file name (e.g., restaurant_widget_3-1.jpg) can help you quickly identify and reuse the correct version later.

Taking a few minutes to prepare and name your images properly will save time and prevent display issues across the app.

Important: Images that do not match the recommended aspect ratio may be automatically cropped or resized depending on the component.

 

Image requirements by CMS section

1. My app section

This section covers all image requirements for elements configured under the My app section of the CMS, including the header and homepage widgets.

1.1. General settings: Logotype

The logotype can be used in both the Header and the Side menu.

The logo must be uploaded in a horizontal format, as the component height is fixed. Vertical logos will not scale correctly and may appear cropped or too small.

To ensure optimal display, avoid adding margins or padding around the logo. Extra spacing will reduce its visible size within the component.

Recommended specifications:

  • Format: PNG
  • Image size: 400 x 200 px
  • Aspect ratio: 4:2
  • Color space: sRGB
  • File size: maximum 1 MB
  • Background: transparent

To access and configure this component under Header:

  1. In the CMS, go to My app > Customize app > Edit app.
  2. Go to Header under General settings
  3. Select a header type
  4. Define the background style
  5. Upload a logotype
  6. Define colors
  7. Click Save changes

To access and configure this component under Side menu:

  1. In the CMS, go to My app > Customize app > Edit app.
  2. Go to Side menu under General settings
  3. Upload a logotype
  4. Define the menu colors
  5. Edit the menu groups and sections
  6. Click Save changes

 

Homepage_Header_Color

 

1.2. General settings: Header

Standard header

Used as the main visual at the top of the home screen.

Recommended specifications

  • Format: JPG
  • Image size: 450 x 225 px
  • Aspect ratio: 2:1
  • Color space: sRGB
  • File size: maximum 1 MB

To access and configure this component:

  1. In the CMS, go to My app > Customize app > Edit app.
  2. Go to Header under General settings
  3. Select Standard as the header type
  4. Select Image as background style
  5. Upload a background image
  6. Upload a logotype
  7. Define colors
  8. Click Save changes
Homepage_Header_Image
 
Upsell header

Used to promote services or products through a carousel displayed at the top of the app.

Recommended specifications:

  • Format: JPG
  • Image size: 380 x 220 px
  • Aspect ratio: 4:3
  • Color space: sRGB
  • File size: maximum 1 MB

To access and configure this component:

  1. In the CMS, go to My app > Customize app > Edit app.
  2. Go to Header under General settings
  3. Select Upsell as the header type
  4. Define the header settings (background color, logotype, and colors)
  5. Click Add to create a new item in the carousel (you can add multiple items)
  6. Select a content source and a content item
  7. Upload a new image (recommended), or use the image already associated with the selected item

Homepage_Header_Upsell

 

1.3. Home page widgets

Content widget

Allows uploading custom images for content cards (Manual option under Content type) instead of using service-linked images. This ensures that the slider content is visually distinct and tailored to specific promotions or highlights.

To access and configure this component:

  1. In the CMS, go to My app > Customize app > Edit app.
  2. Go to the widgets menu on the left-hand side
  3. Click + and select Content under Hotel content
  4. Select Manual as the content type and click Add
  5. Select a content source and a content item
  6. Upload an image
  7. Define title and highlight text
  8. Under the Design section, select Slider as the card orientation
  9. Choose White or Image as the card style
  10. Select the desired image style (4:3, 9:16, 1:1, or Round)
  11. Define widget visibility
  12. Save changes

 

Recommended specifications depending on the selected design options:

Slider - White - 4:3

  • Format: JPG
  • Image size: 400 x 300 px
  • Aspect ratio: 4:3
  • Color space: sRGB
  • File size: maximum 1 MB

Homepage_Grid_01

 

 

Slider - White - 1:1

  • Format: JPG
  • Image size: 400 x 400 px
  • Aspect ratio: 1:1
  • Color space: sRGB
  • File size: maximum 1 MB

Homepage_Grid_02

 

Slider - White - Round

  • Format: JPG
  • Image size: 400 x 400 px
  • Aspect ratio: 1:1
  • Color space: sRGB
  • File size: maximum 1 MB

Homepage_Grid_03

 

Slider - Image - 4:3

  • Format: JPG
  • Image size: 400 x 300 px
  • Aspect ratio: 4:3
  • Color space: sRGB
  • File size: maximum 1 MB

Homepage_Grid_04

 

Slider - Image - 9:16

  • Format: JPG
  • Image size: 400 x 800 px
  • Aspect ratio: 9:16
  • Color space: sRGB
  • File size: maximum 1 MB

Homepage_Grid_05

 

Slider - Image - 1:1

  • Format: JPG
  • Image size: 400 x 400 px
  • Aspect ratio: 1:1
  • Color space: sRGB
  • File size: maximum 1 MB

Homepage_Grid_06

 

Grid widget

Displays content using a mixed layout with different image formats.

To access and configure this component:

  1. In the CMS, go to My app > Customize app > Edit app
  2. Go to the widgets menu on the left-hand side
  3. Click + and select Grid under Hotel content
  4. Enter a title and action text, then click Add
  5. Select a content source and a content item
  6. Upload an image
  7. Define a title and highlight text
  8. Define widget visibility
  9. Save changes

When adding several items to the grid widget, some may display at full width while others at half width.

 

Recommended specifications depending on the width:

Top card (full width)

  • Format: JPG
  • Image size: 600 x 300 px
  • Aspect ratio: 3:2
  • Color space: sRGB
  • File size: maximum 1 MB

Bottom card (half width)

  • Format: JPG
  • Image size: 400 x 400 px
  • Aspect ratio: 1:1
  • Color space: sRGB
  • File size: maximum 1 MB

Homepage_Grid_07

 

Highlights widget

Shows highlighted content in a horizontal slider with image, text, subtext, and a call to action button.

To access and configure this component:

  1. In the CMS, go to My app > Customize app > Edit app
  2. Go to the widgets menu on the left-hand side
  3. Click + and select Highlights under Hotel content
  4. Click Add
  5. Select a content source and a content item
  6. Upload an image
  7. Define a title, subtitle, and button text
  8. Add another item, if needed, and follow the same instructions
  9. Define widget visibility
  10. Save changes

Recommended specifications

  • Format: JPG
  • Image size: 400 x 200 px
  • Aspect ratio: 3:2
  • Color space: sRGB
  • File size: maximum 1 MB

Homepage_Highlights

 

Guest information widget

Displays a widget to guests with their name and stay dates, along with a direct link to complete the hotel check-in. This widget only appears when a user is logged in.

Recommended specifications

  • Format: JPG
  • Image size: 310 x 80 px
  • Aspect ratio: 3:2
  • Color space: sRGB
  • File size: maximum 1 MB

To access and configure this component:

  1. In the CMS, go to My app > Customize app > Edit app
  2. Go to the widgets menu on the left-hand side
  3. Click + and select Guest information under Interactions
  4. Define text and background colors
  5. Activate the Show image button
  6. Upload an image
  7. If needed, enable the check-in button and define its settings
  8. Define widget visibility
  9. Save changes

Homepage_GuestInformation

 

Banner widget

Shows a banner-style card with image, title, subtitle, and call to action link. You can customize banner style and colors

To access and configure this component:

  1. In the CMS, go to My app > Customize app > Edit app
  2. Go to the widgets menu on the left-hand side
  3. Click + and select Banner under Direct links
  4. Select a content source and a content item
  5. Select White or Image as banner style
  6. Select a background color (only if you selected White)
  7. Upload an image
  8. Define banner height and width (only if you selected Image)
  9. Define a title and call to action
  10. Define widget visibility
  11. Save changes

 

Recommended specifications depending on the banner style:

Banner White

  • Format: JPG
  • Image size: 200 x 200 px
  • Aspect ratio: 1:1
  • Color space: sRGB
  • File size: maximum 1 MB

Homepage_Banner_White

 

Banner Image

  • Format: JPG
  • Image size: flexible (depends on content)
  • Aspect ratio: flexible (depends on content)
  • Color space: sRGB
  • File size: maximum 1 MB

The banner height is dynamic and depends on its configuration:

  • The height may vary depending on the title size and whether a subtitle is included
  • You can also manually define the height in pixels

As a result, both the image size and aspect ratio may vary depending on how the banner is configured.

Homepage_Banner_Image

 

2. Content section

This section includes image specifications for content created in the Content section of the CMS, such as service details, catalogs, upsell pop-ups, calendar activities, and content group icons.

2.1. Facilities, Services, Leisure, and Welcome message

The following specifications apply to all services created under Facilities, Services, Leisure (excluding the Activities calendar), and the Welcome message.

Information tab

Cover image: Main image displayed at the top of the service detail page.

Recommended specifications

  • Format: JPG
  • Image size: 640 x 360 px
  • Aspect ratio: 1:1
  • Color space: sRGB
  • File size: maximum 1 MB

To access and configure this component:

  1. In the CMS, go to Content > Facilities/Services/Leisure/Welcome message
  2. Click the corresponding service type (e.g. Restaurants)
  3. Select a service in the list and click Edit
  4. In the Image section of the Information tab, click the image icon to add an image.
  5. Select one and click Insert
  6. Save changes

Service

 

Catalogs

Catalog header: Displayed at the top of the service catalog page.

Recommended specifications

  • Format: JPG
  • Image size: 400 x 400 px
  • Aspect ratio: 1:1
  • Color space: sRGB
  • File size: maximum 1 MB

To access and configure this component:

  1. In the CMS, go to Content > Facilities/Services/Leisure/Welcome message
  2. Click the corresponding service type (e.g. Restaurants)
  3. Select a service in the list and click Edit
  4. Go to the Advanced catalog tab
  5. Scroll down to the Layout tab of the catalog (you should have already created one)
  6. Select Use background image under Catalog header
  7. Click the image icon to add an image
  8. Save changes

Catalog

 

Product image: Main image displayed at the top of the product detail page.

Recommended specifications

  • Format: JPG
  • Image size: 400 x 400 px
  • Aspect ratio: 1:1
  • Color space: sRGB
  • File size: maximum 1 MB

To access and configure this component:

  1. In the CMS, go to Content > Facilities/Services/Leisure/Welcome message
  2. Click the corresponding service type (e.g. Restaurants)
  3. Select a service in the list and click Edit
  4. Go to the Advanced catalog tab
  5. Scroll down to the Products tab of the catalog (you should have already created one)
  6. Select one product and click Edit (pencil icon)
  7. Click the image icon on the Product information screen to add an image
  8. Save changes

Product

 

Upsell tab

The upsell pop-up is displayed when promoting a special offer to the guest.

Recommended specifications for the upsell pop-up image:

  • Format: JPG
  • Image size: 325 x 225 px
  • Aspect ratio: 3:2
  • Color space: sRGB
  • File size: maximum 1 MB

Recommended specifications for the upsell pop-up description:

  • Title: 25-35 characters
  • Subtitle: 40-60 characters
  • Text: 150-200 characters to avoid internal scrolling

To access and configure this component:

  1. In the CMS, go to Content > Facilities/Services/Leisure
  2. Click the corresponding service type (e.g. Restaurants)
  3. Select a service in the list and click Edit
  4. Go to the Upsell tab
  5. Enable the Activated button
  6. Click the image icon to add an image.
  7. Define the name, subtitle, and description.
  8. Save changes

Popup_Upsell

 

2.2. Leisure: Activities calendar

This section outlines image requirements for activities displayed in the Activities calendar.

Activities are grouped within the calendar and displayed individually in the app, each with its own screen. The activity image appears at the top.

Recommended specifications for an activity image:

  • Format: JPG
  • Image size: 720 x 400 px
  • Aspect ratio: 9:5
  • Color space: sRGB
  • File size: maximum 1 MB

To access and configure this component:

  1. In the CMS, go to Content > Leisure
  2. Click Activities calendar
  3. Select a calendar in the list and click Edit
  4. Go to the Activities list tab
  5. Select an activity and click Edit (pencil icon)
  6. In the Image section of the Information tab, click the image icon to add an image.
  7. Select one and click Insert
  8. Click Save

Activity

 

2.3. Other: Content groups

This section covers image specifications for content group icons displayed in the guest app.

Tab icons

Icons displayed at the top of the guest app screen to represent content groups.

Recommended specifications for icons:

  • Format: JPG
  • Image size: 200 x 200 px
  • Aspect ratio: 1:1
  • Color space: sRGB
  • File size: maximum 1 MB

To access and configure this component:

  1. In the CMS, go to Content > Other
  2. Click Content groups
  3. Select a content group in the list and click Edit
  4. Go to the Groups tab
  5. Select or create a group
  6. Click the square image icon to add a tab icon
  7. Save changes

Grouping (1)

 

Next steps

Now that you understand the recommended image specifications:

  • Review your existing images in the CMS and update any that do not match the recommended formats.
  • Prepare multiple image versions (e.g., 4:3 and 1:1) for key content to ensure flexibility across components.
  • Use clear and consistent file naming conventions to simplify image management.
  • Test how images display in the guest app after publishing to ensure they appear as expected.

 

Need further assistance?

If you have additional questions or require further assistance:

  • Contact us via live chat
  • Send a ticket to our Support team
  • Visit STAY Academy, our training platform