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

1 Like
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.

1 Like
6

Bumping this for visibility. I’m not seeing srcsets on any of my images loaded from CMS Image fields.

7

Responsive image generation is only available for inline images uploaded directly to Webflow’s asset manager.

To achieve responsive images for CMS content, users often resort to custom solutions. One common workaround involves using an external image CDN service like Cloudinary, Imgix, or ImageKit. These services can dynamically generate and deliver optimized image variants based on device size and resolution. For example, Cloudinary offers JavaScript libraries and APIs that simplify responsive image handling while optimizing formats and delivery speeds.

However, integrating an external CDN requires additional effort, such as embedding custom code into Webflow or reverse proxying the site with tools like Cloudflare. While effective, this approach may complicate maintainability, especially for non-developers or projects with multiple editors.

If this level of customization feels excessive, users might consider alternative platforms better suited for handling responsive images in CMS content, such as WordPress.

8

did you find out more about this?

9

Webflow supports srcset for static images only, where it can measure the area you’re placing the image and determine what srcset to generate.

CMS images don’t work that way, even when you add them through the designer.

You can just add your own srcset, depending on how you’ll use it. If you’re automating the image upload you create 4 or 5 fields for different images sizes and prepare the image sizes you want. Then just create the srcset attribute yourself.