--- title: "Produktbilder för Webflow inom filgränsen | Herofab" description: "För en Webflow-butik gör Herofab en studiobild eller stylad produktbild från ett foto; JPG-nedladdningen är den säkrare filen under Webflows filgräns." url: https://herofab.app/sv/tools/product-photos-for-webflow language: sv updated: 2026-10-12 --- # Produktbilder för Webflow, lätta nog att ladda upp. Webflow anger inga pixelmått för produktbilder; gränsen gäller varje fils storlek. Produktstudio tar ett foto av en produkt, placerar den på ett studiounderlag eller i en stylad miljö och levererar den i 2K eller 4K. En PNG i 2K kan bli större än Webflow tillåter, så JPG-nedladdningen är den säkrare filen för en Webflow-butik. [Börja gratis](https://app.herofab.app/login?lang=sv) · [Produktstudio](https://herofab.app/sv/tools/product-photography) ![En parfymflaska med guldfiligran på ett marmorblock](https://herofab.app/img/ex/perfume-marble-1100.webp) Skapat med Herofab · Produktstudio ## Där Webflow drar sina gränser. 1. ### En gräns för filstorlek i stället för mått Bilder i vilka mått som helst kan laddas upp till Webflow, förutsatt att filen håller sig under gränsen för filstorlek. En PNG av en detaljrik miljö blir tung: i 2K kan den överskrida den gränsen, och en 4K-fil är ännu större. JPG-nedladdningen är den säkrare filen. Läs av varje fils storlek innan den laddas upp; själva gränsen står i tabellen på den här sidan. 2. ### Main image och More images En Webflow-produkt har ett fält Main image och ett fält More images som rymmer ett begränsat antal ytterligare bilder. SVG-filer är inte tillåtna i bildfälten för produkter och varianter. Ge fältet Main image den enklaste helbilden; de övriga platserna kan rymma andra vinklar, en stylad miljö och en närbild av en detalj, gjorda från samma originalfoto. 3. ### Responsiva varianter, utom vid import Från en tillräckligt bred bild genererar Webflow en uppsättning smalare varianter, för inline-bilder i JPG, PNG och WebP. Bilder som läggs till genom en CSV-import eller API:et får inga sådana varianter, och Webflow säger att de redan bör ha rätt storlek och vara optimerade. En katalog som tas in genom import behöver därför ha filerna förberedda i förväg. ## Det här kräver Webflow. Källa: [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). Kontrollerad den 12 oktober 2026. - **Filstorlek:** Högst 4 MB för varje bild - **Storlek:** Bilder i alla storlekar kan laddas upp så länge filen är mindre än gränsen på 4 MB; WebP-bilder har en gräns för sidlängden på 16 383 pixlar - **Format:** PNG, JPEG, SVG och WebP anges som de bästa bildformaten att ladda upp - **Inte tillåtet:** SVG-bilder i bildfält för produkter och varianter, samt animerade AVIF-filer - **Antal:** En produkt har ett fält Main image och ett flerbildsfält More images, som rymmer upp till 25 bilder - **Responsiva bilder:** För en bild som är bredare än 3 200 pixlar skapar Webflow 7 varianter i 3 200, 2 600, 2 000, 1 600, 1 080, 800 och 500 pixlar; varianter skapas för inline-bilder i JPG, PNG och WebP - **Import via CSV och API:** Bilder som läggs till via en CSV-import eller API:et får inga responsiva varianter, så de bör redan ha rätt storlek och vara optimerade - **WebP och AVIF:** Tillgångar i JPEG och PNG kan konverteras till WebP eller AVIF med det inbyggda konverteringsverktyget; konverteringen sker med förlust och ersätter originalfilen - **Alt-text:** Alt-text kan anges för varje bild, även för varje bild i ett flerbildsfält; Webflow AI kan generera den för JPG, PNG, GIF, WebP och AVIF [Webflow: krav för produktbilder](https://herofab.app/sv/guides/webflow-ecommerce-product-image-size) · [Kontrollera dina bilder — gratis](https://herofab.app/sv/tools/image-size-checker) ## Fotot bakom en produktsida i Webflow. - Ta ett foto av hela produkten och ett närfoto av dess finaste del, ett lås, en urtavla eller en fastsydd etikett; fältet More images har plats för en detaljvy bredvid huvudvyn. - Håll produktens alla kanter innanför bilden med en marginal runt om; en del som skärs av i bildkanten kan inte läggas till på ett troget sätt, vilken miljö som än väljs senare. - Anteckna produktens namn, material och färg medan den finns till hands: Webflow låter alt-text anges för varje bild, även var och en i fältet More images. ## Produktbilder för Webflow: frågor och svar. **Ska PNG eller JPG läggas in i en Webflow-butik?** JPG, i de flesta fall. Webflow begränsar filstorleken för varje bildfil, och en PNG i 2K från Herofab kan bli större än den gränsen, medan samma bild som JPG är mindre. PNG och JPEG finns båda bland de format som Webflow anger för uppladdning. Om en PNG önskas bör dess filstorlek läsas av först; den kostnadsfria bildstorlekskontrollen testar en fil i webbläsaren mot Webflows publicerade gräns. **Kan Webflows konverteringsverktyg användas på Herofab-bilder?** Webflows inbyggda verktyg konverterar resurser i JPEG och PNG till WebP eller AVIF. Webflow beskriver konverteringen som förstörande och säger att den ersätter originalfilen. Behåll filen som laddats ned från Herofab utanför Webflow som masterkopia före konverteringen, och se på fin text på produkten när konverteringen är klar. **Hur många bilder tar en Webflow-produkt?** En i fältet Main image och ett bestämt antal till i fältet More images; antalet står i tabellen på den här sidan. Produktstudio kan visa produkten framifrån, i trekvart, från sidan eller ovanifrån, på ett enkelt underlag eller i en miljö, allt från ett originalfoto. Varje tillagd bild är ännu en fil under gränsen för filstorlek, och var och en kan bära sin egen alt-text. **Vad kostar det?** 4 krediter per bild, plus en kredit för 4K. Kostnaden visas innan du genererar, och om ett jobb misslyckas återförs krediterna. De 20 gratis krediterna vid registreringen räcker till 5 bilder med det här verktyget. [Produktstudio](https://herofab.app/sv/tools/product-photography) · [Huvudbild](https://herofab.app/sv/glossary/main-image) · [Livsstilsbild](https://herofab.app/sv/glossary/lifestyle-image) · [Bildförhållande](https://herofab.app/sv/glossary/aspect-ratio) Exempel per produkt [Produktbilder för Square Online](https://herofab.app/sv/tools/product-photos-for-square-online) · [Produktbilder för Lightspeed eCom](https://herofab.app/sv/tools/product-photos-for-lightspeed) · [Produktbilder för Big Cartel](https://herofab.app/sv/tools/product-photos-for-big-cartel) · [Produktbilder för SHOPLINE](https://herofab.app/sv/tools/product-photos-for-shopline) · [Produktbilder för Wayfair](https://herofab.app/sv/tools/product-photos-for-wayfair) · [Produktbilder för Orderchamp](https://herofab.app/sv/tools/product-photos-for-orderchamp) · [Produktbilder för ABOUT YOU](https://herofab.app/sv/tools/product-photos-for-about-you) · [Produktbilder för Trendyol](https://herofab.app/sv/tools/product-photos-for-trendyol)