Responsive image variants in Webflow, and the sizes value

An image can look small on the page and still arrive as a large download. CSS controls the space the image occupies, but the browser also needs to know which files exist and how much space the layout will give the image.

Webflow generates responsive variants for supported images uploaded directly through its interface. That helps, but it’s no reason to stop checking the published page. The image source, layout changes and the browser’s own decisions all still matter.

The three pieces of an image

Think of the image as three separate decisions:

• CSS layout: how wide the image is displayed.
• srcset: which files are available and how wide each one is.
• sizes: an estimate of the displayed width at different viewport sizes.

With width descriptors in srcset, the browser uses sizes, screen density and other conditions to choose a candidate. It doesn’t simply pick the file labelled “mobile”.

Here is an illustrative image. Your project would need to provide these files:

<img
  src="/images/project-800.webp"
  srcset="/images/project-400.webp 400w,
          /images/project-800.webp 800w,
          /images/project-1200.webp 1200w"
  sizes="(min-width: 1200px) 560px,
         (min-width: 768px) 45vw,
         92vw"
  width="1200"
  height="800"
  alt="Dashboard showing the project's reporting interface"
>

Those values describe this example’s layout. They aren’t a universal snippet to paste into every Webflow project.

Why a wrong sizes value wastes bytes

Imagine a card that takes up roughly a third of a desktop row. If its image tells the browser it needs the full viewport width, the selected file may be far larger than necessary.

The reverse problem also happens. Understating the width can leave the browser with too little detail for the size it’s shown at. A card that expands on hover or opens into a large preview needs particular attention.

Screen density explains another apparent mismatch. A 400 CSS-pixel image on a high-density screen can reasonably use a file with more than 400 physical pixels. The goal is an appropriate download, not always the smallest file in the list.

Webflow’s automatic behaviour has boundaries

Webflow’s documentation identifies exceptions. Responsive variants aren’t generated for background images or for images inside rich text in the same way as supported inline uploads. CSV and API image imports also need checking, because the documented automatic variant process depends on direct uploads.

After a shared class or component changes an image’s layout, revisit the affected pages and verify their output. Webflow offers a shortcut for regenerating responsive images, but the published result is still the final check.

Don’t disable responsiveness across the whole site to fix one strange image. Find out first whether the problem lies in the file, the layout, the generated attributes or a special interaction.

$0.currentSrc
$0.getBoundingClientRect().width
window.devicePixelRatio