The standard Image element for the top hero uses srcset for my 2563 pixels wide, 1 MB JPG. However, the same image from a Collection Image field does not (first image in the Collection list grid).
Tested in Chrome and Firefox.
Read-only project: Webflow - Tim's Playground
Published site: https://tim-playground.webflow.io/
Webflow does not support or make responsive images coming from any CMS field in any way. The images will only be optimized if they’re uploaded to the asset manager.
It’s completely ridiculous, and I’ve had to do huge workarounds to not make some of my pages perform horribly.
A missing feature is not a bug. Topic changed to Design Help → Layout.
At a minimum make sure Chrome is loading the images lazily and optimize accordingly.
Sheesh, not very cordial, even if you were correct. However, Webflow Support has already acknowledged that I found a bug. Plus, you know:
“Once an asset’s variants have been generated, any inline img you use that asset with will be responsive, including images in symbols and dynamic images pulled from a CMS Collection.” - Yoav Givati, Engineer at Webflow
Sorry for the brevity @Zeke8990. I don’t recall a time where responsive images were ever generated on a page where images came from a CMS field. I may have assumed that the blog post was simply incorrect (it’s from 2016). Many blog posts are from third parties, yet this one is not. I have avoided using the CMS with anything but small images unless I handled the images externally from Webflow (which I do mostly when I use it).
The related page on the University references the blog and does not clarify whether CMS generated assets (inline not rich text) indeed trigger the responsive image generation.
In the University they state;
What are the supported image types?
This feature generates responsive variants for all inline JPGs and PNGs, except those added via rich text elements. It also doesn’t apply to background images. We recommend SVGs and PNGs for high detail or vector based images, since these have lossless compression.
What I can confirm.
Images from the asset manager, placed on pages and even collection templates, trigger the responsive image generation we would expect.
Images that are derived from CMS collection image fields do not, regardless of where (collection template or collection list).
The responsive images work for me (the src set is made) no matter whether they come from CMS or the asset manager. On the other hand a wrong image size is served and the image is blurry so the feature is still unusable for me.
Wow… so Webflow implemented this in 2016, it didn’t work - and it still isn’t fixed? Did they not test this?? I’ve been tearing my hair out over this for so long, and multiple forum posts and whishlist items popped up on searches so I just assumed it was intended.
So I’ve done a bit of checking, and for me - images from CMS coming through the rich text field and single image field are not getting responsive versions.
However, images added to the multi-image field are, but it sometimes uses the smallest possible version and sometimes not. I added 10 images of the same size (1365x768), displayed in a 123x69 box, some got and displayed a 500w version, others didn’t get smaller than 800w.
Notice how the top image here didn’t get a 500w version even though the image resolutions were the same.
No problem. That is interesting how the University page ignores CMS when specifically declaring both support and nonsupport.
However, even more confusing/infuriating, is that a colleague has srcset working just fine on his Collections (CMS Collection page)!
Argh! Link?
The wrong image/blurry is strange. But yeah, a colleague has srcset working just fine on his Collections! [see above]
Yeah, I’ve been killing myself over tests, especially since a colleague has srcset working on his Collections! [see above] I also tried a Multi-Image Field, even in a Lightbox element, but no-go. (I wanted to keep this test page simple and focused.)
Sigh, so erratic. A colleague has a Multi-Image Field working (and in a Lightbox element, see above), but I have no such luck.
So I just confirmed that on a CMS template page, using a multi-image field as the source for a collection that uses the lightbox component does create responsive images. No other condition does in my testing.
Some of those collection images your colleague made actually doesn’t have srcset. Confusing stuff!
What workarounds might those be? Would you be willing to share a general outline?
@Zeke8990 What are the actual implications of the above quote? How would one make sure that an asset’s variants have been generated then, before this asset gets pulled by a CMS Collection?
What are possible solutions?
There are a number of options, most time consuming.
1: Lazy load all images (doing this for all)
2: Run automatic optimization and resizing through the API (doing this for something)
3: Manually resize and optimize images to create thumbnails, then add to a seperate field
Could you expand on number 3?
If one doesn’t have hundreds of images it sounds workable.
Would that be something like create a fast loading thumbnail for each cms asset and upload that to collection and then use your full image on an inline img? And then…?
My bad - in my use case I need thumbnails/optimized images for my front page, with the full size images in my articles. Instead of just using the same image and relying on the (non-existant) Webflow responsive image thingy, I need to take the image, resize it and have a separate image field for it - which I thenk use on my front page. Inside the article the full size image is used. It’s horribly inefficient.
I see.
Thank you very much for clarifying. I suppose that makes things better for your homepage but you are still getting an unresponsive image in your blog post.
I still wonder what the below means.
“Once an asset’s variants have been generated, any inline img you use that asset with will be responsive, including images in symbols and dynamic images pulled from a CMS Collection.” - Yoav Givati, Engineer at Webflow
How would a CMS asset’s variants be generated before it’s pulled from a CMS collection? Is there some way to add the image via the asset manager, use it as an inline image and then feed that through the CMS? 
I may very well be missing something obvious, but could someone explain?
They way I’m reading it he’s saying any image will be responsive. But they’re not. Apparently OP has gotten feedback from Webflow that it’s a bug. We should probably also contact them and nudge them on in that case.
Here is an update I got from Webflow. This is an accepted bug and the fix is under code review. I can’t provide an ETA for a fix as WF does not provide those. Hopefully soon.
This is wonderful news!
