I just realised today that all ‘Image’ element on my published website became blurry. They are all fine in the designer and they were also fine yesterday. I think it just started happening today.
The blurs are quite unacceptable tho thats why im bringing it up here. Does anyone know how to sort this?
It is a known problem with webflow’s responsive images and grid. Disable the responsive images on all images that you put into the grid by first CMD+SHIFT+O or CTRL+SHIFT+O then selecting the image and disabling this checkbox in its settings.
I think you should read about the responsive images here to understand how it works and what Webflow team means by “responsive” in this particular case. I understand why you may be confused by the language.
Is there a best practice at this point for continuing to use grid but allowing for responsively-sized images? Would setting a min or max-width at different viewports but still allowing it to span the grid help?
Hi Dram - I’m having the same issue except it won’t let me uncheck the Responsive Image box. I do the CMD+SHIFT+O and the Responsive Image checkbox appears in the settings. I then select image and I can see the checkbox, it just won’t let me uncheck it. Any ideas? Thanks in advance.
Webflow does not allow to check that checkbox anymore. So how should we solve this issue that seam to have come back ? This makes me wanna hesitate to use webflow for further projects since it should be such a basic standard.
I looked into this issue and found that in my case it is caused by wrong “sizes” attributes for the srcset. My images span multiple columns and this is not reflected in “sizes”. Because of this the images selected from the srcset are too small.
As I depend on this for my layout to work, I fixed it with this JS. This replaces the wrong “sizes” values :
// select all images in grid and loop through list
const portfolioImage = document.querySelectorAll('.image-in-grid');
portfolioImage.forEach((image) => {
// calculate column width based on screen width minus gutters, minus margins divided by number of columns
const gridColumnWidth = (window.innerWidth - 80 - 22*16) / 23;
// calculate image width based on column span
const imageSpan = styleImage.gridColumnEnd - styleImage.gridColumnStart;
const correctImageSize = (((gridColumnWidth + 16) * imageSpan));
// calculate image VW and set as sizes attribute
const correctImageVW = correctImageSize * 100 / window.innerWidth;
const correctSizesAttribute = `(min-width: 480px) ${correctImageVW}vw, 100vw)`;
image.setAttribute("sizes", correctSizesAttribute);
);
