Tuotekuvien optimointi: ohjeet ja resurssit

Posted 2 vuotta sitten by Anastasia Prokofjeva

Tuotekuvat auttavat sinetöimään sopimuksen, kun asiakkaat vierailevat verkkosivustollasi. Heidän kiinnostuksensa säilyttämiseksi sinulla on oltava houkuttelevia kuvia, jotka latautuvat nopeasti. Toisin sanoen sinun on optimoitava tuotekuvasi.

Saatat miettiä, kuinka löytää optimaalinen kuvakoko, kuinka pakata kuvat ja kuinka optimoida kuvat laadun heikkenemättä.

Olemme turvassa. Tässä artikkelissa perehdymme asiaan näppärää kuvien optimoinnista ja tutustu käytettävissä oleviin työkaluihin, joiden avulla saat työn valmiiksi nopeasti ja helposti.

Miksi kuvia pitää optimoida?

Kuvat ovat tärkeä osa jokaista verkkosivustoa. Tämä koskee erityisesti verkkokauppasivustoa. Kuvat vaikuttavat asiakkaisiin, kun he harkitsevat ostamista. Ne lisäävät verkkosivun yleistä ulkoasua, auttavat asiakkaita valitsemaan tuotteen ja parantavat sivustosi hakukoneoptimointia.

Haluat esimerkiksi välttää suurten tiedostojen lataamista. Ne voivat hidastaa sivuasi, mikä vaikuttaa hakukoneesi sijoitukseen ja ajaa pois potentiaaliset asiakkaat. Kukaan ei halua odottaa sivun latautumista tehdessään ostoksia verkossa. Siksi sinun on optimoitava tuotekuvasi.

Kuvan mittojen ja mittasuhteiden ymmärtäminen

Selvitetään, mihin sinun on kiinnitettävä huomiota kuviesi optimoinnissa.

Kuvan koko ja mitat ovat todella tärkeitä. Nämä parametrit vaikuttavat tiedoston kokoon ja kuvan ulkoasuun eri laitteissa.

Koko

Nyt on aikakausi korkea resoluutio ja suuri nopeus Internet, mutta se ei tarkoita, etteikö meidän pitäisi huolehtia kuvien optimoinnista. Nykyaikaiset kamerat ja jopa älypuhelimet kestävät korkea resoluutio kuvia. Olet ehkä jopa valmistellut tällaisia kuvia myymälääsi varten.

Jos kuvat ovat liian suuria, ne eivät kuitenkaan sovellu Internetiin. Ne hidastavat latausnopeutta varsinkin puhelimessa. Jos et halua vierailijoiden muuttuvan kärsimättömiksi ja poistuvan myymälästäsi, sinun tulee pienentää kuviesi kokoa.

Kuvassa on kaksi kokoa:

Kuvan koko on grafiikan näytöllä käyttämä tila. Tämä koko mitataan pikseleinä (px), jotka ovat yksittäisiä pisteitä, jotka muodostavat näytön. Voit ladata minkä kokoisia kuvia tahansa Ecwid-kauppaan. Ne optimoidaan sitten sopimaan selainikkunan leveyteen. Siitä huolimatta on parasta pienentää tuotekuvasi noin 1000 x 1000 pikseliksi. Tämä koko on riittävän suuri tuotteen näyttämiseen ja riittävän pieni lataamaan nopeasti.
Tiedoston koko on muistitila, jonka kuva vie. Tämä koko mitataan tavuina, tyypillisesti Kilo- (kt), Mega- (Mb) ja gigatavua (Gb). Mitä suurempi kuvan tiedostokoko on, sitä enemmän tallennustilaa se vaatii.

Tämän tuotekuvan koko on 1920×1920 ja sen tiedostokoko on 272 kt

Suurempien tiedostojen lataaminen kestää kauemmin. Tiedostojen pakkausohjelmisto kehitettiin tämän ongelman torjumiseksi. Kuva pakataan yleensä optimoimalla väritiedot.

Voimakas pakkaus kuitenkin heikentää kuvien "laatua". Se aiheuttaa kohinaa tai äkillisen värimuutoksen.

Jos tiedostokoko on noin 1000 px, hyvä pakkaus vie noin 200 kt.

Nyt opitaan lisää siitä, kuinka valita oikeat mittasuhteet kuvillesi.

