Julkaisun työnkulut
Shopify-kuvien optimointi: mitat, kuvamuodot ja pakkaus
Valmistele Shopify-tuotekuvat sopivilla mitoilla ja rajauksilla. Opi, milloin pakkaus auttaa ja miten tarkistat mobiilinäkymän, latautumisen ja kuvien SEO:n.
Esimerkki: valmistele tuotteen pääkuva
Kuvitellaan, että sinulla on tarkka 3600 × 2400 pikselin tuotekuva ja kauppasi käyttää neliömäisiä pääkuvia. Seuraavat vaiheet havainnollistavat työskentelytapaa. Ne eivät ole mitattuja pakkaustuloksia tai lupaus latauskoosta.
- Valitse rajaus. Kokeile 2400 × 2400 pikselin neliötä, jossa koko tuote näkyy. Jos tuote ei mahdu, muuta sommittelua sen sijaan, että leikkaisit tärkeän osan pois.
- Tarkista yhtenäisyys. Vertaa kuvaa kahteen nykyiseen tuotekorttiin. Säädä ympäröivää tilaa, jotta tuote näyttää suunnilleen samankokoiselta.
- Valmistele sopivan kokoinen kuva. Vertaa 2048 × 2048 pikselin kopiota täysikokoiseen rajaukseen. Säilytä tarpeeksi yksityiskohtia teeman tuotenäkymää ja suurennusta varten. Älä suurenna pientä kuvaa vain tämän luvun saavuttamiseksi.
- Valitse muoto. Käytä selkeää JPG:tä yksivärisellä taustalla olevalle valokuvalle tai PNG:tä, jos läpinäkyvyys on tarpeen. Tee mahdolliset pakkauskokeilut hyvälaatuisesta alkuperäisestä.
- Lisää kuva ja tarkista tulos. Katso tuotesivua, kokoelmasivua ja puhelinnäkymää. Varmista, ettei tärkeitä reunoja leikkaannu pois ja että suurennus näyttää tarpeelliset yksityiskohdat.
- Tarkista latautuva versio. Jos kuva näyttää sumealta tai sivu on hidas, tutki teeman lataama kuvaversio ennen uuden tiedoston vientiä.
Kun tapa toimii pienellä otoksella, käytä sitä samankaltaisiin tuotteisiin. Tarkista poikkeukset erikseen. Kiiltävä koru ja tavallinen pahvilaatikko voivat tarvita eri laatupäätöksiä samoista mitoista ja sommittelusta huolimatta.
Mitä Shopify tekee kuville automaattisesti?
On hyvä erottaa kaksi tiedostoa: kauppaan lisäämäsi kuva ja versio, jonka asiakkaan selain lataa. Jos pienennät lisättävän tiedoston 4 Mt:stä 1 Mt:uun, asiakkaan lataama tiedosto ei välttämättä pienene samassa suhteessa.
Shopify luo kuvista eri kokoisia versioita ja voi toimittaa ne WebP- tai AVIF-muodossa, jos asiakkaan selain tukee muotoa. Shopifyn teemakuvien ohjeen mukaan kuvia ei tarvitse pakata erikseen ennen niiden lisäämistä. Hallinnassa säilyy alkuperäisen kuvan laatu, vaikka kaupan sivulla voidaan näyttää optimoitu versio.
Selkeä, hyvin sommiteltu alkuperäiskuva on siksi hyödyllisempi kuin hinnalla millä hyvänsä pieneksi pakattu tiedosto. Jos pakkaat valokuvaa voimakkaasti ennen sen lisäämistä, Shopify ei voi palauttaa kadonneita yksityiskohtia. Jos taas tarkasta kuvasta näytetään liian pieni, venytetty versio, ongelma on teemassa eikä alkuperäisessä kuvassa.
Aloita näkyvästä ongelmasta. Jos tuote rajautuu huonosti, korjaa sommittelua tai teeman rajausasetusta. Jos alkuperäinen kuva on sumea, hanki tarkempi kuva. Jos tarkka kuva latautuu hitaasti, selvitä, minkä version asiakkaan selain saa. Uusi pakkauskierros ei ole oikea ensiratkaisu kaikkiin näihin ongelmiin.
Valitse kuvan mitat käyttökohteen mukaan
Mitoita kuva sen suurimman tarpeellisen näkymän mukaan, älä pelkän pienen tuotekortin perusteella. Pikkukuvassa tarkalta näyttävä valokuva voi olla liian pieni tuotekuvagalleriaan tai suurennukseen. Pikselimitat kertovat leveyden ja korkeuden, kun taas tiedostokoko kt- tai Mt-yksiköissä kertoo tiedoston sisältämän datan määrän.
Shopify sallii tuote- ja kokoelmakuville enintään 5000 × 5000 pikseliä eli 25 miljoonaa pikseliä ja alle 20 Mt:n tiedostokoon. Neliömäisille tuotekuville se suosittelee lähtökohdaksi 2048 × 2048 pikseliä. Tämä ei ole kaikkia kauppoja koskeva vaatimus. Tarkista tuotekuvien vaatimukset ennen suuren kuvajoukon valmistelua.
Latausrajat voivat vaihdella kuvan lisäämispaikan mukaan. Shopifyn Tiedostot-osion ohje ilmoittaa kuville 20 Mt:n ja 25 miljoonan pikselin rajat, kun taas teemakuvien ohjeessa muiden kuvalatausten rajaksi mainitaan 20 miljoonaa pikseliä. Noudata käyttämäsi latauskentän ohjetta ja mahdollista virheilmoitusta sen sijaan, että soveltaisit yhtä rajaa kaikkialle hallintaan.
| Käyttökohde | Lähtökohta | Mitä tarkistaa? |
|---|---|---|
| Neliömäinen tuotekuvagalleria | Kokeile tarkasta alkuperäiskuvasta tehtyä 2048 × 2048 pikselin versiota | Näkeekö asiakas materiaalin ja saako hän selvää merkinnöistä galleriassa ja suurennuksessa? |
| Kokoelmasivun tuotekortit | Käytä samanmuotoisia pääkuvia ja anna teeman pyytää pienempiä versioita | Ovatko tuotteiden koko ja niitä ympäröivä tila yhtenäisiä samalla rivillä? |
| Banneri, joka näkyy koossa 1200 × 600 pikseliä | Kokeile 2400 × 1200 pikselin kuvaa ja käytä teeman suosittelemaa kuvasuhdetta | Pysyykö pääkohde näkyvissä puhelimella? |
| Artikkelikuva, joka näkyy 800 pikselin levyisenä | Vertaa 800 ja 1600 pikselin levyisiä kuvia | Parantaako suurempi versio yksityiskohtien näkymistä tai luettavuutta? |
Esimerkiksi 700 pikselin levyisenä näkyvä tuotekuva voi hyötyä 1400 pikselin levyisestä versiosta näytöllä, joka käyttää kahta kuvapikseliä yhtä näyttöpikseliä kohden. Tämä on suunnitteluesimerkki, ei ohje kaksinkertaistaa kaikkien kuvien mittoja. Suurennus voi tarvita enemmän yksityiskohtia, ja pientä tuotekorttia varten teeman pitäisi edelleen valita pienempi versio.
Älä tee kaikista kuvista neliöitä vain siksi, että neliömäiset tuotekortit ovat yleisiä. Korkea pullo, vaatekuva ja maisemakuva voivat tarvita erilaisen sommittelun. Pidä muoto yhtenäisenä niissä kuvaryhmissä, joissa se helpottaa tuotteiden vertailua.
Koossa 1200 × 600 pikseliä näkyvän bannerin kuvasuhde on 2:1. Kuvasuhde säilyy 2400 × 1200 pikselin kuvassa, joka tarjoaa enemmän yksityiskohtia tarkoille näytöille. Nämä ovat esimerkkimittoja, eivät Shopifyn bannerivaatimuksia. Jos mobiilialue on korkea ja kapea, saman kuvan sivuista voi rajautua paljon pois. Erillinen mobiilikuva voi auttaa, jos teema tukee sitä.

