I’m using Webflow’s built in slider in the hero section of a site I’m building.
The client has noted that on larger desktop displays that the quality of the images aren’t great. I agree: Despite being natively 1920px wide, they’re rendered at a lower size.
Using the ‘disable responsiveness’ toggle in the image settings fixes the issue, but also means that 1920px images are served up to users with smaller screens - less than ideal.
I understand why Webflow does this, but wonder why they don’t offer a toggle to ‘disable responsiveness’ at desktop resolutions.
My question is:
Has anyone come up with an elegant way around this?
Right now my solution is to place two images within each slide, one set to be responsive that is ‘display: none’ at desktop resolutions, the other with responsiveness turned off set to ‘display: none’ at tablet and mobile.
It works, but adds more work and makes CMS control much more difficult for the client.
Is there a better way?
Javascript perhaps?
With thanks,
Michael