Mittasuhteet

Kuvan mittasuhteet osoittavat leveydestä korkeuteen suhde.

Jotkut suhteet miellyttävät silmää enemmän kuin toiset. Normaali mittasuhteet näyttävät aina hyvältä. Nämä ovat 1:1, 4:3, 3:2 ja 16:9.

Mittasuhteet ovat tärkeitä, koska ne auttavat määrittelemään sivustosi ulkoasun. Pyri samaan mittasuhteeseen kaikissa tuotekuvissasi, jotta liikkeestäsi tulee jäsennelty ja ammattimainen ilme.

Kuinka valita kuvamuoto

Toinen asia, joka on pidettävä mielessä optimaalisen kuvantamisen kannalta, on kuvamuoto. Se on tiedostotyyppi, johon kuva tallennetaan.

Kuvamuotoja on monenlaisia. Jokaisella on hyvät ja huonot puolensa laadun, pakkauksen ja tuen suhteen. Sinun tulee valita muoto, joka tarjoaa korkeimman laadun pienimmällä koossa.

Internetin kolme yleisintä muotoa ovat JPEG, PNG ja GIF. Jokaista on käytettävä tietyllä tavalla.

Puretaan muotoja:

GIF (Graphics Interchange Format) pystyy tallentamaan pakattuja tietoja laadun heikkenemättä käyttämällä enintään 256 väriä. Muoto tukee yleensä animaatioita. GIF-tiedostot olivat pitkään Internetin yleisin muoto… kunnes PNG tuli käyttöön.
PNG (Portable Network Graphics) käyttää häviötöntä pakkausta ja tallentaa rajattoman määrän värejä.
JPEG (Joint Photography Experts Group, kehittäjän nimi) on tyypillisin muoto kuvien ja muiden kuvien tallentamiseen. JPEG-algoritmi voi käyttää sekä häviöllistä että häviötöntä pakkausta (lisätietoja myöhemmin). Mitä suurempi tiedostokoko, sitä pienempi häviö.

Mikä formaatti kannattaa valita? Jos sinulla on animoitu kuva, se on helppoa - GIF on etsimäsi muoto. Mutta entä JPEG ja PNG?

JPEG- ja PNG-tiedostot ovat samanlaisia, mutta niillä on myös olennaisia eroja. JPEG-tiedostot ovat kooltaan pienempiä, koska ne käyttävät pakkausprosessia, joka poistaa osan tiedoista. PNG-tiedostot puolestaan tukevat läpinäkyviä taustoja ja ovat parempia graafiseen suunnitteluun.

Yleissääntönä on käyttää JPG-kuvia valokuvissa ja kuvissa, joissa ei ole läpinäkyvää taustaa. Mitä tulee PNG:hen, on parempi käyttää niitä grafiikkaan, läpinäkyvän taustan tiedostoihin ja muihin kuviin, joissa selkeys ja värien eloisuus ovat tärkeitä. Joten tuotekuvissa on järkevää valita JPEG PNG:n sijaan.

Tämä tuotekuva on JPEG-muodossa

Kuinka pakata kuvat laatua menettämättä

Pakkaus auttaa pienentämään kuvan kokoa. Mitä huonompi laatu, sitä korkeampi pakkaus ja sitä pienempi tiedostokoko.

Pakkaustyyppejä on kahta tyyppiä:

Häviöllinen pakkaus pienentää tiedoston kokoa poistamalla tarpeettomia tietoja. Kuitenkin, kun pakkaat tiedoston tällä tavalla, se voi heikentää kuvan laatua merkittävästi.
Häviötön puristus on tekniikka, joka pitää tiedoston laadun korkeana. Se ei kuitenkaan pienennä tiedostokokoa yhtä paljon kuin häviöllinen pakkaus. Jos haluat pienentää tiedostokokoa ilman, että laatu heikkenee, on parempi valita häviötön pakkaus.

Lue lisää online-työkaluista, joilla voit pakata kuvan ilman laadun heikkenemistä.

Kuvien optimointi verkkoa varten: työkalujen yleiskatsaus

Haluatko selvittää, kuinka verkkosivuston kuvat optimoidaan? Onneksi käytät verkkotyökaluja kuvien optimointiin automaattisesti ilman, että joudut katsomaan Photoshopin opetusohjelmia.