Valitse sisällölle sopiva JPG- tai PNG-muoto
Kokeile JPG:tä tavalliselle valokuvalle, joka ei tarvitse läpinäkyvyyttä. Kokeile PNG:tä, kun tarvitset läpinäkyvän taustan tai kun grafiikan terävät tekstit ja ohuet viivat kärsivät JPG-muodossa. Vertaa tiedostoja sen sijaan, että valitsisit yhden muodon koko tuotevalikoimalle.
PNG-valokuva voi olla selvästi JPG-kuvaa suurempi, mutta muunnos kannattaa vain, jos tuote näkyy edelleen oikein. Tarkastele kankaita, koruja, puunsyitä ja pieniä painettuja merkintöjä. Näitä yksityiskohtia peittävä pieni tiedosto ei ole hyvä tuotekuva.
WebP-kuvien lisääminen on yksi vaihtoehto, ei edellytys tehokkaalle latautumiselle. Shopify voi valita asiakkaalle toimitettavan muodon alkuperäisen tiedoston muodosta riippumatta. Myöskään selaimeen toimitettu AVIF-kuva ei tarkoita, että sinun pitäisi lisätä AVIF-tiedostoja kauppaan. Tarkista käyttämäsi latauskentän hyväksymät muodot.
Valkoinen tausta ei ole läpinäkyvä: jos tuotteen takana on jo valkoinen suorakulmio, PNG-tallennus ei poista sitä. Tarkista läpinäkyvä kuva sivun todellista taustaa vasten, myös vaaleiden reunojen ja varjojen kohdalta. Kuvamuotojen oppaamme kertoo, milloin eri muodot ovat hyödyllisiä.
Yhtenäistä tuotekuvat leikkaamatta tärkeitä yksityiskohtia
Kuvasuhde tarkoittaa leveyden suhdetta korkeuteen. Kuvat, joiden mitat ovat 2000 × 2000 ja 1000 × 1000 pikseliä, ovat molemmat neliöitä, vaikka yksityiskohtien määrä eroaa. Yhtenäinen muoto ei yksin riitä: myös tuotteen pitäisi täyttää suunnilleen yhtä suuri osa jokaisesta pääkuvasta.
Vertaa kokoelmasivun tuotekorttien riviä. Jos yksi kenkä täyttää kuvan ja toista ympäröi suuri valkoinen tila, rivi voi näyttää epätasaiselta samoista mitoista huolimatta. Säädä sommittelua vertailun helpottamiseksi. Jätä tuotteiden ympärille tarpeeksi tilaa, jotta niiden reunat näkyvät kokonaan.
Rajaus poistaa osan kuvasta. Koon muuttaminen muuttaa kuvan mittoja. Venyttäminen vääristää mittasuhteita. Valitse sommittelu kuvanrajaustyökalulla ja pienennä mittoja mittasuhteet säilyttäen koonmuutostyökalulla. Pullon venyttäminen neliöön antaa asiakkaalle väärän käsityksen sen muodosta.
Valmistele kuvasarja tuotekuvatyökalulla: valitse yhteinen kuvapohja ja reunatila, rajaa tai sijoittele kukin kuva ja vertaa kokonaisuutta Kaikki kuvat -näkymässä. Tarkista, että samankaltaiset tuotteet täyttävät kuvasta suunnilleen saman verran tilaa. Yhteinen kuvapohja ei korjaa lähdekuvien erilaista sommittelua automaattisesti. Tallenna selkeä JPG tai läpinäkyvyyttä varten PNG ja tarkista kuva teemassasi. Työkalu valmistelee tiedostot; Shopify huolehtii edelleen niiden tarjoamisesta ja teema näyttötavasta.
Teemasta riippuen Shopifyn kuva-asetuksissa voidaan määrittää kohdistuspiste, joka pitää tärkeän kohdan näkyvissä rajauksessa. Se auttaa säilyttämään kasvot tai tuotteen bannerissa, mutta ei takaa, että koko leveä sommittelu mahtuu kapealle näytölle. Tarkista esikatselu molemmilla näyttöko'oilla.
Lisää mainosotsikot ja painikkeet mahdollisuuksien mukaan teeman tekstikenttiin. Kuvaan upotettu teksti voi muuttua puhelimella liian pieneksi tai rajautua pois. Sivun varsinainen teksti voi rivittyä ja on valittavissa, ja oikea painike toimii linkkinä pelkän painikekuvan sijaan.
Milloin pakkaaminen ennen lisäämistä auttaa?
Pakkaaminen voi auttaa, jos alkuperäinen tiedosto on tarpeettoman suuri, latautuu hallintaan hitaasti tai ylittää kokorajan. Hyöty on pienempi, jos kuva on jo selkeä ja kohtuullisen kokoinen ja Shopify toimittaa sopivan version asiakkaalle. Älä heikennä laatua vain saadaksesi jokaisen tuotekuvan esimerkiksi alle 100 kt:n.
Säilytä koskematon alkuperäinen. Jos mitat ovat käyttötarkoitukseen liian suuret, pienennä ensin kopio sopivaan kokoon ja kokeile sen pakkaamista. Pienen sisältöalueen kuvan mittojen pienentäminen voi säästää enemmän kuin valtavan kuvan toistuva pakkaaminen. Tuotekuvan suurennus voi kuitenkin perustella suuremmat mitat.
Pakattua kopiota voit kokeilla Pixilon kuvanpakkaajalla. Työkalu hyväksyy kerralla enintään 20 JPG-, PNG- tai WebP-kuvaa, joista kukin saa olla enintään 25 Mt. Muoto ja mitat säilyvät. Työkalun latausrajat ovat erillisiä Shopifyn rajoista. Aloita muutamasta erilaisesta kuvasta ja tarkista tulokset ennen muiden käsittelyä.
Tämän työkalun PNG-pakkaus on häviötöntä: kuvan pikselit eivät muutu. Valmiiksi hyvin pakattu PNG saattaa pienentyä vain vähän. JPG- ja WebP-pakkaus voi muuttaa pieniä yksityiskohtia, joten tarkista ladattu kopio. Jos pakkauksella ei saada pienempää tiedostoa, Pixilo säilyttää alkuperäisen.
Vertaa tuotekuvia koossa, jossa asiakkaat näkevät ne, ja myös suurennettuina, jos kauppa tarjoaa suurennuksen. Tarkista pienet kuviot, merkinnät, tasaiset taustat ja läpinäkyvien kohteiden reunat. Palaa alkuperäiseen, jos tärkeät yksityiskohdat katoavat. Tuotekuvien optimoinnin oppaamme käsittelee näitä laatutarkistuksia tarkemmin.
Kirjoita hyödylliset alt-tekstit ja selkeät tiedostonimet
Kuvien hakukoneoptimointi alkaa kuvasta, joka auttaa ymmärtämään tuotetta. Anna tiedostolle kuvaava nimi ennen lisäämistä, esimerkiksi oliivinvihrea-kangasreppu-edesta.jpg. Vältä pitkää hakusanaluetteloa. Nimen pitäisi erottaa tämä kuva sivukuvasta tai yksityiskohtakuvasta.
Alt-teksti on kuvan tekstivastine. Kuvaile tuotekuvan olennaista näkymää, esimerkiksi: ”Oliivinvihreä kangasreppu edestä, kaksi ulkotaskua.” Yksityiskohtakuvassa kerro näkyvästä yksityiskohdasta sen sijaan, että toistaisit pääkuvan kuvauksen. Älä lisää hintaa, alennusta tai hakusanaa, jota kuva ei auta selittämään.
Googlen kuvien hakukoneoptimoinnin ohje suosittelee kuvaavia tiedostonimiä ja hyödyllisiä alt-tekstejä ilman hakusanojen liiallista toistoa. Myös ympäröivä sivuteksti auttaa ymmärtämään kuvan asiayhteyden. Tiedostonimi on pieni vihje, ei hyödyllisen tuotesivun korvike.
Lisää alt-teksti Shopifyn tuotekuvaan
- Avaa Shopifyn hallinnassa Tuotteet ja valitse tuote.
- Avaa kuvan esikatselu napsauttamalla sitä tuotteen mediaosiossa.
- Valitse Lisää alt-teksti, kirjoita lyhyt kuvaus ja valitse Tallenna alt-teksti.
- Toista muiden hyödyllisten näkymien kohdalla ja kuvaile, mitä kukin niistä näyttää.
Vaiheet perustuvat Shopifyn tuotekuvien alt-tekstiohjeeseen. Teemabannereilla on omat kuva-asetuksensa. Jos editori ehdottaa kuvausta, vertaa sitä valokuvaan ennen hyväksymistä: värin, materiaalin ja tuotetietojen on oltava oikein.
Älä oleta, että tietokoneen tiedosto-ominaisuuksiin kirjoitettu kuvaus muuttuu automaattisesti alt-tekstiksi. Teema voi käyttää samaa kuvaa eri tavoin eri osioissa. Koristekuvalle voi sopia tyhjä tekstivastine, kun taas linkkinä toimivan kuvan pitäisi kertoa linkin kohde ymmärrettävästi.
Näitä tilanteita käsittelee esimerkein alt-tekstien ja tiedostonimien oppaamme. Kuvaukset tukevat saavutettavuutta ja sisällön ymmärtämistä. Ne eivät takaa hakusijoituksia tai korvaa puuttuvia tuotetietoja.
Tarkista julkaistu kauppa puhelimella ja tietokoneella
Hallinnan kuvaesikatselu ei riitä. Aloita seuraavista julkaistun kaupan tarkistuksista. Niihin ei tarvita kehittäjätyökaluja.
- Avaa tuote puhelimella. Näkyykö koko tuote? Saako tärkeistä merkinnöistä selvää ja erottuuko materiaali?
- Tarkista kokoelmasivun rivi. Ovatko pääkuvien muodot ja reunojen tyhjät tilat yhtenäisiä?
- Kokeile galleriaa ja suurennusta. Antavatko lisäkuvat hyödyllistä tietoa? Näkyykö valitun värin tai tuoteversion mukainen tuote?
- Lataa sivu uudelleen. Ilmestyykö pääkuva nopeasti ja pysyvätkö tekstit ja painikkeet paikoillaan kuvien latautuessa?
- Toista suuremmalla näytöllä. Tarkista leveät bannerit ja suuremmat tuotenäkymät sen sijaan, että luottaisit vain kapeaan esikatseluun.
Jos sumean tai hitaasti latautuvan kuvan syytä pitää selvittää
Jos kuva pysyy sumeana, tarkista, venyttääkö teema pientä versiota. Jos pienelle kortille latautuu valtava tiedosto, selvitä, tarjoaako teema sopivia pienempiä versioita. Responsiiviset kuvat antavat selaimen valita koon asettelun ja näytön mukaan.
Shopifyn image_tag-ohje kertoo, miten teemakoodi voi tarjota eri kuvakokoja. Jos teema vaatii korjausta, pyydä kehittäjää tarkistamaan pyydetyt mitat sekä srcset- ja sizes-attribuutit. Teemakoodin ongelman ratkaisemiseksi ei tarvitse lisätä jokaista pikkukuvakokoa erikseen.
Jos selaimen kehittäjätyökalut ovat sinulle tuttuja, Verkko-paneeli näyttää, mitä sivu todella lataa. Voit myös lähettää ongelmallisen sivun ja kuvan teeman kehittäjälle tutkittavaksi.
- Avaa tuotesivu ja kehittäjätyökalut ja valitse Verkko (Network).
- Poista paneelin ollessa auki selaimen välimuisti käytöstä testin ajaksi ja lataa sivu uudelleen. Näin tutkit uutta latausta tallennetun kopion sijaan.
- Suodata näkyviin kuvat ja etsi tuotteen pääkuva. Tarkista pyynnön esikatselu, ettet sekoita gallerian pientä esikatselukuvaa pääkuvaan.
- Tarkista siirretty tiedostokoko, kuvan mitat ja vastauksen Content-Type-otsake. JPG:ltä näyttävä osoite voi silti toimittaa WebP- tai AVIF-kuvan.
- Toista testi puhelinasettelun leveydellä sivun uudelleenlatauksen jälkeen. Tarkista, ettei pieni näkymä turhaan lataa suurinta saatavilla olevaa versiota.
Älä arvioi latautumista pelkän tiedostokoon perusteella. Suurempi versio voi olla perusteltu tiheäpikselisellä näytöllä tai suurennusta varten. Etsi selviä ristiriitoja, kuten gallerian koko alueelle venytetty pikkukuva tai jokaiselle pienelle tuotekortille ladattu täysikokoinen alkuperäinen.
Sivun yläosan pääkuvan pitäisi olla saatavilla nopeasti. Alempana olevat kuvat voivat yleensä odottaa, kunnes kävijä lähestyy niitä. Shopifyn kehittäjäohjeissa ei suositella ilman vierittämistä näkyvien kuvien viivästettyä lataamista. Jos ensimmäinen tuotekuva ilmestyy selvästi myöhässä, pyydä kehittäjää tarkistamaan lataustapa. Kaikkien galleriakuvien lataaminen heti voi puolestaan aiheuttaa uuden ongelman.
Tarkista latausnopeus ja sivun liikkuminen erikseen
Kun tuotteen pääkuva on suurin näkyvä elementti, se voi vaikuttaa mittariin Largest Contentful Paint (LCP), joka kertoo, milloin suurin näkyvä kuva tai tekstilohko ilmestyy. Pienempi tiedosto auttaa vain, jos kuvan lataaminen on osa viivettä. Liian myöhään alkava pyyntö voi pysyä hitaana pakkauksen jälkeenkin. Googlen LCP-ohje selittää eron.
Jos valokuva työntää hintaa tai ostopainiketta alaspäin ilmestyessään, teema ei ehkä ole varannut sille riittävästi tilaa. Tämä vaikuttaa mittariin Cumulative Layout Shift (CLS), joka kuvaa sivun odottamatonta liikkumista. Ratkaisu on varata kuvalle tila asettelussa, ei vain pakata sitä lisää. Lue Googlen asettelun siirtymien ohje ja oppaamme kuvista ja Core Web Vitals -mittareista.
Vertaa samaa sivua ennen muutosta ja sen jälkeen samanlaisissa olosuhteissa. Muuta yhtä asiaa kerrallaan. Erota PageSpeedin simuloitu testi sen mahdollisesti näyttämistä oikeiden kävijöiden tiedoista. Pisteet voivat vaihdella, eikä kävijädata päivity heti muutoksen jälkeen. Kirjaa korjattu ongelma sen sijaan, että luottaisit yhteen parempaan pistemäärään.
Selvitä ongelma ennen kaikkien kuvien muuttamista
| Ongelma | Tarkista ensin | Seuraava hyödyllinen toimi |
|---|---|---|
| Tuote näyttää sumealta | Onko alkuperäinen tarkka ja näkyvässä versiossa riittävästi pikseleitä? | Paranna alkuperäistä tai korjaa teeman pyytämä koko; pakkaus ei poista sumeutta |
| Tuote rajautuu osittain pois | Osion kuvasuhde, rajausasetukset ja mobiiliasettelu | Muuta sommittelua tai kohdistuspistettä ja tarkista molemmat näkymät |
| Lisääminen epäonnistuu pienestä tiedostokoosta huolimatta | Pikselimitat, hyväksytty muoto ja käyttämäsi latauskentän rajat | Pienennä mittoja tai käytä hyväksyttyä muotoa toistuvan pakkaamisen sijaan |
| Tuotekortit näyttävät epätasaisilta | Pääkuvien muodot ja tuotteita ympäröivä tila | Yhtenäistä sommittelu ja tarkista teeman korttiasetukset |
| Ensimmäinen kuva latautuu myöhässä | Lataustapa, pyydetty kuvakoko ja sivun muut pyynnöt | Tarkista teema ennen alkuperäisen laadun heikentämistä |
| Pienemmät lisätyt tiedostot eivät juuri nopeuta sivua | Asiakkaalle latautuva kuva ja sivun muu toiminta | Tutki skriptejä, sovelluksia ja teemaa, jos kuvien latautuminen on jo kunnossa |
Shopifyn kaupan suorituskykyohje nostaa esiin myös teemat, sovellukset ja lisätyn koodin. Suorituskykyraportit perustuvat oikeiden kävijöiden tietoihin. Jos kuvat latautuvat jo tehokkaasti, keskity jäljellä olevaan hidasteeseen uuden kuvasovelluksen tai voimakkaamman pakkauksen sijaan.
Mitkä kuvat kannattaa korjata ensin?
Aloita usein katsotun tuotteen pääkuvasta ja tuotekortista, sitten näkyvästä etusivun bannerista. Korjaa havaittava ongelma: epäselvä merkintä, pois rajautuva tuote tai myöhään ilmestyvä kuva. Harvoin katsotun gallerian viides kuva on yleensä pienempi prioriteetti kuin pääkuva, jonka perusteella asiakas päättää jatkaako selaamista.
Kirjaa sivu, kuvan alkuperäiset mitat, rajaus ja muoto sekä se, mikä parani muutoksen jälkeen. Säilytä alkuperäinen, jotta voit perua huonon tuloksen. Käytä toimivaa tapaa samankaltaisiin tuotteisiin ja tarkista poikkeukset erikseen koko valikoiman kertamuutoksen sijaan.
Usein kysytyt kysymykset
Mikä on paras koko Shopifyn tuotekuville?
Yksi koko ei sovi jokaiseen asetteluun. Neliömäisille tuotekuville 2048 × 2048 pikseliä on hyvä lähtökohta, mutta teema, sommittelu ja suurennus ratkaisevat tarpeen. Käytä tarkkaa kuvaa latausrajojen sisällä ja tarkista julkaistu tuotesivu. Älä suurenna pientä valokuvaa vain 2048 pikselin saavuttamiseksi.
Pakkaako Shopify kuvat automaattisesti?
Shopify optimoi kuvien toimittamista ja voi lähettää asiakkaille eri kokoisia ja eri muotoisia versioita. Tämä ei tarkoita hallinnassa säilytettävän alkuperäisen korvaamista voimakkaasti pakatulla kopiolla. Huonoa rajausta tai ylimitoitettuja kuvia voi silti korjata ennen lisäämistä, mutta erillinen pakkaus ei ole tarpeen jokaiselle kuvalle.
Pitäisikö kaikkien tuotekuvien olla alle 200 kt?
Ei. Mielivaltainen tiedostokokotavoite voi poistaa tärkeitä yksityiskohtia etenkin suurennettavista tuotekuvista. Tarkista asiakkaalle todella latautuvan version koko ja laatu. Pieni tuotekortin kuva ja suuri yksityiskohtakuva palvelevat eri tarkoituksia.
Sopiiko Shopifyhin paremmin PNG vai JPG?
Kokeile JPG:tä valokuville ilman läpinäkyvyyttä ja PNG:tä läpinäkyville kuville tai terävälle tekstille, joka kärsii JPG-muodossa. Tarkista tulos ja etenkin pienet tuoteyksityiskohdat. Shopify voi toimittaa kuvan eri muodossa kuin se on lisätty.
Tarvitsenko kuvien optimointisovelluksen?
Et pelkästään Shopifyn automaattista kuvien toimittamista varten. Sovelluksesta voi olla hyötyä tietyssä tehtävässä, kuten suuren kuvakirjaston hallinnassa. Selvitä ensin, mitä kaupan omat työkalut ja teema eivät hoida. Tarkista sovelluksen todellinen vaikutus esimerkkisivulla ennen koko kaupan käsittelyä.
Tarvitaanko jokaiselle näyttökoolle erillinen kuva?
Tavallisille tuotekuville yleensä ei: hyvin toteutettu teema voi pyytää eri kokoisia versioita samasta kuvasta. Erillinen mobiilisommittelu auttaa, jos tietokonebannerin rajaus ei pidä pääkohdetta näkyvissä puhelimella. Kyse on asettelusta, ei syystä lisätä monta kopiota jokaisesta tuotekuvasta.
Aloita yhdestä tuotesivusta
Valmistele tarkka alkuperäiskuva, valitse yhtenäinen rajaus ja säilytä asiakkaan tarvitsemat yksityiskohdat. Anna Shopifyn huolehtia latautuvista versioista ja tarkista julkaistu tuotesivu sekä kokoelmasivu puhelimella ja suuremmalla näytöllä. Käytä samaa tapaa koko valikoimaan vasta, kun kokeilu näyttää ja latautuu odotetusti.
Valmistele tuotekuvatKokeile pakattua kopiota →