Webflow Image Sizes: Hero, CMS, and Background Dimensions (2026)

Webflow hero image size

There is no Webflow hero preset to look up, and the pixel size is the smaller half of the decision anyway. What matters is whether the hero is an image element or a background imageon a section, because Webflow treats them completely differently: “If you’re setting a background image on an element, like a section or a container, the original image will be used. Webflow does not create responsive variants for background images.” The same 3 MB photo is a non-issue as an image element and a mobile-performance problem as a section background.

• 1920 x 1080 is the working default. It matches the widest common desktop viewport, crops cleanly at every breakpoint under Cover, and lands well under 4 MB as a JPEG.
• Go to 3200 x 1800 only for a full-bleed retina hero. That is the top rung of Webflow’s variant ladder — its own docs use a 2880 x 1800 MacBook Pro as the reference display and note that “an image with a width of 3000 pixels would work well for this display”.
• Never bake the headline into the hero image. Cover crops from the edges, and the crop changes at 991 px, 767 px and 479 px. Set the type as real text over the image and it survives every breakpoint — and stays indexable.
• An image-element hero needs no hand-tuning. Upload once at 1920 or larger and the variants cover phones; a 300 px-wide render on mobile pulls the 500 px variant, not your original.
• A background hero needs per-breakpoint uploads. Webflow lets you set a different background image at each breakpoint — that is the only way a phone avoids downloading the desktop file.
• JPEG for photographic heroes, PNG only for flat graphics. Then compress further with the Assets panel conversion tool if the file is close to the cap.

Resize a hero to 1920x1080 → Pick Webflow, then Hero / Section Background.

Webflow CMS collection image sizes

The CMS is where one sizing decision multiplies by every item in the Collection, and it is also where Webflow’s automatic optimisation quietly stops working. Its note is explicit: “Responsive image variants (srcset and sizes) are only created when images are uploaded directly in Webflow — for example, in the Assets panel or the CMS image field. Images added through a CSV import or the API don’t create responsive variants.” Migrate 200 blog posts by CSV and every visitor downloads your originals, at full size, forever.

• Size images before a CSV or API import, not after. Webflow won’t rescue them — so import them already at 1600 x 900, or re-upload through the Designer.
• Give each Collection two image fields. A 16:9 featured image for the Collection page and a 3:2 card image for lists: one image doing both jobs gets cropped badly in one of them.
• Pick a ratio per field and enforce it on every item. A Collection list renders every card through the same class, so a single portrait upload in a landscape grid is what breaks the row.
• Watch for CMS images used as backgrounds. Get BG image from is a common pattern for blog thumbnails and it opts that image out of variants — size those to the card, not to the page.
• The multi-image field stops at 25 images. Webflow’s own advice is to optimise before uploading or paginate the Collection list, since 25 full-size images on one page is a slow page.
• Set alt text in the CMS, not the Designer. Add an alt-text field and bind it with Get Alt Text from, or set per-image alt text from the ellipsis menu in a multi-image field.

Batch a Collection to one size → Pick Webflow, then CMS Featured Image or CMS Card / Thumbnail.

Webflow Open Graph image size (1200 x 630)

1200 x 630 isn’t stated as a requirement in Webflow’s docs, but it is the size Webflow itself uses: the head snippet it gives you for declaring image dimensions to crawlers is og:image:width 1200 and og:image:height 630. Adding that snippet is worth doing — it lets a crawler render the preview immediately instead of downloading and measuring the image first, which is a common cause of a link preview showing up without its image.

• Keep OG images out of the conversion tool. Webflow: “we strongly recommend that you don’t compress image assets linked to an Open Graph image.” Convert one to WebP or AVIF and the preview breaks — only JPG and PNG assets even appear in the picker.
• Set it per page, every page. There is no site-wide Open Graph image. Left blank, “random content (or no content) will appear when your site is shared”.
• One dimension for the whole site. Use 1200 x 630 everywhere and the single head snippet stays accurate — mixed dimensions mean per-page snippets instead.
• Blog previews need an Image field. Dynamic OG images bind to a Collection Image field; without one, the dropdown has nothing to offer and Collection pages ship with no preview image.
• Don’t point OG at a square product photo. A 1:1 image in a 1.91:1 slot gets pillarboxed or centre-cropped — add a dedicated OG field to the Collection instead.
• Re-scrape after you change it. Run the URL through Facebook’s debugger or LinkedIn’s Post Inspector; both cache the old preview until you ask them not to.

Resize an image to 1200x630 → Pick Webflow, then Open Graph Image.

Webflow background image sizes

