Webflow Image Dimensions: A Practical Reference

Recommended Webflow image sizes for hero sections, CMS thumbnails, sliders, lightbox galleries, and Ecommerce products — plus how Webflow's responsive image system actually works and what that means for what you should upload.

Looking for sizes for other platforms? See our full image size reference.

Quick Answer

2400 pixels wide for full-width images, 1600 for inline content, 800 for thumbnails. Upload as JPG quality 80 (or PNG with transparency where needed), target 200–500 KB per file. Webflow generates responsive variants automatically and serves WebP to modern browsers — you upload once, Webflow handles delivery.

That covers most Webflow image work. The rest of this guide covers element-specific dimensions, the responsive variant system, and the CMS-related conventions that keep collection layouts looking professional rather than improvised.

Recommended Sizes by Element

How Webflow's Responsive Image System Works

Webflow uses a srcset-based responsive image system. When you upload an image, Webflow generates five variants at preset widths (typically 500w, 800w, 1080w, 1600w, 2000w) and stores them in the Webflow CDN. The HTML output for each Webflow image element includes a srcset attribute listing all available variants:

<img
  src="hero-2000.jpg"
  srcset="hero-500.jpg 500w,
          hero-800.jpg 800w,
          hero-1080.jpg 1080w,
          hero-1600.jpg 1600w,
          hero-2000.jpg 2000w"
  sizes="100vw"
  alt="..."
/>

The browser picks the smallest variant that satisfies the rendered slot at the current pixel density. On a 1440-pixel-wide retina laptop displaying a full-width hero, the browser requests the 2000w variant. On a 375-pixel iPhone, it requests the 800w variant. You uploaded once; the platform serves the right size to each device.

Implication: upload above 2000 pixels only when the largest variant matters. For full-width heroes, 2400 gives you a buffer above the largest-generated 2000w variant on retina displays. For inline content where the rendered slot maxes out at 800 pixels, 1600 is plenty (the 1600w variant covers the retina case).

Hero Sections

Webflow heroes are typically full-width sections with a background image set via the Webflow Designer. The background image fills the section, scaling to fit the viewport. Two design patterns dominate:

• Cover background: the image fills the section completely, cropping edges as needed. Use 2400×1350 (16:9) source to ensure the image covers the entire section width on ultrawide monitors without revealing background color edges.
• Contain background: the image scales to fit the section without cropping. Less common for heroes; more common for product showcases where the entire image needs to be visible.

For LCP performance, hero images should never be lazy-loaded (Webflow disables lazy loading on background images by default, but check the inspector if your Lighthouse scores show LCP issues). The hero is almost always the Largest Contentful Paint element on the page; deferring it directly hurts Core Web Vitals scores.

CMS Collections

Webflow CMS Collections render dynamic content (blog posts, projects, products, events) in repeating layouts. The single most common Collection mistake is mixing aspect ratios across items — some thumbnails 4:3, some 16:9, some 1:1 — which makes the rendered grid look stuttered and amateur.

The fix is mechanical: enforce a single aspect ratio convention before upload, and communicate it to every contributor.

• Blog thumbnails: 1600×900 (16:9) — works in 3-column grids and feeds cleanly into og:image.
• Project cards: 1600×1067 (3:2) — fits a feature-focused layout.
• Product cards: 2000×2000 (1:1) — square for grid consistency.
• Team member photos: 800×800 (1:1) — head-and-shoulders crop.

Mixed orientations (some portrait, some landscape) within the same Collection break grid rendering even more aggressively than mixed ratios. Pick one orientation per Collection.

Sliders and Galleries

Webflow's Slider element renders horizontally-stacked images with consistent sizing. Mixed aspect ratios across slider items produce visible jumps in slide height as the slider advances, which feels broken.

Lightbox galleries are more flexible — the full-size view is shown overlaid on the page, so each image is allowed its own aspect ratio. The thumbnail grid still benefits from consistency, though, so crop the thumbnails uniformly even if the lightbox full-size sources vary.

For lightbox sources specifically: cap upload size at 2400 pixels. Larger sources don't improve the lightbox experience (the lightbox typically max-widths around 1600 pixels) and they slow page load if the lightbox preloads.

Webflow Ecommerce

Webflow Ecommerce expects product images at a consistent aspect ratio across the store. Default templates assume 1:1, and the product grid stutters visibly when ratios mix.

Recommendation: 2000×2000 pixels, square, JPG quality 85. The grid view downscales to roughly 800 pixels, the product detail page renders at roughly 1600 pixels, and zoom view (where supported) shows the full 2000. Multi-image products should use the same aspect ratio across all variants — mixing landscape with square in the same product gallery feels broken to shoppers.

Common Mistakes

• Uploading at maximum dimensions without compression. Webflow does not aggressively compress on its end. A 4 MB camera-output JPG becomes roughly a 2 MB largest variant — still very heavy. Compress to JPG quality 80 before upload.
• Mixed aspect ratios across CMS Collections. The single most visible tell of a rushed Webflow build. Crop every CMS item image to a single ratio before upload, no exceptions.
• Lazy-loading the hero. Webflow doesn't lazy-load background images by default, but if you're using an img element in a hero section, make sure lazy loading is disabled on it specifically. Lazy-loaded heroes hurt LCP.
• Using PNGs for photographs. PNG file sizes are 3–5× larger than JPG for the same visual quality on photo content. Reserve PNG for logos with transparency, sharp-edged graphics, and screenshots. Photos should be JPG.
• Skipping alt text in CMS items. Webflow CMS image fields don't auto-populate alt text. Each CMS item needs alt text set explicitly, or the rendered site has empty alt attributes everywhere — accessibility failure plus missed SEO signal.
• Relying on the Webflow Designer crop tool. The Designer's crop is preview-only — the underlying source isn't actually cropped. Crop in Photoshop, Figma, or your image editor before upload, so the variants Webflow generates start from a properly-cropped source.
• Forgetting og:image for blog/project posts. Webflow doesn't automatically use the post thumbnail as og:image — you set it explicitly in the page's SEO settings or via a CMS field bound to the og:image meta tag. Without it, social shares show no preview image.

Tools That Help

Webflow doesn't have a plugin ecosystem like WordPress, so the optimization workflow is necessarily upstream — compress source images before upload, and consider a CDN if your audience is global. Webflow's built-in CDN is solid but not best-in-class for international delivery.

Frequently Asked Questions

Related Guides

• Best image sizes for websites in 2026 — full reference covering hero, blog, social, and more.
• Squarespace image sizes — Squarespace equivalent if you're comparing platforms.
• WordPress featured image size — WP equivalent, useful if you're evaluating a CMS migration.
• Hero image size — generic hero/banner reference complementary to Webflow-specific guidance.
• Open Graph image size — Webflow blog thumbnails should match the og:image dimensions covered here.
• Find oversized images on your website — audit workflow for catching uploads that bypassed your compression workflow.
• Natural vs rendered image dimensions — concept behind "Webflow is serving a 2000-pixel variant for a 600-pixel slot".

Last updated: May 6, 2026