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.