Näin optimoit verkkokaupan tuotekuvat

Aloita tiedoista, joita ostaja tarvitsee

Tuotekuvan tehtävä on auttaa ostajaa arvioimaan tuotteen muotoa, pintaa, väriä ja ominaisuuksia. Kuvaa on pakattu liikaa, jos ompeleet katoavat, teksti muuttuu vaikealukuiseksi tai materiaalin ulkonäkö muuttuu. Pieni tiedostokoko ei korvaa puuttuvia yksityiskohtia.

Valitse ennen muokkaamista muutama hyödyllinen kuvakulma. Selkeä pääkuva, kuva toisesta suunnasta ja lähikuva tärkeästä yksityiskohdasta kertovat yleensä enemmän kuin monta lähes samanlaista kuvaa. Lisää tarvittaessa kuva tuotteesta käytössä tai esimerkki, josta sen koko käy ilmi. Sopiva kuvamäärä riippuu tuotteesta: yksinkertainen muki ja tekninen ulkoilutakki tarvitsevat erilaisia esittelykuvia.

Säilytä alkuperäiset valokuvat erillisessä kansiossa. Tee julkaisua varten kopiot ja nimeä ne niin, että tuote ja kuvakulma on helppo tunnistaa. Pakkaaminen ei korjaa epätarkkaa, huonosti valaistua tai liian pientä kuvaa. Vaihda heikko lähtökuva ennen kuin käytät aikaa tallennusasetuksiin.

Pidä rajaukset ja taustat yhtenäisinä

Katso tuoteryhmän sivua ja vertaa useita tuotteita rinnakkain. Vaihteleva tyhjä tila kuvissa voi saada samanlaiset tuotteet näyttämään eri kokoisilta tai irrallisilta. Valitse kaupan ulkoasuun sopiva kuvasuhde. Pidä pääkuvissa tuotteen sijainti ja sitä ympäröivä tila mahdollisimman yhtenäisinä.

Neliörajaus voi sopia neliönmuotoisiin tuotekortteihin, mutta se ei ole yleispätevä sääntö. Pitkä vaate tai pitkänomainen laite voi tarvita toisenlaisen esitystavan. Tarkista ennen rajauksen hyväksymistä, että koko tuote, sen kahvat ja lisäosat näkyvät. Älä venytä valokuvaa saadaksesi sen sopimaan mallipohjaan.

Valmistele kuvasarja Pixilon tuotekuvatyökalulla. Valitse yhteiset kuvapohjan mitat, vähimmäisreunatila ja tausta. Rajaa ja sijoittele sen jälkeen jokainen kuva erikseen. Tarkista kokonaisuus Kaikki kuvat -näkymässä ennen lataamista. Suurenna-toiminnolla voit tutkia yksityiskohtia ja tallennuslaadun vaikutusta.

Vähimmäisreunatila lasketaan rajatun kuvan reunoista, ei automaattisesti tunnistetusta tuotteesta. Lähdekuvan tyhjä tila ja peittävä tausta säilyvät, ellet rajaa niitä pois. Sama kuvapohja ei siis takaa, että tuotteet näyttävät yhtä suurilta. Kaupan teema voi vielä rajata kuvia, joten tarkista myös julkaistu tuoteruudukko.

Valkoinen tai neutraali tausta voi tehdä tuotelistasta yhtenäisen. Läpinäkyvä tausta voi puolestaan sopia ulkoasuun, jossa tuotteet näkyvät erilaisilla taustoilla. Jos PNG- tai WebP-kuvassa on jo läpinäkyviä alueita, taustavärityökalu voi täyttää ne valitulla värillä ja tallentaa kuvan JPG-muodossa. Se ei poista tavallisen valokuvan olemassa olevaa taustaa.

Tarkista läpinäkyvän kuvan reunat sekä vaaleaa että tummaa taustaa vasten. Valkoisella huomaamaton vaalea ääriviiva voi erottua tummalla sivulla selvästi. Jos viiva kuuluu jo alkuperäiseen kuvaan, tiedostomuodon vaihtaminen ei poista sitä. Lue lisää läpinäkyvien kuvien odottamattomista taustoista ja niiden syiden selvittämisestä.

