Streaming live at 10am (PST)

Checkbox for responsive images is missing? Pixelated images in grid upon publishing

Similar to others, I’m having the issue with pixelated images upon publishing my site within a grid. I’ve read the solve is to uncheck the “Responsive Images” box, yet it doesn’t appear for me in the image settings.

Might anyone have an ideas or what I could try next?

Thank you!

Link to Published Page

Link to Read-Only webflow project:

Hi @MichaelL,

You shouldn’t have to activate that any longer, it’s automatic now. But you will need to decide on your choice of width value; not the height. For images, height is not necessary, just add a percentage or viewport width to control pixilation. I recommend adding this to the parent div not the image itself, this will allow the image to flow inside freely as the Div size scales. A value on the image is fine too, I prefer the parent though :slight_smile:

Hi Gary,

Thank you for the reply! I tried both placing 100% in the image width, As well as it’s max and min width just to try it, yet it’s still blurry/pixelated. I also placed it in a div and increased the width to 100%.

Would you mind taking a look? The image in question lies within:
Section > Custom Container > Bottom Images (second one down) > Image 48 and Image 46.

Link

I’d imagine it could have something to do with the grid the image is within as it’s a single image taking up three separate cells:

Admittedly I’m not super familiar with Grid elements so I may not be the best person to help diagnose this issue, but I’d see if adding an area that spans the full width for those two separate full-width images helps out:

As a side note, your personal logo animation is super rad—nice work :metal:

Thank you Mikeyevin! I created a separate grid for those 2 images so they no longer span across 3 columns. That seems to have solved the issue with webflow incorrectly displaying them at their lowest resolutions.

Just to double check, this should be working though right? If you span an image across multiple columns, it should display at a higher resolution? It seems like a bug.

Oh! And thank you for the compliments! I put a bit of work into the logo animation! :smiley:

Glad that helped solve the issue, but for some reason I’m not seeing the high quality images on my end:

In terms of whether this is expected behavior, I can’t really say since I don’t have much experience working with Grid. It’s possible this is a bug when responsive images are spanning multiple cells within a Grid element which may be more to do with the JS library that’s powering the automatic responsive image feature.

That said, I notice another user having the same problem just yesterday so I’d probably recommend shooting a quick email over to Webflow Support so they are aware of the issue. You can either follow the link below, or it can be done directly in the Designer by hovering over the question mark icon at the lower-left, then clicking Help & Feedback, then the “Send us feedback or a help request” link :+1: