Tuoteilmoitusten optimointi
Näin pakkaat tuotekuvat menettämättä laatua
· 4 min read
Pienennä tuotekuva pikselimittoihin, joilla se oikeasti näytetään, ja vie se sitten WebP- tai AVIF-muodossa, jotka ovat samalla visuaalisella laadulla tyypillisesti 25 - 50 prosenttia pienempiä kuin JPEG. Tavoittele noin 100 - 300KB kuvaa kohden sen roolista sivulla riippuen. Googlen Largest Contentful Paint -mittari pitää sivua hitaana yli 2,5 sekunnin, ja liian suuri pääkuva on usein ainoa resurssi, joka ylittää rajan.
Tee tämä RorlAI:llaProduct: Clean studio backdrop for anything boxed or bottled.Miksi tiedostokoko on konversio-ongelma eikä vain latausongelma
Largest Contentful Paint mittaa, kuinka kauan sivun suurimman näkyvän elementin piirtäminen kestää. Googlen omien rajojen mukaan alle 2,5 sekuntia on hyvä, 2,5 - 4 sekuntia kaipaa parannusta ja yli 4 sekuntia on huono. Tuotesivulla suurin näkyvä elementti on lähes aina pääkuva. Tämä tarkoittaa, että yksi liian suuri kuvatiedosto voi yksinään ratkaista, läpäiseekö tuotesivusi mittarin, vaikka muu sivu latautuisi kuinka nopeasti.
Tämä ei ole abstrakti pisteytysharjoitus. Hitaasti latautuva pääkuva on ensimmäinen asia, jonka ostaja ilmoituksessasi kokee, ennen kuin hän on lukenut sanaakaan kuvauksesta tai nähnyt hintaa.
Realistinen kokobudjetti
| Kuvan rooli | Kohtuullinen tavoite |
|---|---|
| Pääkuva, suurennettava | 150 - 300KB |
| Toinen gallerian kuva tai pienoiskuva | 60 - 120KB |
| Mobiilin pääkuva, sivun yläosassa | alle noin 150 - 200KB |
Nämä ovat työtavoitteita, jotka on koottu nykyisistä kuvien optimointiohjeista. Ne eivät ole yksittäisen alustan virallinen määritys, ja ne vaihtelevat hieman kuvan monimutkaisuuden mukaan. Yksinkertainen tuote valkoisella taustalla pakkautuu pidemmälle kuin vilkas kohtaus, ennen kuin laadun heikkeneminen näkyy. Pidä taulukkoa siksi kattona, älä sääntönä, joka pitäisi osua tarkasti.
Vaiheiden järjestys, joka todella säästää tavuja
- 1Pienennä koko ennen pakkaamistaKamera tai generointityökalu vie kuvat usein 3000 - 4000 pikselin leveydellä. Jos kuva näytetään sivullasi 1200 pikselin paikassa, pienennä se ensin suunnilleen siihen leveyteen. Liian suuren kuvan pakkaaminen toimittaa edelleen liian suuren kuvan, vain hieman pienemmän.
- 2Vie WebP-muodossa, jos alustasi tukee sitäWebP on usein 25 - 35 prosenttia pienempi kuin JPEG samalla visuaalisella laadulla, ja AVIF voi mennä vielä pidemmälle. Useimmat nykyiset verkkokauppa-alustat ja selaimet tukevat WebP:tä. Tarkista, tarjoaako omasi sen automaattisesti vai pitääkö tiedosto ladata suoraan siinä muodossa.
- 3Aseta JPEG-laatu noin 70 - 85:een, kun WebP ei ole vaihtoehtoKuvankäsittelyohjelmien oletusasetukset viennille ovat usein tarpeettoman korkeat. Tämän välin laatuasetus ei useimmissa tuotekuvissa eroa silmin alkuperäisestä, ja se on merkittävästi pienempi kuin 100 prosentin vienti.
- 4Poista sisäänrakennetut metatiedotKameran asetukset, värimallit sivun tarvetta enemmän ja GPS-tiedot, joita jotkin puhelimet upottavat, lisäävät tiedoston painoa, jota ostaja ei koskaan näe. Useimmat pakkaustyökalut poistavat nämä oletuksena; varmista, että omasi tekee niin.
Tärkein ero:
- Häviötön pakkaus säilyttää jokaisen pikselin täsmälleen sellaisena kuin se kuvattiin, ja pienentää valokuvaa tuskin lainkaan. Se sopii tasaisia värejä ja teräviä reunoja sisältävään grafiikkaan, ei valokuviin
- Häviöllinen pakkaus hylkää tietoa, jonka ihmissilmä huomaa huonosti, ja siinä piilee valokuvan todellinen säästö
- Oikein asetettu moderni enkooderi jää selvästi sen pisteen alapuolelle, jossa ostaja huomaa eron, kauan ennen kuin se yltää pisteeseen, jossa itse huomaisit sen
Mihin generoitu tai muokattu kuva sijoittuu
Mistä tahansa muokkaus- tai generointityökalusta tuleva kuva tarvitsee saman koon pienennyksen ja pakkauksen kuin suoraan kamerasta tullut kuva. Nämä työkalut vievät usein oletuksena täydellä resoluutiolla, ja täyden resoluution viennillä on sama painoon liittyvä ongelma riippumatta siitä, tulevatko pikselit kennosta vai mallista. Kohtele sitä raakatiedostona, joka odottaa samaa budjettia, ei valmiina aineistona.
Common questions
- Näyttävätkö tuotekuvani huonommilta pakkaamisen jälkeen?
- Eivät kohtuullisella asetuksella. Täällä kuvatuilla alueilla tehty häviöllinen pakkaus on viritetty hylkäämään yksityiskohtia, joita ihmissilmä ei havaitse, joten oikein pakattu kuva näyttää normaalikatselukoossa samalta ja latautuu murto-osassa ajasta.
- Pitäisikö käyttää WebP:tä vai pysyä JPEG:ssä?
- Käytä WebP:tä, jos kauppa-alustasi tukee sitä, sillä se on samalla laadulla tyypillisesti 25 - 35 prosenttia pienempi kuin JPEG. Palaa hyvin viritettyyn JPEG:iin vain, jos alustasi tai teemasi ei tarjoa WebP:tä automaattisesti.
- Tarvitsenko erilliset kuvakoot mobiilille ja tietokoneelle?
- Ihanteellisesti kyllä. Mobiiliostaja katsoo kuvaa paljon pienemmällä alalla kuin tietokoneella ostava, joten pienemmän tiedoston tarjoaminen mobiilissa säästää todellista latausaikaa ilman näkyvää laadun heikkenemistä sillä näytöllä.
- Vaikuttaako kuvan tiedostokoko todella myyntiin vai vain nopeuspisteisiin?
- Sivun nopeus ja konversio liittyvät toisiinsa niin tiiviisti, että useimmat verkkokauppa-alustat pitävät sitä nykyään sijoitus- ja konversiotekijänä eivätkä vain laboratoriomittarina. Pääkuva, joka yksinään työntää sivun Largest Contentful Paintin 2,5 sekunnin rajan yli, on todellinen, mitattavissa oleva hitaus, jonka ostaja kokee, ei abstrakti pistemäärä.