Kotisivuja voidaan optimoida monella tavalla. Yleensä optimointi kohdistuu sivuston latautumisnopeuden parantamiseen, jossa kuvatiedoston pienentäminen voi olla keskeisessä roolissa. Ideaalitilanteessa kuvien koko huomioidaa jo silloin, kun uusien nettisivujen teko on ajankohtaista.
Kuvan koon pienentäminen on usein tarpeellista myös silloin, kun kuvia halutaan tallentaa nettiin tai lähettää sähköpostitse. Tässä kirjoituksessa käymme läpi, miten pienentää kuvan kokoa eli optimoida kuvia netistä löytyvien kuvankäsittelyohjelmien avulla.
Kuvan tiedostokoon pienentäminen
Kuvat ovat lähtökohtaisesti sivuston raskaimpia yksittäisiä elementtejä, jotka vievät paljon levytilaa palvelimelta ja kuluttavat palvelintilaan usein liitettyä kuukausittaista liikennöintikiintiötä.
Mitä enemmän ja mitä raskaampia kuvia sivustolla on, sitä hitaammin se myös latautuu selaimessa kävijälle. Hitaus taas karkottaa kävijöitä ja potentiaalisia asiakkaita, lue tarkemmin aiheesta täältä.
Sivuston hidas latausnopeus vaikuttaa myös heikentävästi sivuston hakukonesijoituksiin. Sivun latautumista voidaan usein nopeuttaa kuvia optimoimalla eli kuvatiedostoja pienentämällä.
Toisaalta kuvien pienentäminen sähköpostiin voi olla välttämätöntä tai ainakin suositeltavaa, jos lähetetään useita kuvia sähköpostitse. Kuvien pakkaaminen voi tällöin tulla myös kyseeseen.
Miten pienentää kuvan kokoa?
KKuvien optimoinnin tavoitteena on, että kuva veisi jatkossa vähemmän tilaa. Esimerkiksi kuvan koon muuttaminen pienemmäksi tai kuvatiedoston ylimääräisten tietojen poistaminen on kuvien optimointia. Kuvantiedostomuodon muuttaminen voi myös auttaa, tutustu tehokkaaseen webp-formaattiin.
Yksi optimointikeino onkin kuvien pienentäminen esimerkiksi suoraan sivustolle oikeaan leveyteen. Jos kuva halutaan koko näkymän levyiseksi ja sivuston leveys on esimerkiksi 1000px, on palvelimelle turha ladata sitä leveämpää kuvaa. Vaikka selain osaisikin automaattisesti pienentää kuvan oikeaan kokoon, ladataan se silti alkuun täysikokoisena, joka nostaa sivun latautumisnopeutta.
Kuvan optimoinnin yhteydessä kannattaa tietenkin myös tarkastella rajausta ja tarvittaessa muuttaa myös kuvasuhdetta jo ennen kuvan lataamista palvelimelle. On hyvä ottaa huomioon myös se, miltä kuva näyttää eri laitteissa ja miettiä sekä rajausta että kuvasuhdetta sen kautta.
Tiedostokoon pienentäminen onnistuu vähentämällä kuvassa käytettyjen värien määrää. Käytännössä se tapahtuu yhdistelemällä hyvin lähellä olevia värejä samoiksi. Muutokset ovat niin hienovaraisia, ettei niitä yleensä edes ihmissilmällä huomaa.
Kuvatiedoston pienentäminen tapahtuu myös poistamalla erilaiset exif-tiedot, joillain tarkoitetaan vaikkapa kuvaan tallentuneita päivämääriä tai käytetyn kameran tietoja.
Kuvankäsittelyohjelma netissä
Kuvien käsittelyyn, pienentämiseen ja optimointiin on olemassa lukuisia ohjelmia. Paras kuvankäsittelyohjelma ei ole aina maksullinen, vaan myös ilmaiseksi voi saada käyttöönsä riittävän monipuolisia ja omat tarpeet täyttäviä ohjelmia. Tähän kirjoitukseen valikoitui esiteltäväksi kolme selainpohjaista ilmaisohjelmaa, jotka olen itse testannut ja havainnut toimiviksi.
TinyPNG
TinyPNG on yksinkertainen ja helppokäyttöinen sovellus, jota itse olen hyödyntänyt optimoinnissa. Sen perusominaisuudet ovat täysin ilmaisia ja ilmaisversiossa voi kerralla käsitellä 20 kuvaa, maksimikoon ollessa 5Mt per kuva. Maksullinen versio mahdollistaa useampien kuvien käsittelyn samanaikaisesti ja nostaa maksimikoon 25Mt per kuva.
Esimerkkinä olen TinyPNG:n avulla käsitellyt tämän blogitekstin kaksi kuvaa. Photoshopilla oikeaan kokoon muuttamisen jälkeen ne veivät tilaa 330 Kt ja kun ne oli käsitelty TinyPNG:llä ne veivät tilaa enää 75 Kt. Kuvat siis pienenivät kompressoinnin avulla 77%, joten voitaisiin sanoa hyödyn olleen mekrittävä.
TinyPNG mahdollistaa seuraavat toiminnot:
- Kuvan pakkaaminen yhdistelemällä läheisiä värejä toisiinsa
- Mahdollistaa PNG- ja JPG-kuvien sekä PNG-animaatioiden kompressoinnin
- Mahdollistaa kuvien kompressoinnin suoraan Photoshopin yhteydessä erillisellä maksullisella lisäosalla
TinyPNG:n kotisivut löydät täältä:
tinypng.com
Imageresize.org
Toinen kirjoitukseen päässyt työkalu taas puolestaan mahdollistaa myös kuvasuhteiden käsittelyn ja kuvan rajaamisen. Käytän itse kuvien käsittelyyn aina ensisijaisesti Photoshopia, mutta mikäli koneelta ei kuvankäsittelyohjelmia löydy ja tarve on vain pienille muutoksille, kuten kuvan rajaamiselle ja/tai kuvasuhteiden muuttamiselle, niin voivat Imageresizen kaltaiset nettipohjaiset ilmaisohjelmat riittää hommaan hyvin.
Työkalu mahdollistaa muun muassa seuraavat toiminnot:
- Kuvan rajaaminen eli croppaus
- Kuvan kääntäminen 90 asteen kulmassa
- Kuvan kääntäminen peilikuvaksi
- Kuvasuhteen pienentäminen helposti, esim. 2000px levyisestä kuvasta -> 500px leveyteen
- Kuvan tallentaminen eri kuvanlaaduilla, kuvan tiedostokoon pienentäminen
Imageresize.org kotisivut löydät täältä:
imageresize.org
Canva
Kolmanneksi tähän kirjoitukseen valikoitua Canva, joka on yksi tunnetuimmista ilmaisista kuvankäsittelyohjelmista netissä. Canva on monien mielestä jopa paras kuvankäsittelyohjelma monipuolisten ominaisuuksien ja helpon käytettävyyden ansiosta.
Canva mahdollistaa kuvankäsittelyn ja erilaisten mainosten, julisteiden tai vaikkapa postikorttien suunnittelun ilman sen suurempia kuvankäsittelytaitoja. Canvasta löytyy myös maksullinen versio, joka mahdollistaa esimerkiksi valmispohjien laajemman muokattavuuden ja tarjoaa käyttäjälle suuremman tallennustilan.
Ohjelma mahdollistaa muun muassa seuraavat toiminnot:
- Kuvan rajaaminen
- Kuvan säätäminen, esim. kontrasti ja valaistus
- Kuvan kääntäminen peilikuvaksi
- Erilaisten valmiiden kuvasuhteiden hyödyntämisen
- Erilaisten valmispohjien käyttämisen
- Erilaisten elementtien lisäämisen kuviin
Canvan kotisivut löydät täältä:
www.canva.com