Valitse kuvakoot tuotelistaa, tuotesivua ja suurennusta varten

Mittaa, kuinka leveänä kuva todella näkyy sivulla. Tuotekortin kuva voi olla esimerkiksi 360 CSS-pikseliä leveä ja tuotesivun pääkuva 800 CSS-pikseliä leveä. Nämä ovat sivulla näkyviä leveyksiä, eivät suoraan kauppaan ladattavan kuvan kokovaatimuksia.

CSS-pikseli on kuvan sivulla näkyvän koon mittayksikkö. Tiheäpikselisellä näytöllä yksi CSS-pikseli voi käyttää useita näytön fyysisiä pikseleitä. Siksi terävä kuva saattaa tarvita enemmän kuvapikseleitä kuin sen sivulla näkyvä leveys.

Tiheäpikseliselle näytölle kannattaa kokeilla versiota, jonka pikselileveys on noin kaksinkertainen kuvan näyttöleveyteen nähden. 360 pikselin levyiseen korttiin voi siis kokeilla 720 pikselin kuvaa ja 800 pikselin levyiseen tuotekuvaan 1600 pikselin versiota. Tarjoa myös pienempiä versioita. Luvut ovat suunnitteluesimerkkejä, eivät alustakohtaisia suosituksia tai takeita siitä, minkä tiedoston selain valitsee.

Suurennusnäkymä kannattaa suunnitella erikseen. Jos asiakkaan pitää voida tutkia kankaan kudosta, kiinnikettä tai kaiverrusta, säilytä riittävän tarkka alkuperäinen kuva tai tarjoa erillinen lähikuva. Tuotelistan pieni kuva ei saisi olla ainoa suurennettavissa oleva tiedosto. Toisaalta tuotelistan ei pitäisi ladata kaikille kävijöille täysikokoisia suurennuskuvia.

Verkkokauppa voi muodostaa eri kuvakoot automaattisesti. Jos hallitset kuvien tarjoamista itse, käytä responsiivisia kuvia, jotta selain voi pyytää sopivan version. Responsiivisten kuvien opas selittää, miten kuvan mitat, srcset ja sizes liittyvät toisiinsa. Pelkkä kuvan pienentäminen CSS:llä ei pienennä ladattavaa tiedostoa.

Käytännön esimerkki: tuotekuvan rajaus neliömäiseen tuotekorttiin

Tämä valokuva on 1920 × 1076 pikseliä. Purkki täyttää vain pienen osan leveästä kuvasta. Neliömäistä tuotekorttia varten sitä voi tuoda lähemmäs rajaamalla, ilman venyttämistä tai valokuvan taustan poistamista.

1. Valitse rajaus. Jätä koko kansi ja purkin pohja näkyviin tuotekuvatyökalun 630 × 630 pikselin rajauksessa. Jalusta saa jatkua kuvan ulkopuolelle, mutta itse tuote kannattaa säilyttää kokonaisena.
2. Aseta lopullinen koko. Valitse 600 × 600 pikselin kuvapohja ja reunatilaksi 0 %. Jätä suurentaminen pois päältä: rajattu lähde on hieman tulosta suurempi, joten sitä voidaan pienentää lisäämättä pikseleitä.
3. Tallenna ja tarkista. Latasimme JPG:n laatuasetuksella 90. Sen tiedostokoko on 16,4 kt. Tarkista kannen reuna, hento varjo ja tasainen valkoinen pinta ennen tuloksen hyväksymistä.

600 pikselin neliö havainnollistaa tuotekorttiin sopivaa versiota, eikä ole yleinen latauskokosuositus. Suurempi galleria tai suurennusnäkymä voi tarvita enemmän pikseleitä. Tiedoston pienenemiseen vaikuttivat rajaus, koonmuutos ja JPG-tallennus yhdessä, joten se ei mittaa pelkän pakkauksen vaikutusta. Kuvan alkuperäinen tausta ja osa jalustasta säilyvät.

Valitse kuvalle ja julkaisujärjestelmälle sopiva tiedostomuoto

