Webflow'n tuotekuvat, riittävän kevyinä ladattaviksi.
Webflow ei aseta tuotekuville pikselikokoa; sen raja koskee kunkin tiedoston kokoa. Tuotestudio ottaa yhden kuvan tuotteesta, asettaa tuotteen studiopohjalle tai tyyliteltyyn miljööseen ja toimittaa kuvan 2K- tai 4K-tarkkuudella. 2K-tarkkuuden PNG voi olla suurempi kuin Webflow sallii, joten JPG on Webflow-kauppaan varmempi tiedosto.
Mihin Webflow vetää rajansa.
- 1
Tiedostokoon raja pikselikoon sijaan
Webflow'hun voi ladata minkä kokoisen kuvan tahansa, kunhan tiedosto pysyy tiedostokokorajan alla. Yksityiskohtaisen miljöön PNG kasvaa raskaaksi: 2K-tarkkuudella se voi ylittää rajan, ja 4K-tiedosto on vielä suurempi. JPG on varmempi tiedosto. Lue jokaisen tiedoston koko ennen kuin lataat sen; itse raja on tämän sivun taulukossa.
- 2
Main image ja More images
Webflow-tuotteella on yksi Main image -kenttä ja More images -kenttä, johon mahtuu rajattu määrä lisäkuvia. SVG-tiedostot eivät ole sallittuja tuotteiden ja varianttien kuvakentissä. Anna Main image -kenttään pelkistetyin kokonäkymä; muihin paikkoihin sopivat muut kuvakulmat, tyylitelty miljöö ja lähikuva yksityiskohdasta, kaikki samasta lähdekuvasta.
- 3
Responsiiviset versiot, paitsi tuonnissa
Riittävän leveästä kuvasta Webflow luo sarjan kapeampia versioita JPG-, PNG- ja WebP-muotoisille inline-kuville. CSV-tuonnin tai API:n kautta lisätyt kuvat eivät saa näitä versioita, ja Webflow sanoo, että niiden tulisi olla jo valmiiksi oikean kokoisia ja optimoituja. Tuonnilla tuotu luettelo tarvitsee siksi tiedostonsa valmisteltuina etukäteen.
Mitä Webflow edellyttää.
Lähde: 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. Tarkistettu 12. lokakuuta 2026.
- Tiedostokoko
- Enintään 4 MB kutakin kuvaa kohden
- Koko
- Minkä tahansa kokoisen kuvan voi ladata, kunhan tiedosto on pienempi kuin 4 MB:n raja; WebP-kuvissa sivun pituus saa olla enintään 16 383 pikseliä
- Tiedostomuodot
- PNG, JPEG, SVG ja WebP mainitaan parhaina ladattavina kuvamuotoina
- Ei sallittu
- SVG-kuvat tuotteen ja variantin kuvakentissä sekä animoidut AVIF-tiedostot
- Määrä
- Tuotteella on yksi Main image -kenttä ja usean kuvan More images -kenttä, johon mahtuu enintään 25 kuvaa
- Responsiiviset kuvat
- Yli 3 200 pikseliä leveästä kuvasta Webflow luo 7 versiota: 3 200, 2 600, 2 000, 1 600, 1 080, 800 ja 500 pikseliä; versiot tehdään inline-kuvina lisätyistä JPG-, PNG- ja WebP-tiedostoista
- CSV- ja API-tuonnit
- CSV-tuonnilla tai API:n kautta lisätyt kuvat eivät saa responsiivisia versioita, joten niiden tulee olla valmiiksi oikean kokoisia ja optimoituja
- WebP ja AVIF
- JPEG- ja PNG-tiedostot voi muuntaa WebP- tai AVIF-muotoon sisäänrakennetulla muunnostyökalulla; muunnos on häviöllinen ja korvaa alkuperäisen tiedoston
- Alt-teksti
- Alt-tekstin voi asettaa jokaiselle kuvalle, myös usean kuvan kentän jokaiselle kuvalle; Webflow AI voi luoda sen JPG-, PNG-, GIF-, WebP- ja AVIF-kuville
Kuva Webflow'n tuotesivun takana.
- Ota yksi kuva koko tuotteesta ja yksi lähikuva sen hienoimmasta osasta, lukosta, kellotaulusta tai ommellusta merkistä; More images -kentässä on tilaa yksityiskohtanäkymälle päänäkymän rinnalla.
- Pidä tuotteen jokainen reuna kuvan sisällä ja jätä ympärille marginaali; kuva-alan reunaan katkennutta osaa ei voida lisätä takaisin uskollisesti, valittiinpa myöhemmin mikä miljöö tahansa.
- Kirjaa tuotteen nimi, materiaali ja väri muistiin, kun tuote on käsillä: Webflow antaa määrittää alt-tekstin jokaiselle kuvalle, myös jokaiselle More images -kentän kuvalle.
Tuotekuvat Webflow'hun: kysymykset ja vastaukset.
Viedäänkö Webflow-kauppaan PNG vai JPG?
Useimmiten JPG. Webflow rajoittaa jokaisen kuvatiedoston kokoa, ja Herofabin 2K-tarkkuuden PNG voi ylittää rajan, kun taas saman kuvan JPG on kevyempi. PNG ja JPEG ovat molemmat niiden muotojen joukossa, jotka Webflow nimeää ladattaviksi. Jos halutaan PNG, sen tiedostokoko kannattaa lukea ensin; maksuton kuvakoon tarkistin testaa tiedoston selaimessa Webflow'n julkaisemaa rajaa vasten.
Voiko Webflow'n muunnostyökalua käyttää Herofab-kuviin?
Webflow'n sisäänrakennettu työkalu muuntaa JPEG- ja PNG-tiedostot WebP- tai AVIF-muotoon. Webflow kuvaa muunnosta häviölliseksi ja sanoo, että se korvaa alkuperäisen tiedoston. Säilytä Herofabista ladattu tiedosto Webflow'n ulkopuolella alkuperäiskappaleena ennen muuntamista, ja katso tuotteen hieno teksti, kun muunnos on tehty.
Kuinka monta kuvaa Webflow-tuotteelle mahtuu?
Yksi Main image -kenttään ja määrätty määrä lisää More images -kenttään; määrä on tämän sivun taulukossa. Tuotestudio voi näyttää tuotteen edestä, viistosti edestä, sivulta tai ylhäältä, pelkistetyllä pohjalla tai miljöössä, kaikki yhdestä lähdekuvasta. Jokainen lisätty kuva on yksi tiedosto lisää tiedostokokorajan alla, ja jokaisella voi olla oma alt-tekstinsä.
Paljonko se maksaa?
4 krediittiä kuvaa kohden, ja 4K-kuvasta yksi krediitti lisää. Hinta näytetään ennen luomista, ja jos työ epäonnistuu, krediitit palautetaan. Rekisteröitymisen yhteydessä saatavat 20 ilmaista krediittiä riittävät 5 kuvaan tällä työkalulla.
Seuraava mallistosi, kuvattuna jo tällä viikolla.
20 krediittiä rekisteröityessä, maksukorttia ei tarvita. Ilmaisilla krediiteillä tehdyissä kuvissa on vesileima.