Blurry Image All of the Sudden

Design help General
1

Hey everyone!

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?

Here’s screenshots for comparison

image
image1444×666 88.7 KB

image
image1415×623 118 KB

Check the published page here: https://bowsprit.webflow.io/dire
and the Designer Webflow - Bowsprit Asset Management

Cheers!

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

2

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.

7 Likes
3

THANK YOU SO MUCH!! It really works!!

just out of curiosity, why is the image still responsive despite i’ve unchecked the box? @dram

4

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.

1 Like
5

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?

6

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.

https://preview.webflow.com/preview/brother-2022?utm_medium=preview_link&utm_source=designer&utm_content=brother-2022&preview=4b08e6f67a8072d6ba4ec7158084f7cc&workflow=preview

7

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.

8

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);
  );