Kuvien pienentäminen nettisivuille voi tapahtua monilla eri tavoilla, mutta yleisin tapa on muuttaa kuvan mittoja tai pakata kuvaa ja siten pienentää sen tiedostokokoa.
Voit käyttää pienentämiseen kuvankäsittelyohjelmaa tai ilmaista verkkopohjaista työkaluja. Muista myös optimoida kuvat oikeisiin tiedostomuotoihin, kuten JPEG, PNG tai WebP, riippuen käyttötarkoituksesta ja tarvittavasta laadusta.
Nimeä tiedostojen nimet kuvaa kuvaavilla avainsanoilla. Jos yritystoimintasi on paikallista, lisää tiedostonimeen myös paikkakuntasi. Näin lisäät sivujesi hakukonenäkyvyyttä.
Tiedostokoon osalta pyri pitämään kuvat mahdollisimman pieninä ilman merkittävää laadun huonontumista. Eli jos kuva näyttää suttuiselta, on sen laatu jo liian huono. Joskus kuvien pienentämisessä joutuu tekemään kompromisseja kuvan tiedostokoon ja laadun kanssa.
On tärkeää myös ottaa huomioon sivujen responsiivisuus eli skaalatuminen eri laitteille, jotta kuvat näyttävät hyvältä niin mobiilissa kuin tietokoneellakin.
Miksi kuvat kannattaa pienentää?
Saatat miettiä, että miksi kuvia tarvitsee pienentää? Enkö voi vain ladata suoraan kamerasta ottamaani kuvaa kotisivuilleni? Kuvien pienentäminen on tärkeää kotisivujesi latautumisnopeuden, käyttäjäkokemuksen ja hakukoneoptimoinnin kannalta. Suoraan kamerasta ottamasi kuva on aivan liian suuri kotisivuilla käytettäväksi ja hidastaisi sivujesi latautumista huomattavasti.
- Pienemmät kuvatiedostot latautuvat nopeammin, mikä parantaa sivujesi suorituskykyä. Sivujen nopea latautuminen on tärkeää käyttäjäkokemuksen kannalta, koska kukaan ei nykypäivänä enää jaksa odotella sivujen latautumista montaa minuuttia. Toki kotisivujesi latautumisaikaan vaikuttaa moni muukin asia kuvien lisäksi.
- Kotisivujesi kävijöiden laitteiden ja verkkoyhteyksien nopeudet vaihtelevat. Pienentämällä kuvien tiedostokokoa vähennät myös tiedonsiirron määrää, mikä on erityisen tärkeää mobiilikäyttäjille tai niille, joilla on hitaampi internet-yhteys käytettävissään.
- Pienemmät kuvatiedostot säästävät tilaa palvelimella, mikä voi olla merkittävää erityisesti silloin, kun käytetään jaettua palvelinta tai kun palvelintilan määrä on rajoitettu.
- Nopeammat latausajat ja parempi käyttäjäkokemus voivat positiivisesti vaikuttaa hakukoneoptimointiin. Google ottaa huomioon sivuston nopeuden hakutulossijoitusta arvioidessaan eli nopeammin latautuvat sivustot nousevat hakukonetuloksissa korkeammalle.
Kuvankäsittelyohjelman valinta kuvien pienentämiseen
Miten osaan löytää ohjelman, jolla voin pienentää kuvia? Monilla ei ole tietokoneella tai älypuhelimessa oletuksena mitään erillistä kuvankäsittelyohjelmaa, koska sille ei useinkaan ole tarvetta.
Mielestäni kolme helpointa tapaa kuvien pienentämiseen ovat
- kuvankäsittelyohjelma (esimerkiksi Adobe Photoshop, Adobe Lightroom, GIMP)
- netistä löytyvä sivusto kuvien pienennykseen (esimerkiksi TinyPNG, Image Resizer, Canva)
- älypuhelimeen ladattava kuvankäsittelyyn tarkoitettu sovellus (esimerkiksi Snapseed)
Kuvankäsittelyohjelman valintaan vaikuttaa olennaisesti se, millä laitteella otat kuvia. Jos otat niitä digi- tai järjestelmäkameralla, siirrät kuvat todennäköisesti tietokoneelle, joten sinulle sopii tietokoneelle asennettava kuvankäsittelyohjelma tai sivusto, jossa voit pienentää kuvat. Jos taas otat kuvia älypuhelimellasi, on helpointa pienentää ja muokata niitä puhelimeen asennetulla sovelluksella. Varsinkin, jos päivität kotisivujasi myös puhelimellasi.
Ohjelman valintaan voivat vaikuttaa myös muut tarpeesi. Jos haluat vain nopeasti pienentää kuvia, soveltuvat netistä löytyvät sivustot tai ilmaiset kuvankäsittelyohjelmat/-sovellukset sinulle hyvin. Jos taas haluat tehdä myös muuta kuvankäsittelyä, voi kuvankäsittelyohjelma olla sinulle sopivampi vaihtoehto. Esimerkiksi Canvalla teet helposti myös monipuolisia markkinointimateriaaleja helposti valmiiden pohjien avulla. Canvaa voit käyttää selaimella tai puhelimeen asennettavalla sovelluksella.
Sopiva koko kuvatiedostolle
Kuvan sopivat mitat ja koko kotisivuilla voivat vaihdella käyttötarkoituksesta ja sivun ulkoasusta riippuen. Tässä kuitenkin mittoja, joita itse tällä hetkellä pyrin käyttämään. Kotisivuille ladattavien kuvien tiedostokoolle hyvä ohjesääntö on, että kuvatiedostojen tulisi olla alle 500 kilotavua.
- Bannerikuvat
Sivuston yläosaan sijoitettava bannerikuva tai koko sivun levyinen kuvakarusellikuva: leveys 2200 pikseliä. Näin kuva pysyy tarkkana myös korkearesoluutioisilla tietokoneiden näytöillä. - Sisältökuvat
Sisältökuvien mitat vaihtelevat käyttötarkoituksesta riippuen, mutta yleisesti ottaen 1000-1500 pikseliä leveä kuva on riittävä. - Pikkukuvat (thumbnail)
Pienet kuvakkeet tai esikatselukuvat voivat olla esimerkiksi 150-300 pikseliä leveitä. Näitä ei välttämättä tarvitse erikseen lisätä sivustolle, jos pystyt lisätessäsi kuvaa sivulle valitsemaan kuvan koon pienemmäksi. Voit silloin käyttää sisältökuvaa ja tarvittaessa linkittää isomman kuvan aukeamaan pikkukuvasta. - Taustakuvat
Taustakuvien mitat vaihtelevat sivuston tyylistä riippuen, mutta esimerkiksi 2500 pikselin leveys voi olla hyvä lähtökohta taustakuvalle.
Toimintaohjeet kuvien pienentämiseen
- Tallenna alkuperäinen kuva
Ennen kuvan muokkaamista tallenna alkuperäinen kuva varmuuskopioina, jotta voit palata siihen tarvittaessa ja muokata sitä uudelleen. Tee muokkaukset aina alkuperäiseen kuvaan, jotta kuvan laatu ei heikkene uudelleen tallennuksista. - Määrittele kuvan käyttötarkoitus
Mieti mihin tarkoitukseen kuva on tulossa kotisivuillesi. Onko se bannerikuva, tuotekuva, taustakuva vai jotain muuta? Tämä auttaa sinua ymmärtämään, millaiset mitat ja resoluutio kuvassa tulisi olla. - Valitse oikea työkalu kuvan pienentämiseen
Valitse sopiva kuvankäsittelyohjelma tai verkkopohjainen työkalu kuvan muokkaamiseen. Jos kyseessä on yksinkertainen kuvan pienentäminen, voit käyttää ilmaisia verkkotyökaluja. - Pienennä kuvan kokoa
Pienennä kuvan koko haluamaasi resoluutioon. Määrittele esimerkiksi pidemmän sivun resoluutio ja käytä asetusta, joka automaattisesti pienentää oikeassa suhteessa myös kuvan lyhyemmän sivun. - Optimoi tiedostokoko
Käytä valittua työkalua optimoimaan kuvan tiedostokoko ilman merkittävää laadun heikkenemistä. Mitä pienemmäksi saat kuvan tiedostokoon, sitä nopeammin kotisivusi latautuvat. Älä kuitenkaan pienennä laatua liikaa, ettei kuvasta tule heikkolaatuisen näköinen. Jossain kuvankäsittelyohjelmissa laatu määritellään vasta kuvaa tallennettaessa. - Tallenna muokattu kuva
Tallenna uusi muokattu kuva ja muista optimoida myös kuvan tiedoston nimi oikeilla avainsanoilla. Tallenna kuva sopivaan tiedostomuotoon esim. JPG, PNG tai WebP. - Lataa kuva sivustolle
Lopuksi lataa optimoitu kuva sivustolle ja varmista, että se näkyy hyvin kaikilla laitteilla.
Tarvitseko apua?
Kuvien pienentäminen ja muut tekniset asiat saattavat tuntua hankalilta ja olisi helpompaa jos joku neuvoisi kädestä pitäen tai tekisi ne puolestasi, vai mitä?
Jos tarvitset apua kuvien pienentämiseen, muuhun kuvankäsittelyyn, kuvien hakukoneoptimointiin, tai haluaisit yrityksellesi markkinointimateriaaleja, ota yhteyttä! Teen kotisivujen ja verkkokauppojen lisäksi valokuvausta, joten kuvankäsittely on minulle tuttua puuhaa. Autan mielelläni!
Haluatko lukea lisää kuvien hakukoneoptimoinnista? Kurkkaa blogikirjoitukseni Kuvien hakukoneoptimointi.
