“Image performance is a design decision: preserve the information, but deliver the right bytes for the moment.
Diagnosis
Property galleries often make the first screen wait for images that are larger than the device needs. The cost is not only a slower page: a late hero image can delay the main visual experience, while an image arriving without reserved space can move prices and enquiry controls. Compression alone is not a strategy if it makes floor plans or room details unreadable.
Decision framework
Classify images by job: hero, thumbnail, gallery, or detail document. Serve responsive dimensions and modern, suitably compressed formats, but retain a sharper source for zoom or downloadable plans. Prioritize the image visible first, lazy-load below-the-fold gallery items, and reserve dimensions so the layout does not shift. Judge success with real-user Core Web Vitals—loading, interactivity, and visual stability—alongside a human detail check.
Explicitly hypothetical property example
Implementation and measurement
Create an image manifest with role, dimensions, format, and quality settings. Test on representative Egyptian and Gulf devices and network conditions, then inspect LCP and CLS field data by template, not just a single lab run. Sample floor plans and facade details at normal and zoomed views, and record any readability failure before shipping.
Put it to work
- Assign each image a role, target dimensions, format, and quality rule.
- Reserve image space and lazy-load gallery items below the fold.
- Review field LCP and CLS plus readability of plans and details.
Sources and visual credits
- web.dev: Web Vitals
- web.dev: Optimize Cumulative Layout Shift
- web.dev: Fast load times/image resources hub
Illustrative photograph: Computer keyboard placed on a black desk in a modern workspace. It does not depict the hypothetical example. Shixart1985 · CC BY 2.0 · Wikimedia Commons · CC BY 2.0