Streaming live at 10am (PST)

The responsive nature of HiDPI imagery and Object-fit Issues in Webflow

Hi everyone…

So this is my first time in the forum…

I was hoping that someone could help me understand what is going on from a responsive image reproduction perspective within a site I’m currently developing for our studio.

So visit the home page for reference: https://communique-uk.webflow.io

I will be replacing all place holder background images with inline HiDPI imagery controlled by the Object-Fit, Cover selected. The image that is in question is the first test image of a desk with 4 devices showing a site that I have designed recently.

This image has been placed as HiDPI and is double density as it should be. I deliberately created it at a very large size on purpose (700kb in size) as a test. I just wanted to see what happened to the quality and files sizing of the images created through WebFlow responsive image creation system on all devices. It looks great through Webflow’s viewer, but unfortunately it looks terrible when viewed online via any browser!?

I’m wondering if it was because I’d used 100% width… should that make it difficult for Webflow system to define the size image it should create for each device? Or is it any issue with HiDPI that I don’t understand/know about perhaps?

Has anyone got any idea as to why this could be happening?

Kind Regards
Andy


Here is my site Read-Only: LINK
(how to share your site Read-Only link)