Seuraavat sivustot voivat automatisoida optimoinnin puolestasi:

Kuvakoon optimointi: 4 yksinkertaista työkalua

Jos etsit tiedostokoon pienennystä, tutustu johonkin seuraavista palveluista. Ne ovat joko ilmaisia tai niillä on ilmaisia kokeilujaksoja:

TinyJPG: se pienentää JPEG-kuvien tiedostokokoa. Heidän sivustonsa mukaan se voi vähentää sitä yli 70%!
TinyPNG: sama kuvanpakkaus, mutta PNG-tiedostoille.
Squoosh: kuvanpakkausverkkosovellus, joka pienentää kuvien kokoa useiden muotojen avulla.
jpeg Mini: valokuvapakkaus JPEG-tiedostoille. Siinä on edistyneempiä ominaisuuksia, joista on apua valokuvaajille, mukaan lukien valokuvien vieminen suoraan Lightroomista ja Photoshopista.
ImageOptim: kuvanoptimointiohjelma Mac-laitteille. Sinun on ladattava se käyttääksesi.

Kuvien optimointi JPEGminillä

Jos sinulla on Ecwid-kauppa, voit käyttää SEO nopeus ja kuvan optimointi sovellus Ecwid App Marketista. Sovellus mahdollistaa yksi klikkaus tuotekuvien optimointi ja pakkaus, mikä nopeuttaa tuotesivujen latausaikoja.

Kuvien optimointi WordPressille

Jos sinulla on WordPress-verkkosivusto, voit käyttää kuvanoptimointiohjelmaa ja pakkauslaajennuksia. Niiden avulla voit automaattisesti optimoida kuvat WordPress-sivustoilla, mikä mahdollistaa paremman nopeuden ja suorituskyvyn.

Muuten, jos etsit verkkokauppalaajennusta WordPress-verkkosivustollesi, katso tämä Ecwid by Lightspeed-laajennus. Sen avulla voit helposti lisätä verkkokaupan WordPress-sivustollesi. Kun laajennus on asennettu, se luo automaattisesti kauppasivun, jolla asiakkaasi voivat tehdä ostoksia verkkosivustollasi.

Ewww Image Optimizer
Ewww Image Optimizer on yksi parhaista WordPress-laajennuksista kuvien pakkaamiseen ja verkkosivustosi kuvien optimointiin. Koko kuvien optimointiprosessi on automatisoitu. Tämä sisältää kuvien pakkaamisen ja skaalauksen oikean kokoiselle sivulle ja laitteeseen sopivaksi. Plugin on tilattavaa mutta se tarjoaa a 7 päivän ilmainen kokeilu.

Pakkaa JPEG & PNG
Pakkaa JPEG & PNG on laajennus, jonka on luonut jo tarjoamiemme palveluiden takana oleva tiimi mainittu - TinyPNG ja TinyJPG. Se pakkaa kuvat automaattisesti latauksen yhteydessä. Voit myös joukkooptimoida vanhoja kuvia. Ilmaisella tilillä voit optimoida 500 kuvaa kuukaudessa.

reSmush.it
reSmush.it on ilmainen WordPress-kuvanpakkauslaajennus tiedostoille, joiden koko on enintään 5 megatavua. Voit optimoida kuvat automaattisesti latauksen yhteydessä, joukkooptimoida vanhemmat kuvat ja jättää joitain kuvia pois optimoijasta.

Lisää automaattisia kuvanoptimointityökaluja

Mutta entä jos sinulla ei ole WordPress-verkkosivustoa? Suuren valokuvamäärän manuaalinen optimointi on ehdottomasti aikaavievä. Onneksi on olemassa useita online-työkaluja, joilla tiedostokokoa voidaan pienentää automaattisesti parantaa sivuston nopeutta.

ImageRecycle
ImageRecycle tukee erilaisia kuvamuotoja, kuten JPEG, PNG, GIF ja jopa PDF-tiedostoja.

Työkalu voi määrittää, mitkä verkkosivustosi kuvat on optimoitava kuvan koon ja mittojen perusteella. Kirjoita vain verkkosivustosi osoite ja ImageRecycle lähettää sinulle ilmaisen raportin sähköpostitse. Heillä on myös ilmainen kokeiluversio, jotta voit nähdä heidän optimointityökalunsa toiminnassa.

