Images from CMS item blurry once published

Hi everyone,

Been struggling a bit here for the last few days with this CMS image issue and I’ve been losing my mind over it.

For some reason when I load in a multi-image collection set, the images look great in the designer but when published the images seem to get scaled down and then back up. All my images are just a bit larger than the image width set on the image element and a px number has been set on the element as well. From what it looks like, it appears Webflow is providing the 500px width version and then my CSS is scaling it BACK up to the width I’ve set. (check screenshots).

Looks fine and checks out in the editor

Once the page is published is where things get weird (check the intrinsic and rendered sizes)

The weird thing is this only happens if I mess with the class after I uploaded images into CMS entries. In the links below, you’ll notice that it only happens to the first group of images (first project section), but the rest are totally fine despite using the same exact layout and classes.

For the life of me, I can’t figure out Webflow’s logic on this and why it would be forcing a smaller image than what the CSS has dictated. Is there a way to overwrite or maybe a CSS workaround?

Here is my public share link: Webflow - Stalla Design

Link to staging site - Futr Events | Creating the FUTR of live events | Stalla Design

Quick update - Images load fine ONLY if you recreate the collection list outside of the container/div/section, publish, and then move back into the desired area.

Somehow fixed part of the issue, but if I want to edit any of these sections, Ill have to go through that again and keep redoing this.

My guess is Webflow is looking at something within the containers or divs and it renders smaller than 500px for a split second and that’s where Webflow wants to serve the smallest image.

If anyone has any experience with this, please let me know so I can save some of my sanity for next year :laughing:

Ok someone from Webflow got back to me via email - simple fix for this here

Control (or command) + shift + O → brings opens a setting if you’re clicked on the image element. Youll have a checkbox for “responsive image” that you can deselect and will stop rendering images automatically if you are having issues.

Shoutout to Diego from Webflow for the quick win!

Documentation exists in the University. Responsive images in Webflow | Webflow University