Can I change the images only on the mobile version?

Adapt your visuals to the device for an optimal experience

Key points • It is possible to display a different image on mobile • The Designer allows you to hide/show images based on the breakpoint • The Editor does not allow you to manage a mobile-specific image • Mobile-first optimization improves speed and readability

Yes, you can display a different image on the mobile version of your hotel website. This is a common practice when the desktop image is too wide, too complex, or poorly framed on small screens. However, this adjustment is primarily made in the Designer, as the Editor does not allow for managing different visuals for different devices.

This is the cleanest and recommended method.

Edit an image only on mobile via the Designer

To replace or adjust an image on mobile, you can use the visibility by device function.

Procedure :

1. Open the Designer.
2. Select the current image (the one displayed on your desktop).
3. In the right-hand panel, open the visibility icons (eye).
4. Disable mobile display for this image.
5. Add a new image, designed for mobile: • More vertical size • Simplified visuals • Reduced file size for better performance
6. Select this new image and disable its display for: • Desktop • Tablet (leave only Mobile enabled)
7. Adjust the sizes, margins, and positions as needed.
8. Publish the website.

💡 This method allows you to manage two distinct versions of the same section: one for desktop, one for mobile.

Why use a specific image for mobile?

Some images displayed on desktop do not work well on mobile: • Cropping too tight • Main subject cut off • Image too wide or too horizontal • Text difficult to read on mobile • File size too large → slows loading

A mobile version offers: • Adapted vertical framing • Optimal readability • Improved 4G performance • High-end rendering on small screens

Can this be done in the Editor?

The Editor does not allow: • adding an image visible only on mobile devices • hiding an image based on the device • managing advanced responsive design

However, the Editor allows you to: • replace an image common to all devices • modify an image present in a Collection

For mobile-only customization, the Designer is required.

Alternative technique: different background image on mobile

Some sections use a background image. You can: • keep a large image for desktop • load a mobile-friendly version

Method :

1. Select the section in the Designer.
2. Switch to mobile mode.
3. Change the background image only for this breakpoint.
4. Adjust the settings: • Cover • Center top (often better for mobile) • Adjustable height
5. Publish.

💡 The Designer allows you to change the background via breakpoint without touching the desktop.

Optimize mobile performance

For a mobile image, prioritize: • WebP format • Less than 300–400 KB • Vertical dimensions (e.g., 800×1200 px) • Simple and legible framing

A fast website improves: • SEO • conversion rate • user experience in real-world situations (4G, public wifi)

What not to do

To maintain consistency and performance: • Never paste text directly into the mobile image • Don't leave two images active on mobile → overload • Don't replace the wrong image in the wrong breakpoint • Remember to check the rendering on real devices

Conclusion

Yes, you can change images only on the mobile version of your hotel website, but this is done in the Designer. By using visibility rules or background breakpoints, you can adapt your visuals to ensure a stylish, high-performing, and perfectly framed mobile experience. The Editor, on the other hand, only allows you to replace a single image that is common to all formats.