Broken CMS Support for Responsive Images (No srcset)

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? :thinking:
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.

3 Likes

This is wonderful news!

Here is the share link. @webdev @Zeke8990

On the landing page, the first image comes from cms as well as the images from the article list below it. The featured image always serves me the 500w version - for max width 479px, even though the image size is clearly bigger.

It is Webflow who is promising to automatically generate variants.

True, Jörn and Riley confirmed my bug on March 31, and @webdev followed up with confirmation yesterday:

I think I am now getting srcset on the collection on my homepage: https://www.milkshaken.net/

But not on my product page where the images are pulled from the same collection but are inside a slider: MINI SKIRT | MILKSHAKEN | Dark avant-garde slow fashion

read-only: https://preview.webflow.com/preview/milkshaken?utm_medium=preview_link&utm_source=designer&utm_content=milkshaken&preview=239060f8817d66eb084e4bc18c6da8cd&pageId=5e9dbe3ac7074162282e9765&itemId=5e9dbe3ac7074193392e980e&mode=preview

Unless I am mistaken, this changed yesterday, the day before there was no variants appearing in the code.
I am not well versed enough to check if the correct variant is firing for the viewport.

Well, it should be noted that Webflow will not generate variants for an image that is already compressed.

Is there a particular threshold for that?

Beats me. But here are a couple of good compression tools/web apps (if you don’t need large batch processing):

It looks like you are most of the way there. Chrome’s DevTools Elements panel does prove that Webflow is generating responsive images (srcset) on your homepage, but not for your product page slider (for whatever reason).

If you hover over the img src in the Elements panel, DevTools will tell you “currentSrc.” Your homepage is using Webflow’s MINI-SKIRT-----FRONT-p-800 variant on my tiny 1366 x 768 resolution (just a couple pixels less wide would pull 500px).

You can also track down this information in the “Network” panel. Your original 1842 pixels wide image is 116 kB, while Webflow’s 800px variant is only 19 kB!

1 Like

Thank you very much for taking the time to check and explain! :man_technologist: :woman_technologist:

Can we please also get a link to your published site so that we can see how browsers are (or are not) generating responsive images?

@webdev

Nothing much to add other than I found this thread after noticing this issue on multiple projects today and emailing Webflow support about it. I’m also seeing unpredictable behavior in that certain images coming from the CMS have srcet/sizes tags, and others do not.

Fingers crossed this will be fixed soon.

And I would encourage anyone here who hasn’t already to email support@webflow.com about this. The more support tickets they get, the higher priority it will be (even if it is already in code review).

1 Like