How to Ensure Responsive Images Using srcset and sizes Attributes on Webflow?

By default, Webflow generates multiple sizes of uploaded images and adds the srcset attribute to Img elements automatically. Mobile users get smaller files, desktop users get larger ones, and the browser picks the right one. You get this for free on any Img element in Webflow — but only if things are set up correctly.

Here's where most Webflow sites get it wrong: the browser needs to know the displayed size of your image to pick the right source from the srcset. Without a sizes attribute telling it "this image displays at 600px on desktop and 100vw on mobile," the browser defaults to assuming the image fills the full viewport — and often downloads a much larger file than it needs.

How to check what Webflow is generating: right-click your live page and inspect the HTML for any Img element. Look at the sizes attribute on the img tag. Compare it to the actual rendered width of the image at different viewport sizes. If sizes says 100vw for an image that only ever displays at 400px, the browser is downloading roughly twice the file it needs on mobile.

The fix: Webflow's image Settings panel includes a "Custom size" field. This tells Webflow the maximum rendered width of the image, which it uses to generate a more accurate sizes attribute. For a card image that displays at 360px maximum, enter 360px. Webflow adjusts the srcset and sizes accordingly.

For images that change size significantly across breakpoints, you can set the Custom size field to different values per breakpoint — though this requires knowing the actual display width at each viewport, which means checking your design at each size.

Background images are different: images set as CSS background images in Webflow don't get srcset or sizes attributes at all. They're served as a single file at full resolution. If a large background image is hurting your mobile performance, either switch to an Img element (which gets Webflow's automatic optimization), or compress the image before upload and target under 200KB for most backgrounds.

Monthly audit: run PageSpeed Insights on your top pages. The "Properly size images" audit flags any image where the served size significantly exceeds the display size. Click through to find which image URLs are causing it, then cross-reference with your Webflow design to fix the Custom size setting.

Webflow's automatic srcset is a genuine performance advantage — most hand-coded sites don't implement it properly. The gap is in making sure the sizes attribute accurately reflects how your images actually render. Close that gap and you eliminate one of the most common sources of mobile performance waste on Webflow sites.