I am working on a new simple site for my studio and am having a weird issue. While the Designer view shows the correct image resolution, when I publish the site to the staging URL, some of the blocks are loading responsive images that are actually too small, and therefore appearing pixelated (screenshot attached). Is there a way to either automatically or manually fix this? Thanks so much.
Read only: Webflow - Shapemaker 2019
Staging URL: https://shapemaker-2019.webflow.io
I saw something similar I was trying to debug the other day.
The image is fine (I would use PNG since it has text) but when webflow is creating the responsive images and the size parameters, it is adding some additional sizing code that is creating the issue with a browser.
<img src="https://assets.website-files.com/5c51fd5850968d635f794dd4/5cba2c4666d1ec42dbeaebff_PharmaSense-Mobile.jpg" width="900"
srcset="https://assets.website-files.com/5c51fd5850968d635f794dd4/5cba2c4666d1ec42dbeaebff_PharmaSense-Mobile-p-500.jpeg 500w,
https://assets.website-files.com/5c51fd5850968d635f794dd4/5cba2c4666d1ec42dbeaebff_PharmaSense-Mobile-p-800.jpeg 800w,
https://assets.website-files.com/5c51fd5850968d635f794dd4/5cba2c4666d1ec42dbeaebff_PharmaSense-Mobile-p-1080.jpeg 1080w,
https://assets.website-files.com/5c51fd5850968d635f794dd4/5cba2c4666d1ec42dbeaebff_PharmaSense-Mobile-p-1600.jpeg 1600w,
https://assets.website-files.com/5c51fd5850968d635f794dd4/5cba2c4666d1ec42dbeaebff_PharmaSense-Mobile.jpg 1800w"
sizes="(max-width: 767px) 100vw, (max-width: 991px) 4vw, 5vw" alt="">
The issue appears to be with 4vw, 5vw, if I delete that in devtools, the image clears right up. Ball needs to go to webflow.
Thanks @webdev. I figured it had something to do with the automatic responsive stuff. Is there not a short term solution to remove that code with JS or something? I need to get this site up soon, but am apprehensive to do so with the images so grainy.
I think this is a recent thing introduced over the last week or so. I am not sure what is triggering it on webflow’s side so it would be hard to predict the values placed in the sizes attribute, making it hard to target.
See if you can place that image in a div (block level element) and publish. It may be what is throwing off the responsive calculation. I would like to see that test.
@webdev Huh, that’s weird. So are you saying try placing an additional div inside of the project element, or just try it out in a div at the highest dom level (inside of body).
Add a child div to that div.work-item, move the image into the new child div and your div.work-item-details. That is the test.
So: div.work-item>div>img+div.work-item-details
Don’t worry about the interaction.
Yeah, nothing changed. You can see it on the read-only and staging URL now in that third image. I added a .work-img-wrap class and it is still behaving the same way.
Well it was just a test I hoped would solve your issue. Open a trouble ticket and reference this post for the explanation.
I just did so. Thanks for chiming in on this—hopefully we get answers soon.
the bug you are describing is an old problem with grids. For now the only way to fix this is disable responsive images for the images in the grid. Press CMD+SHIFT+O on Mac or CTRL+SHIFT+O on Windows, then click the checkbox that’s revealed in the image settings panel (“responsive images”).
I too hope this will be resolved soon.
Hi Alexander,
This is definitely something to do with the responsive image method, I fixed weird things like this using the same method as @dram. Turning off responsive images for the content that was loading with the wrong dimensions for desktop. The responsive image algorithm requires granular/human control especially for desktop.
It’s not ideal but does fix it at the expense of load times and all the work Webflow have done on the implementation of responsive images.
Hopefully this will be resolved soon.
Cheers.
Are you saying there were instances of wrong responsive images generation in different cases than images in grid element? You may want to notify Webflow team about those problems as well, since I haven’t heard reports of this happening.
It might be to do with a reliance on image source tied to width rather than alternative CSS methods of defining dimensions?
Using long edge image dimensions makes more sense to me for implementation across devices/things.
Do you have an example of incorrect image behaviour?
Make a collection, place those images in a grid in the template with dimensions set in css (max vh/vw/%) rather than pixels in width/height and test it cross browser.
I mean I thought you’ve said that this problem happens not only when inside grid?
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.