Kuvan pienentäminen netistä löytyvien kuvankäsittelyohjelmien avulla

Kotisivuja voidaan optimoida monella tavalla. Yleensä optimointi kohdistuu sivuston latautumisnopeuden parantamiseen, jossa kuvatiedoston pienentäminen voi olla keskeisessä roolissa.

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, kuinka kuvatiedostoja voidaan pienentää eli optimoida 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ä.

Miten pienentää kuvan kokoa?

Kuvien optimoinnin tavoitteena on, että kuva veisi jatkossa vähemmän tilaa. Se voidaan tehdä esimerkiksi kuvan kokoa pienemmäksi muuttamalla tai poistamalla kuvatiedostoista ylimääräisiä tietoja.

Yksi optimointikeino onkin muuttaa kuvan kokoa pienemmäksi, 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ä rajausta ja kuvasuhdetta sen kautta.

Kuvien tiedostokokoa voidaan pienentää myös 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.

Kuvatiedostoa voidaan pienentää myös poistamalla kuvatiedostosta 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 webhotellit -sivumme 10 kuvaa. Kuvat olin jo aiemmin tallentanut Photoshopilla nettikäyttöön soveltuviksi ja veivät yhteensä 562Kt tilaa. Kompressoinnin jälkeen samat kuvat veivät enää 209Kt tilaa, joten hyötyä oli hyvinkin merkittävästi.

TinyPNG on tarkoitettu vain PNG ja JPEG -muotoisten kuvien tiedostokoon pienentämiseen ja ainoastaan kompressoi kuvat pienempiin tiedostokokoihin. Se ei siis sisällä ominaisuuksia kuvan muuhun muokkaamiseen, kuten rajaamiseen tai kuvasuhteiden muuttamiseen.

TinyPNG tarjoaa myös erillistä maksullista lisäosaa Photoshopiin, jolla optimoituja kuvia saisi suoraan kuvankäsittelyohjelmasta tallennettuna.

TinyPNG:n kotisivut löydät täältä:
https://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, tiedostokoon pienentämiseksi

Imageresize.org kotisivut löydät täältä:
https://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ä:
https://www.canva.com

Oliko kirjoitus hyödyllinen? Jaa se eteenpäin: