Webflow Delivering Incorrect Image Sizes on CMS items

We have an issue where the image being shown by Webflow is too small and therefore bad quality.

I’ve uploaded images to the CMS collection that are of double the size they are shown in the design.

Image size: 2200px x 1280px
Design: 1100px x 640px

I’m on a 14" screen and I’m receiving a 800px wide image. An 1800px wide screen (3600px retina) should be requesting the full size image.

I’ve tried set my width and height in the image settings (not style) as both the retina and non retina sizes but didn’t have an effect.

image

Below is a snippet of the code rendered by Webflow and I see a few issues with it.

Firstly the src attribute should use px (not w) as the intrinsic size of the actual image.
Secondly, I’d expect there to be the same number of sizes as in the sizes attribute where I’d see matching intrinsic sizes (px in src should match w in srcset).

The 800px image i’m seeing is the second (!!) image in the list. There’s clearly something wrong here.

Any thoughts/ideas from the community/Webflow would be appreciated. Is this a problem with CMS collection images?

<img alt="" loading="lazy" width="2200" height="1280" 
  src="https://assets-global.website-files.com/....jpg" 
  sizes="(max-width: 767px) 16px, 
    (max-width: 991px) 64px, 
    (max-width: 1919px) 21vw, 
    12vw" 
  srcset="https://assets-global.website-files.com/...-p-500.jpg 500w, 
    https://assets-global.website-files.com/...-p-800.jpg 800w, 
    https://assets-global.website-files.com/...-p-1080.jpg 1080w, 
    https://assets-global.website-files.com/...-p-1600.jpg 1600w, 
    https://assets-global.website-files.com/...-p-2000.jpg 2000w, 
    https://assets-global.website-files.com/....jpg 2200w">

Here is my public share link: LINK
(how to access public share link)

After getting feedback from support, by pressing CMD + Shift + O reveals an extra setting to enable/disable responsive imagery (intuitive).

IMO this still doesn’t resolve the above issue but indeed fixes my issue.

image

@flowst8 - I always wrap an image in a div and use that div to specify dimensions because sometimes the process Webflow uses to calculate the responsive values returns inaccurate results. Unfortunately your can’t provide Webflow seed values you want to use. However, in my experience, most issues are resolved with the method I described.

I think you’re getting confused between using styling to make image a certain size and providing the correct size image source file? If not, so you’re saying Webflow uses a wrapping element in the designer to determine HTML values in srcset and sizes?

@flowst8 - What I mean is that the process Webflow uses is not always able to determine correct values for the responsive srcset and sizes.

I built a site on Webflow to try to figure out what the logic was so we could at least see under what conditions (in a page) it would generate responsive images. At this test site I created a bunch of images. First test was to see if dimensions alone triggered the routine (no) and then size and weight (yes but not always).

https://responsive-tester-58a152.webflow.io/

When the routine Webflow uses produces what we consider as wrong results, I have found that wrapping an image in a parent block level element seems to fix the regen sometimes. Not saying you need to define dimensions here. The routine seems to get confused when using CSS Grid more often. Below is the original thread when the responsive image feature was launched and staff commenting on how and when it does what it does. Note: CSS Grid was not launched until much later in Webflow.

https://discourse.webflow.com/t/new-feature-responsive-images/33309/40

It would be nice if someone from the support team provided a FAQ for dealing with issues related to this. They see them all.

1 Like

Fantastic work and thank you for the explanation.

In short, this is a half-baked feature and I agree, some response from Webflow would be great.

Thanks again. I’ll try wrapping in a div and see if this helps.