Erota kauppaan ladattava tiedostomuoto siitä muodosta, jonka kävijä saa. Kauppa voi vastaanottaa JPG- tai PNG-kuvan ja tarjota sen automaattisesti WebP- tai AVIF-muodossa. Silloin useiden modernien tiedostoversioiden valmistelu itse voi lisätä työtä parantamatta lopputulosta.

• JPG: on käytännöllinen lähtökohta valokuville, joissa ei ole läpinäkyvyyttä, etenkin jos kauppa tai muu kohde vaatii JPEG-muotoa. Tarkista pakkauksen jälkeen pienet tekstit ja hienot pintakuviot.
• PNG: sopii läpinäkyville kuville ja terävälle grafiikalle, kun haluat välttää uuden häviöllisen tallennuksen. Suuri valokuva voi kuitenkin olla PNG-muodossa huomattavasti raskaampi kuin muissa sopivissa muodoissa.
• WebP: on vertailun arvoinen valokuville ja läpinäkyville tuotekuville, jos julkaisujärjestelmä tukee sitä. WebP tukee eri pakkaustapoja, mutta Pixilon PNG- ja JPG-muuntimet käyttävät laatuasetusta eivätkä tarjoa erillistä häviötöntä tilaa.
• AVIF: on toinen vaihtoehto, jos koko julkaisuketju tukee sitä. Tarkista sekä tallennettu kuva että julkaistu sivu. Pienempi tiedosto ei yksin osoita, että kuva sopii käyttötarkoitukseensa.

Laajemman vertailun löydät verkkosivujen kuvamuotojen oppaasta. Kokeile ennen koko tuotevalikoiman muuttamista yhtä tavallista valokuvaa ja yhtä haastavaa kuvaa, esimerkiksi hienoa kuviota tai läpinäkyvää tuotekuvaa. Varmista, että lataaminen, pikkukuvat, galleria ja suurennus toimivat.

Valitse järkevä tiedostokokotavoite yksityiskohdista tinkimättä

Kaikille tuotekuville ei ole yhtä oikeaa tiedostokokoa. Yksinkertainen esine tasaisella taustalla ja yksityiskohtainen kudottu vaate voivat tarvita eri asetukset samoilla kuvamitoilla. Myös monta kuvaa sisältävän tuotelistan lataustarpeet eroavat yhden suuren kuvan galleriasta.

Jos aiot tarjota tiedoston suoraan kävijöille, voit kokeilla aluksi esimerkiksi noin 200 kt:n versiota ja arvioida sen sopivuutta. Tämä on kokeilutavoite, ei vaatimus. Jos tekstit tai materiaalin yksityiskohdat muuttuvat epäselviksi, kokeile kevyempää pakkausta, tehokkaampaa tiedostomuotoa tai toista näyttökokoa. Älä laske laatua vain saavuttaaksesi mielivaltaisen luvun.

Vertaa kuvaa siinä koossa, jossa asiakas tavallisesti näkee sen. Tarkista sitten tärkeät kohdat täydessä koossa tai suurennusnäkymässä. Etsi rikkonaisia kirjainten reunoja, palikoitumista varjoissa, sumentuneita pintakuvioita ja epätasaisia väriliukuja. Paras valinta on pienin tähän käyttökohteeseen riittävän hyvä versio.

Erillisessä pakkaustestissä palasimme rajaamattomaan alkuperäiseen ja tallensimme JPG:n laatuasetuksella 20. Kaikki 1920 × 1076 pikseliä säilyivät. Tulos on 28,0 kt eli noin 62 % alkuperäistä pienempi. Vertaa kannen reunaa, seinää ja pehmeää varjoa vetämällä rajaa ja käyttämällä Tarkastele yksityiskohtaa -toimintoa. Laatu 20 on tarkoituksella matala testiasetus, ei suositeltu oletus. Tarkista kuva myös sen todellisessa näyttökoossa.

Alkuperäinen JPGJPG · Laatu 20

