Responsive Image Generation

Design help Custom code
1

Webflow is not generating responsive images (img tags with srcset, sizes, etc.) for some CMS content. I have tried the “Responsive Image Scan” with publishing and unpublishing with no luck.

Example:

  1. Visit the test site url.
  2. Inspect the images, and see that they have no srcset or sizes attributes.

Steps to Reproduce:

  1. Create a CMS collection with a “Multi Image” field.
  2. Let webflow populate the collection with placeholder data.
  3. Create a CMS collection page.
  4. Add a collection element to that collection page.
  5. Add an image element to that collection element, references the “Multi Image” field.
  6. Publish and inspect.

Here is my site Read-Only

2

I have a photographer client now for whom I’m building collections for them to host their various galleries and this is an absolute dealbreaker. Can’t rely on webflow for gallery collections for this reason. What a 2010 problem to have and not fix. Pathetic. This makes it very difficult for photography niches…

2 Likes
4

Agreed. Have you run into this issue before or just recently?

1 Like
5

If I upload through the Webflow CMS interface, this does work now for me. However I’ve imported many 100’s of images to both single image fields and multi-image fields and these do NOT get the srcset (which they do need).

This is indeed a very big problem if you’re dealing with migrating (big)data and you cannot rely on manually uploading each file.

There is a CTRL-SHIFT-I command you can run, which can rescan srcset images, and it seems to have worked for some people. For me however it does not fix the problem, and all images remain loaded at full resolution, bogging down the site speed to an agonizing crawl.