Why is an image not displaying correctly on your hotel website?

Identify the causes and achieve optimal visual display

Key points • Check the format and size of the imported image • Check the layout and display mode • Identify responsiveness errors between desktop and mobile • Fix cache or loading issues

An image that doesn't display correctly can detract from the overall appearance of your hotel website and negatively impact the way your establishment is presented. This problem is often related to an incompatible format, incorrect layout settings, or poorly configured responsive behavior. Here's how to quickly understand the source of the problem and fix it effectively.

Check the image format

Make sure the image is in a compatible format: • Recommended: WebP, JPG or PNG • To avoid: HEIC, TIFF, PSD or images exported from iPhone not converted Some non-standard formats may display on one browser but not on another.

💡 Always convert your images to WebP or JPG before importing them to ensure maximum compatibility.

Control the size and resolution

An image that is too large or too small can display incorrectly: • Too low a resolution results in blurriness • Too high a resolution can slow down display or generate errors • An image compressed multiple times can lose quality Recommended size for a hotel website: • 1200 to 1600 px wide depending on the location • Landscape format for room and space visuals

Check the display mode in the layout

Depending on the integration type, the image can be: • Extended or stretched by the container • Automatically cropped if used as a background • Displayed as a cover or container depending on the configuration • Blocked by a fixed height or an incorrect aspect ratio

To correct the display: • If the image is a background image, use `cover + center` • If it's a standard image, use a percentage-based width • Avoid fixed widths that are too small or imposed heights

Identify mobile display problems

It's possible that the image displays correctly on a computer but not on a phone. Common causes: • Mobile version using a smaller image • Section hidden or duplicated between desktop and mobile • Forced aspect ratio that distorts the image • Image automatically cropped vertically

💡 Check your breakpoints and test on a real phone, not just in preview.

Ensure that the image has been published correctly

An image may appear grayed out, disappear, or remain blank if: • The edit has not been published • The image has been deleted from the library • Loading was interrupted during import • The browser cache is displaying an older version

Quick solutions: • Republish the page • Refresh in private browsing mode • Re-upload the image properly

Check the scripts or animations surrounding the image.

Certain animations or interactions can prevent the image from displaying correctly: • Fade-in effects triggered too late • Misconfigured lazy loading scripts • Carousels or sliders that obscure the image on mobile devices • Complex animations causing delayed display

Temporarily disabling the animation helps to confirm the source of the problem.

Control image permissions and links

Rare but possible: • The image comes from an unauthorized external link • The file has been moved or renamed • The CDN has not yet synchronized the image

Directly re-importing the image into your media library often solves the problem.

Conclusion

An image that doesn't display correctly on your hotel website is usually due to an incompatible format, incorrect display settings, a responsiveness issue, or simply a cache problem. By checking these elements, you can restore a clean and professional presentation, essential for showcasing your establishment and encouraging bookings.