Image srcset bug, images served in low resolution

Design help General
1

When I compress a PNG using tools like tinypng, Webflow often starts serving it with the wrong srcset for all devices, resulting in a low resolution image. The only solution I found to this was to put the image on the site using a HTML embed to force it to serve the correct image. Needless to say, this is quite cumbersome. I emailed Webflow about this way back, but never got an answer. As these are mostly quick-turnaround client projects, I don’t have the time to wait for Webflow support’s response anyway.

I also see that multiple people have opened threads about this issue (though mainly affecting CMS images), but they never got a response.

Did anyone else run into this issue?
Any word on a potential fix for this bug from Webflow?

2

Hey Levente,

The purpose of media srcset is that it gives browsers the ability to choose from different media sources depending on the image display area. Smaller size = grab a smaller image.

Different browsers might choose differently, but when I see issues here it’s often because the IMG wasn’t sized, and therefore the browser predicted it would be small, and grabbed the smallest image.

During your page load, watch out for;

  • initially hidden, or unsized images
  • interactions that start with your image very tiny, and then expand it

Basically anything that makes it difficult for the browser to determine what the final size of the IMG will be. I agree that it would be nice to be able to turn that off, for these special situations. You could remove the srcset attributes using script if you wanted to, to prevent the browser from choosing a smaller size.

1 Like
3

Thank you for your response!

I wish I could reproduce the bug and test your ideas, but currently webflow seems to load the correct resolution image on the previously buggy projects even when there wasn’t an explicit width set.

I’ll update this thread in case I run into the same issue again.

4

Hey there,

I just got the same bug on a different project. Even with a width set for the image, Webflow still loads the wrong srcset versions. Any other tips on how this could be solved?

Due to NDA, I can’t publicly share the link but I’d gladly send it over in a private message.

5

Webflow generates the image variants, and the srcset HTML attributes, but its up to the browser to decide what and when it loads different versions.

On Webflow’s side of that, you can regenerate srcset images, I think it’s CTRL+SHIFT+I.

You could also turn them off entirely for a specific image with CTRL+SHIFT+O.

1 Like
6

Thank you! Turning off responsive images has solved the issue. Since I already optimized the images before uploading to Webflow, I think it won’t be an issue.