Kuvien optimointi – kaksi näppärää työkalua optimointia varten

Kotisivuja voi optimoida monella tavalla. Usein optimointi kohdistuu sivujen latautumisnopeuden parantamiseen, jossa kuvatiedostot voivat olla suuressa roolissa.

Tässä kirjoituksessa käymme läpi, kuinka yksittäisiä kuvia on mahdollista optimoida siten, että ne säästävät palvelintilaa, kuukausittaista liikennöintiä sekä parantavat näin sivuston latautumisnopeutta.

Kuvien optimointi

Alkuun lienee hyvä selkeyttää miksi kuvia olisi hyvä optimoida ja mitä optimoinnilla oikein tarkoitetaan. Kuvat ovat lähtökohtaisesti sivuston raskaimpia yksittäisiä elementtejä, jotka vievät levytilaa palvelimelta sekä 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 aiheesta lisää täältä:
https://www.zoner.fi/kotisivujen-nopeuden-merkitys/

kuvien optimointi

Mitä optimoinnissa sitten tapahtuu?

Optimoinnilla tarkoitetaan yleisesti kuvien kompressointia siten, että sama kuva veisi jatkossa vähemmän tilaa. Tämä saavutetaan vähentämällä kuvassa käytettyjen värien määrää yhdistelemällä hyvin lähellä toisiaan olevia värejä samoiksi. Koska muutokset ovat hyvin hienovaraisia, ei eroavaisuuksia yleensä edes huomaa ihmissilmällä. Kuvatiedostosta myös poistetaan erilaiset exif-tiedot, joillain tarkoitetaan siis vaikkapa kuvaan tallentuneita päivämääriä tai käytetyn kameran tietoja.

Optimointia on toki myös kuvien kuvasuhteiden muokkaaminen valmiiksi haluttuun kokoon. Mikäli sivuston leveys on esimerkiksi 1000px, ja kuva halutaan koko näkymän levyiseksi, on turha ladata leveydeltään tätä suurempaa kuvaa palvelimelle. Vaikka selain osaisikin automaattisesti pienentää kuvan oikeaan kokoon, ladataan se silti alkuun täysikokoisena, joka nostattaa sivun latautumisnopeutta.

Yhteenvetona

  • Optimoidut kuvat vievät vähemmän palvelintilaa ja kuukausittaista liikennöintiä.
  • Kuvien optimointi vaikuttaa parantavasti sivuston latautumisnopeuteen ja sitä kautta myös hakukonesijoituksiin.

Kaksi työkalua kuvien optimointiin

Kuvien käsittelyyn ja optimointiin on olemassa lukuisia selainpohjaisia ohjelmia. Valitsin tähän kirjoitukseen kaksi, joita itse olen testaillut 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. Tätä en vielä testannut, mutta todennäköisesti päätyy hankintalistalle.

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 sekä kuvan rajaamisen. Käytän itse kuvien käsittelyyn aina ensisijaisesti Photoshopia, mutta mikäli koneelta ei kuvankäsittelyohjelmia löydy tai tarve on vain yksittäisille kuville, voivat nettipohjaiset ilmaiset sovellukset, kuten imageresize.org, hyvin riittää hommaan.

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/

Webdesigner, sähköisen markkinoinnin ammattilainen, jonka intohimoihin kuuluvat mm. verkkokaupat, hakukoneoptimointi ja WordPress.

Share
Tweet
Share
Pin
+1