--- title: "Webflow product photos within the file limit | Herofab" description: "For a Webflow store, Herofab makes a studio or styled product image from one photo; its JPG download is the safer file under Webflow's weight limit." url: https://herofab.app/tools/product-photos-for-webflow language: en updated: 2026-10-12 --- # Webflow product images, light enough to upload. Webflow sets no pixel size for product images; its limit is on the weight of each file. The product studio takes one photo of a product, sets it on a studio ground or in a styled scene and delivers it in 2K or 4K. A 2K PNG can weigh more than Webflow allows, so the JPG download is the safer file for a Webflow store. [Start free](https://app.herofab.app/login?lang=en) · [Product studio](https://herofab.app/tools/product-photography) ![A gold filigree scent bottle on a marble block](https://herofab.app/img/ex/perfume-marble-1100.webp) Made with Herofab · Product studio ## Where Webflow draws its limits. 1. ### A weight limit instead of a size Any image size can be uploaded to Webflow provided the file stays under its weight limit. A PNG of a detailed scene grows heavy: at 2K it can exceed that limit, and a 4K file is larger still. The JPG download is the safer file. Read the weight of each file before uploading it; the limit itself is in the table on this page. 2. ### Main image and More images A Webflow product has one Main image field and a More images field that holds a limited number of further pictures. SVG files are not allowed in product and variant image fields. Give the Main image field the plainest whole view; the further slots can hold other angles, a styled scene and a close detail made from the same source photo. 3. ### Responsive variants, except on import From a sufficiently wide image Webflow generates a set of narrower variants, for inline JPG, PNG and WebP images. Images added through a CSV import or the API receive no such variants, and Webflow says they should already be the right size and optimised. A catalogue brought in by import therefore needs its files prepared beforehand. ## What Webflow asks for. Source: [Webflow Help Center — Responsive images; Image; Image file types; Image resolution; Multi-image Collection field; Ecommerce Collections overview; Assets panel; Image conversion tool; Import/export Ecommerce products and variants; Include alt text on images](https://help.webflow.com/hc/en-us/articles/33961378697107-Responsive-images). Checked 12 October 2026. - **File size:** 4 MB maximum for each image - **Size:** Any image size can be uploaded provided the file is smaller than the 4 MB limit; WebP images have a side length limit of 16,383 pixels - **Formats:** PNG, JPEG, SVG and WebP are named as the best image formats to upload - **Not allowed:** SVG images in product and variant image fields, and animated AVIF files - **Number:** A product has one Main image field and a More images multi-image field, which holds up to 25 images - **Responsive images:** For an image wider than 3,200 pixels Webflow generates 7 variants at 3,200, 2,600, 2,000, 1,600, 1,080, 800 and 500 pixels; variants are made for inline JPG, PNG and WebP images - **CSV and API imports:** Images added through a CSV import or the API do not get responsive variants, so they should already be the right size and optimised - **WebP and AVIF:** JPEG and PNG assets can be converted to WebP or AVIF with the built-in conversion tool; the conversion is lossy and replaces the original file - **Alt text:** Alt text can be set for each image, including each image in a multi-image field; Webflow AI can generate it for JPG, PNG, GIF, WebP and AVIF [Webflow product image requirements](https://herofab.app/guides/webflow-ecommerce-product-image-size) · [Check your images — free](https://herofab.app/tools/image-size-checker) ## The photo behind a Webflow product page. - Take one photo of the whole product and one close photo of its finest part, a clasp, a dial or a stitched label; the More images field has room for a detail view beside the main one. - Keep every edge of the product inside the picture with a margin around it; a part cut off by the frame cannot be added back faithfully, whatever scene is chosen later. - Note the product's name, material and colour while it is in hand: Webflow lets alt text be set for every image, each one in the More images field included. ## Product photos for Webflow, answered. **Should the PNG or the JPG go into a Webflow store?** The JPG, in most cases. Webflow limits the weight of every image file, and a 2K PNG from Herofab can be heavier than that limit, while the JPG of the same image is lighter. PNG and JPEG are both among the formats Webflow names for upload. If a PNG is wanted, its weight should be read first; the free image size checker tests a file in the browser against Webflow's published limit. **Can Webflow's conversion tool be used on Herofab images?** Webflow's built-in tool converts JPEG and PNG assets to WebP or AVIF. Webflow describes the conversion as lossy and says that it replaces the original file. Keep the file downloaded from Herofab outside Webflow as the master copy before converting, and look at fine lettering on the product once the conversion is done. **How many images does a Webflow product take?** One in the Main image field and a set number more in the More images field; the count is in the table on this page. The product studio can show the product from the front, at three-quarter, from the side or from above, on a plain ground or in a scene, all from one source photo. Each added image is another file under the weight limit, and each can carry its own alt text. **How much does it cost?** 4 credits per image, plus one credit for 4K. The cost is shown before you generate, and if a job fails the credits are returned. The 20 free credits at sign-up cover 5 images with this tool. [Product studio](https://herofab.app/tools/product-photography) · [Main image](https://herofab.app/glossary/main-image) · [Lifestyle image](https://herofab.app/glossary/lifestyle-image) · [Aspect ratio](https://herofab.app/glossary/aspect-ratio) Examples by product [Product photos for Square Online](https://herofab.app/tools/product-photos-for-square-online) · [Product photos for Lightspeed eCom](https://herofab.app/tools/product-photos-for-lightspeed) · [Product photos for Big Cartel](https://herofab.app/tools/product-photos-for-big-cartel) · [Product photos for SHOPLINE](https://herofab.app/tools/product-photos-for-shopline) · [Product photos for Wayfair](https://herofab.app/tools/product-photos-for-wayfair) · [Product photos for Orderchamp](https://herofab.app/tools/product-photos-for-orderchamp) · [Product photos for ABOUT YOU](https://herofab.app/tools/product-photos-for-about-you) · [Product photos for Trendyol](https://herofab.app/tools/product-photos-for-trendyol)