We just went live with a site for a documentary hosted on Webflow.
Something interesting is happening with images:
See Utica: The Last Refuge — Staff Stories. The top image seems blurry, even though the asset has enough resolution. If you size down the browser (drag it smaller) and then up again (drag it larger), the image gets sharper.
I can only think that what’s going on is that Webflow is serving the wrong image size version for the screen size?
This is an issue I’ve noticed that seems to be caused with images spanning across multiple grid cells. I believe it’s making the image “appear” smaller in width within the code than it’s ultimately displaying on screen, causing it to pull a smaller version of the image:
I’m not sure of an easy solution, however I’d argue that a grid element isn’t really necessary here—especially with that top section given it’s really just two stacked, full-width divs. My solution would be to remove that title and main image outside of a Grid completely and the image should pull a higher resolution version
I hope it’s fixed as well, although it may be more of a limitation between the JS library used to generate the responsive images and grid elements in general so I’m not sure if it’s something Webflow necessarily has the ability to “patch” until the library itself is updated.
That said, there may be some solution out there that can be applied by including some style properties to the image and/or grid element but I haven’t had an opportunity to test anything. Given this is something I’ve seen multiple posts about recently, I may take some time next week to run some tests on my own and I’ll be sure to make a thread if I find a good solution