Jos latauslomakkeella on todellinen kokoraja, käytä tiedostokokoon pakkaavaa työkalua. Säilytä mitat aluksi ennallaan ja salli suhteellinen pienentäminen vain, jos se sopii kuvan käyttötarkoitukseen. Tiukka raja voi pakottaa näkyviin kompromisseihin. Joskus uusi rajaus tai erillinen lähikuva auttaa enemmän kuin lisäpakkaus.

Älä tallenna uusia pakattuja versioita edellisestä pakatusta kopiosta. Palaa alkuperäiseen kuvaan, kun kokeilet toista laatuasetusta. Asetusten luvut eivät tarkoita samaa eri kuvamuodoissa tai pakkausohjelmissa: laatuasetuksella 80 tallennetut JPG ja AVIF eivät automaattisesti näytä samanlaatuisilta.

Tarkista, mitä Shopify, WordPress tai muu kauppa tekee jo itse

Shopifyn kuvien latausohje kertoo kaupan automaattisesta optimoinnista ja suosittelee laadukkaita kuvia pakollisen käsin tehtävän esipakkauksen sijaan. Asiakkaalle tarjottu tiedostomuoto voi erota ladatusta muodosta. Tarkista oman teemasi ja tuotemediasi vaatimukset. Jokaiselle alkuperäiselle kuvalle ei ole syytä asettaa pientä, asiakkaalle tarjottua tiedostoa koskevaa kokotavoitetta.

Tarkista WordPress-kaupassa teeman muodostamat kuvakoot sekä käytössä olevat optimointilisäosat ja kuvapalvelut. Saavatko tuotekortti, galleria ja suurennusnäkymä sopivat versiot? WordPress-kuvien optimointiopas käy läpi tähän liittyvät työvaiheet.

Kun korvaat kuvan, lataa sivu uudelleen ja varmista, että uusi versio todella näkyy. Välimuistissa olevat pikkukuvat tai muodostetut versiot voivat saada vanhan kuvan näyttämään uudelta tulokselta. Uuden pakkauslisäosan lisääminen ennen nykyisen toiminnan selvittämistä voi vaikeuttaa ongelman ratkaisemista.

Pixilo käsittelee yksittäiset tiedostot paikallisesti selaimessasi. Se ei yhdisty kauppaan, päivitä tuotevalikoimaa tai määritä kuvien tarjoamista. JPG–WebP-, PNG–WebP-, WebP–JPG- ja PNG–JPG-työkalut pienentävät yli 4000 pikselin levyiset tai korkuiset kuvat säilyttäen kuvasuhteen. Koonmuutostyökalun rajat ovat 8000 pikseliä sivua kohden ja yhteensä 32 miljoonaa pikseliä. Tarkista tallennetut mitat, kun valmistelet suurta kuvaa suurennusnäkymään.

Auta hakukoneita ymmärtämään tuotekuvat

Kuvaa kuvakulma täsmällisesti. Esimerkiksi tiedostonimi sininen-keraaminen-muki-sivulta.jpg on helpompi tunnistaa kuin IMG_4837.jpg. Kirjoita vaihtoehtoiseksi tekstiksi hyödyllinen kuvaus siitä, mitä kuvassa näkyy, esimerkiksi: ”Sininen keraaminen muki, jossa on kaareva korva, sivulta kuvattuna.” Kuvaile jokaiselle kuvalle sen oma näkymä sen sijaan, että toistat samaa tekstiä.

Sijoita kuva sitä koskevien tuotetietojen lähelle. Älä täytä tiedostonimiä tai vaihtoehtoisia tekstejä toistuvilla hakusanoilla. Googlen kuvien hakukoneoptimoinnin ohje kertoo kuvailevista teksteistä ja kuvien löydettävyydestä. Nämä käytännöt auttavat kertomaan kuvan sisällöstä, mutta eivät takaa hakusijoituksia.

Tarkista myös tuotesivun tiedot. Oikea kuva valitusta väristä tai tuoteversiosta on hyödyllisempi kuin täydellisesti optimoitu kuva väärästä tuotteesta. Kuvien optimoinnin pitäisi tukea täsmällistä tuote-esittelyä.