ImageKit.io
ImageKit.io ei ole tavallinen kuvanpakkaus, vaan kuvan CDN (sisällönjakeluverkko). Se optimoi, muuttaa kokoa ja lähettää kuvia maailmanlaajuisen palvelinverkostonsa kautta. Voit tilata ikuisesti ilmaisen paketin.

Työkalut tuotekuvien muokkaamiseen

Jos et halua muokata kuvia itse etkä pelkää pientä tee-se-itse-työtä, kuvien muokkaustyökaluista voi olla apua. Tässä muutama niistä:

Photoshop
Photoshop tarjoaa ilmaisen online-toimittaja peruskuvankäsittelyyn (kuten kuvien rajaamiseen tai koon muuttamiseen). Sen avulla voit myös poistaa kuvista taustan ja hienosäätää valokuvia eri asetuksilla, kuten kontrasti, kirkkaus, kylläisyys, lämpö tai terävöitys.

Online Photoshop editorissa on suunnittelumalleja, joita voit käyttää

GIMP
GIMP on ilmainen ohjelma, joka sopii Windowsille, Macille ja Linuxille. Se tarjoaa kaiken mitä tarvitset ammattimaiseen grafiikkaan ja valokuviin, mukaan lukien työkalut tasoille ja naamioille, värinkorjaukseen, retusointiin ja maalaamiseen. GIMP tukee kaikkia yleisimpiä kuvatiedostomuotoja.

PicMonkey
PicMonkey on online-editori, jossa on yksinkertainen käyttöliittymä ja kaikki perustoiminnot, kuten rajaus, pyöritys, terävyyden säätö, värien käsittely ja resoluutiokuvien valinta. Se tarjoaa malleja kuvien luomiseen mainoksille, sosiaalisille viesteille, logoille, infografiikalle ja muille. Siinä on a 7 päivän ilmainen kokeilu.

Pixlr
Pixlr tarjoaa ilmaisen online-editorin ja suunnitteluresurssit aloittelijoille ja ammattilaisille. Siinä on työkalut värien, piirtämisen ja valokuvien muokkaamiseen. Pixlrillä työskentelet tasojen kanssa ja käytät erilaisia tehosteita ja suodattimia. Jos olet kiinnostunut, voit koeajo premium-suunnitelma ilmaiseksi 30 päivän ajan.

Lisää kuvan optimoinnista

Suuret kuvat voivat hidastaa verkkosivustoasi, joten on tärkeää optimoida ne verkkoa varten. Oikean kuvamuodon löytäminen kuvillesi kokoa muuttamalla ja pakkaamalla voi tehdä ihmeitä verkkosivustosi nopeudelle.

Ja nyt tiedät hyvät uutiset: optimointi on erittäin helppoa! Voit myös palata takaisin ja viitata tähän artikkeliin aina kun tarvitset.

Jos olet kokeneempi käyttäjä ja haluat oppia lisää kuvien optimoinnista hakukoneoptimointia varten, suosittelemme katsomaan tämän Googlen videon. Siinä käydään läpi joitain edistyneitä vinkkejä kuvien optimointiin verkkosivustoa varten. Katso se täältä:

Riippumatta siitä, kuinka kokenut olet verkkokaupan omistajana, älä koskaan unohda kuvien optimointia. Yksinkertaisimmatkin työkalut voivat tehdä kuvistasi sopivia verkkoon. Optimoimalla kuviasi voit vaikuttaa merkittävästi asiakkaidesi ostokokemukseen. Varmista, että tuotekuvasi ovat kauniita ja latautuvat nopeasti!

Jos olet vasta verkkokauppamatkasi alussa ja sinun on luotava verkkokauppa, tutustu Lightspeedin Ecwid. Sen avulla voit perustaa ilmaisen verkkokaupan itse ilman koodaus- tai suunnittelutaitoja. Täydellinen, jos haluat aloittaa online-myynnin mahdollisimman pian!

Author

Anastasia Prokofjeva on sisällöntuottaja Ecwidissä. Hän kirjoittaa verkkomarkkinoinnista ja promootiosta tehdäkseen yrittäjien päivittäisistä rutiineista helpompaa ja palkitsevampaa. Hänellä on myös pehmeä paikka kissoille, suklaalle ja kombuchan tekemiseen kotona.