Blurry/pixelated images on published site

Can someone help me figure out why the images appear blurry on the published site? They were displaying properly, now without any change on my part they appear blurry. I tried to reupload them at really high res. on the first load after publish they appeared sharp and reload they become blurry again.

https://origamidesign.webflow.io/casestudy-01
https://preview.webflow.com/preview/origamidesign?utm_medium=preview_link&utm_source=designer&utm_content=origamidesign&preview=19aa8c179c7bf94a94e7d542f38f05b9&pageId=5de42479d41c9b32a8cd4d28&mode=preview


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

the issue seems to be related to the grid. same image published outside of the grid is displayed perfectly sharp.

Hi there, can you provide any screenshots of the blur?

Canā€™t seem to see any issue here even after a refresh of the page.

Cheers!

problem solved, the issue was that the check box for ā€œresponsive imagesā€ was not in the setting pane, (have no clue why) but now after reporting a bug to webflow team this check box magically appeared and when unchecked images display properly.

1 Like

Interesting that reports of buggy responsive images inside grids are really old at this point (I personally noticed this after grids were launched). Too bad itā€™s still the case (I almost never use grids so didnā€™t even know the problem persists).

Hi, Iā€™m experiencing the same thing, where I can find that ā€œresponsive imagesā€ checkbox?

Welcome to the community, @Isabel_Vergara!

This setting is hidden in the element settings panel by default, but you can reveal it with the CMD/CTRL+Shift+O keyboard shortcut:

1 Like

Hey @dram ,

interestingly enough, the bug is still present today. As soon as images are placed in a grid in my project, only the responsive image with intrinsic size of 500px is displayed automatically. So the smallest of all generated images is displayed at each breakpoint. This is super humbling and a bugfix would be greatly appreciated by me and many others who probably havenā€™t even identified the bug as such yet.

Best regards,

Dennis

1 Like

Can you share your published project? It looks like things work properly for me but I am not sure what conditions to replicate to get this bug.

Hey @dram ,

well, based on this post and a few others, I changed the layout to flex to work around the bug. Now I wanted to put it back on grid for you and the bug doesnā€™t show up anymore. All images are now sharp, even in grid. WTF?

Iā€™ll watch this and maybe just try to reproduce the problem independently of a project and report back here.

But anyway Dram, thanks a lot for your really very fast response.

Kind regards,

Dennis

Interesting! Could be a caching issue or something - those are pretty common.

How strange that a ā€˜Responsive Imageā€™ option makes the image blurry. Unticking this option also fixed image blurring for me.

1 Like

Unfortunate this bug is still present today. WTF !!!
I had reported to support with video.

As of Feb 2024 and as mentioned above, TICKING the ā€œDisable Responsivenessā€ property under the Settings tab of the image does the trick. It forces your website to load the original image in all its glory at the cost of loading time.