Tarkista julkaistu tulos ennen koko tuotevalikoiman muuttamista

• Tuotelista: tuote näkyy kokonaan, rajaukset ovat yhtenäisiä eikä lista lataa tarpeettoman suuria tiedostoja.
• Tuotegalleria: pääkuva on selkeä, muut kuvakulmat tuovat lisätietoa ja valittu tuoteversio näkyy oikein.
• Suurennus: tärkeät tekstit, pintakuviot ja kiinnikkeet erottuvat käytettävällä suurennuksella.
• Puhelinnäkymä: kapea näyttö ei rajaa tuotetta pois tai lataa pieneen tilaan tarpeettoman suurta tietokoneversiota.
• Taustat: läpinäkyvät reunat ja täyttövärit näyttävät oikeilta sivun todellisia värejä vasten.
• Latautuminen: tarkista tiedostopyynnöt uudella käynnillä. Älä viivytä heti näkyvän pääkuvan lataamista vain siksi, että muut galleriakuvat voidaan ladata myöhemmin.
• Asettelu: varaa kuvalle sen kuvasuhteen mukainen tila, jotta teksti ja painikkeet eivät liiku kuvien latautuessa.
• Alkuperäiset tiedostot: säilytä alkuperäiset kuvat ja lyhyt kirjaus julkaisuasetuksista.

Aloita muutamasta edustavasta tuotteesta ja sisällytä kokeiluun myös yksityiskohtainen kuva. Vertaa tulosta samoissa olosuhteissa ennen muutosta ja sen jälkeen. Kun ulkoasu ja latautuminen toimivat, käytä samaa prosessia muihin tuotteisiin. Latausongelmien tarkempaan selvittämiseen sopii opas miksi verkkosivujen kuvat latautuvat hitaasti.

Usein kysytyt kysymykset

Mikä on paras tuotekuvan koko verkkokaupassa?

Se riippuu teeman näyttökoista ja suurennusnäkymän toiminnasta. Mittaa tuotelistan ja gallerian kuvat, säilytä riittävästi yksityiskohtia suurennusta varten ja tarkista kaupan muodostamat tiedostot. Yksi neliökuvan koko ei sovi kaikille tuotteille tai alustoille.

Pitääkö jokaisen tuotekuvan olla alle 200 kt?

Ei. Se voi olla kokeilutavoite joillekin suoraan tarjottaville kuville, mutta ei yleinen latausvaatimus. Suurennettava kuva voi tarvita enemmän yksityiskohtia. Automaattisesti optimoiva kauppa voi myös toimia paremmin laadukkaalla alkuperäisellä kuvalla.

Sopiiko tuotevalokuviin paremmin JPG vai PNG?

JPG on hyvä lähtökohta tavallisille valokuville, joissa ei ole läpinäkyvyyttä. PNG sopii läpinäkyville kuville ja terävälle grafiikalle, mutta valokuvien tiedostokoot voivat olla suuria. Tarkista kaupan tapa vastaanottaa ja tarjota kuvia ennen valintaa. Asiakkaalle näkyvä tiedostomuoto voi olla eri kuin ladattu muoto.

Miksi tuotekuva sumentuu kauppaan lataamisen jälkeen?

Vertaa alkuperäistä kuvaa, tallentamaasi versiota ja kaupan tarjoamaa kuvaa. Tavallisia syitä ovat liian pieni alkuperäinen kuva, voimakas pakkaus, suuren gallerian käyttämä pieni pikkukuva tai suurennusnäkymä, joka suurentaa samaa pientä tiedostoa. Selvitä sumentumisen aiheuttanut vaihe ennen asetusten muuttamista.

Voiko Pixilo poistaa tuotekuvan taustan?

Ei. Tuotekuvatyökalu täyttää lisätyn kuvapohjan ja jo läpinäkyvät alueet valitsemallasi taustavärillä. Se ei tunnista tuotetta eikä poista valokuvan peittävää taustaa. Myös erillinen taustavärityökalu tarvitsee valmiiksi läpinäkyvän lähdekuvan, jos haluat vaihtaa tuotteen takana olevan taustan.