Implementation overview
How to set Appropriate Sizing and Background Images on Webflow?
Serving oversized images is one of the most common performance mistakes on Webflow sites. The browser downloads whatever file you uploaded — it doesn't know your image displays at 400px if the file is 2400px wide. That's 36x more pixels than needed, downloaded on every page load.
Webflow's responsive image system: for Img elements, Webflow automatically generates multiple sizes and serves them via srcset based on screen size. This happens automatically — but only if you've told Webflow the correct display size. If you set an image to 100vw width but your layout only shows it at 600px maximum, Webflow may still serve a larger version than necessary.
The Custom size field: in Webflow's image Settings panel, there's a "Custom size" field. This tells Webflow the actual rendered width of the image, which it uses to optimize the srcset. For a hero image that fills the full page width, leave it auto. For a card image that displays at 360px, enter 360px. Small step, meaningful difference in what the browser downloads on mobile.
Background images are different: images set as CSS background images in Webflow don't get srcset processing. They're served as a single file at whatever resolution you uploaded, regardless of device. This matters if you have a large background image on a mobile-heavy page.
The fix for background images: compress them before uploading, targeting under 200KB for most. If you need different crops on mobile vs. desktop — a tall portrait crop for mobile, a wide landscape for desktop — use Webflow's conditional visibility to show different sections at different breakpoints, each with its own optimized background image.
Monthly audit: run PageSpeed Insights on your top pages. The "Properly size images" and "Serve images in next-gen formats" audits flag images that are too large for their display size. Cross-reference these with your Webflow design and fix the Custom size setting or re-upload a compressed version.
The goal isn't to compress every image into low quality. It's to stop the browser from downloading a 2MB image to display a 300px thumbnail. That kind of waste compounds across a full page and shows up directly in your LCP and total page weight scores.
How to do it on Webflow?
Inline image: Webflow automatically optimize and create variants of this image at different resolutions. No need to worry here.
Background image: If you’re setting a background image on an element, like a section or container, the original image will be used. It means Webflow uses the same 3000 pixel image you upload to your biggest screen and your mobile. You don’t want to do this.
Tools