This is the section worth reading twice, because it is the one place Webflow’s automatic image handling doesn’t save you. Every background image you set — the section behind your hero, the overlay on a card, the CMS thumbnail bound with Get BG image from— is delivered at its original size to every visitor. Webflow spells out the consequence: “site visitors on mobile devices will download the same large background image that’s used on larger breakpoints, which isn’t ideal.”

• Use an image element wherever you can. If you only need the picture behind text, an absolutely positioned image element with a colour overlay gets you variants for free; reach for a background image when you need tiling, fixed scroll, or a gradient stacked on top.
• Cover is the hero setting. It fills the section and crops the overflow — so the composition has to survive a crop, and anything critical belongs near the centre.
• Set the focal point deliberately. Background position defaults to top-left; move it to centre, or to the side your subject sits on, before you start fighting the crop with heights.
• Tiling is on by default. A background repeats both ways unless you turn it off — the usual cause of a mysteriously doubled hero on a tall phone screen.
• @2x halves the render width. Tick it and a 3200 px image renders as 1600 px of layout at double density; leave it off and the browser stretches your upload to fill the element.
• A dynamic background image overrides styling. Any background image already set in the Style panel is replaced by the Collection image, and adding a gradient or solid colour on the same element resets its positioning.

Make the breakpoint variants → Pick Webflow → Full-Bleed Hero (Retina) for the big one, then run the same photo through the smaller presets.

Webflow Commerce product image sizes

Webflow Commerce gives every product a Main image and a More imagesgallery, and no guidance on what to put in them. Square at 2000 px is the size that survives everything a store does to a product photo: the grid thumbnail, the product page, a lightbox zoom, and the feeds that sync out to Google Merchant Center and Facebook Catalog Manager. The SVG restriction is Webflow’s own, and the reason is email — product images end up in order confirmations, and “SVGs aren’t supported in many email clients such as Gmail”.

• One ratio across the whole catalogue. Square is the least fussy: mixed ratios show up immediately as ragged rows in a Collection list, and no amount of CSS fixes an inconsistent crop.
• Shoot on a consistent background with consistent margins. At thumbnail size the product occupying a different share of the frame in each photo reads as sloppiness before anyone notices the products.
• Every variant is its own product. Each option combination gets its own record with its own image field — plan the shot list per variant, not per product.
• 4 MB is a real ceiling for 2000 px photography. Export JPEG rather than PNG for product shots; a 2000 x 2000 PNG with a white background clears 4 MB more easily than you would expect.
• Give products a separate Open Graph image. The square Main image is the wrong shape for a link preview — add a 1200 x 630 field to the Products Collection and bind Open Graph to that.
• Keep the gallery under control. The multi-image field allows 25, but every one of them loads on the product page unless you paginate.

Square up a product photo → Pick Webflow, then Product Image (Commerce).

Webflow maximum upload size and file types

Webflow caps file size, not resolution — a 6000 px JPEG uploads fine if it squeezes under 4 MB, and a 1200 px PNG screenshot can fail. When an upload is rejected, the checklist is short: is the file over 4 MB, is the extension supported, is the filename over 100 characters. That last one is the surprise, and it also matters for privacy, since “the filename you use in these image assets will be visible in your HTML”.

• Resize before you compress. Getting a photo under 4 MB by crushing JPEG quality gives you a soft 6000 px image; downscaling it to 1920 or 3200 first gives you a clean one.
• The Assets panel converts to WebP and AVIF in bulk. Select assets, choose a format, click Compress — 100 assets per request and 10 requests a minute, so a large library goes in batches.
• Conversion is one-way and destructive. “The original asset files will be replaced” and “you can’t convert an AVIF or WebP image back to its original file extension in Webflow” — download or back up first, and never convert an Open Graph image.
• The CMS has its own bulk conversion. Collections panel → more options → Compress assets converts every image in your Collections, with the same one-way caveat.
• An asset that won’t convert is already compressed. Webflow simply won’t re-compress a fully compressed file, which is a useful signal rather than an error.
• SVG for logos and icons, always. No file-size worry, no resolution to pick — except in product fields and Ecommerce emails, where SVG isn’t accepted.

Get under 4 MB before uploading → Runs in your browser — no upload, no account.

Webflow favicon and webclip sizes

Icons are the one part of a Webflow site where you don’t have to guess — and where you no longer have to produce six files. Upload one square imagein Site settings → General → Icons and “Webflow will auto-generate all favicon and touch icon sizes”; SVG uploads are rasterised to PNG automatically for cross-browser support. Give it at least 256 x 256 so the webclip has pixels to work with, then check the result at 32 px, because that is where a full logo turns to mush and a single letterform still reads. A dark-mode favicon slot appears once the light one is set.

Square up an icon → Pick Webflow, then Webclip / Touch Icon or Favicon.