Kuvat ovat heti videoiden ja erilaisten animaatioiden jälkeen isoimmat sivustojen – niin tavallisten kuin verkkokauppojenkin – toiminnan hidastajat. Niiden optimointiin kannattaa siksi käyttää vähän aikaa ja vaivaa, koska sivut latautuvat paljon nopeammin, kun kuvat on optimoitu mahdollisimman pieniksi.

Tässä ohjeistus kuvien optimointiin GIMP-kuvankäsittelyohjelmalla.

Voit ladata GIMPin itsellesi täältä. Se on ilmainen, vapaan lähdekoodin kuvankäsittelyohjelmisto, josta löytyy kaikki peruskäyttäjän tarvitsemat toiminnot.

1. Avaa kuva, jonka haluat skaalata, GIMPiin.

2. Valitse ylärivin valikosta kohta Image/Kuva. Aukeaa alasvetovalikko.

Valitse alasvetovalikosta kohta Scale Image/Skaalaa kuvaa [kts kuva 1 alla].

Kuvien optimointi nettisivuille GIMP-ohjelmalla - Web-suunnittelija Eeva Lamminen

3. Aukeaa valikko, jossa voit määritellä koon, johon haluat skaalata kuvasi. [kts kuva 2 alla]

Kuvien optimointi nettisivuille GIMP-ohjelmalla - Web-suunnittelija Eeva Lamminen

Nettisivuille sopivin kuvan koko on yleensä vaakakuvalle leveydeltään 1500 – 2000 px (pikseliä). Leveän kuvan korkeudella ei merkitystä, sen voi antaa asettua automaattisesti kuvasuhteen mukaan.

Pystykuvalle sopiva pikselikoko on korkeudeltaan 1500 px. Pystykuvan leveydellä ei ole merkitystä, sen voi antaa asettua automaattisesti kuvasuhteen mukaan.

Tiedostokoko olennaisin, ei pikselikoko

Huomioithan, että nämä ovat ainoastaan suosituksia eivätkä ole mitenkään kiveen kirjoitettuja. Olennaisempaa kuin tarkkojen lukujen seuraaminen on, että lopullisen kuvan tiedostokoko on mahdollisimman pieni.

Pikselikoolla on kuitenkin merkitystä tiedostokoon kannalta

Mitä suurempi tiedoston pikselikoko on, sen suurempi on myös tiedoston koko.

Olen käytännössä todennut 2000px lev/1500px kork olevan sopivat koot ottaen huomioon sen, että yhä useampia sivuja selataan joko tarkalta retinanäytöltä niin mobiilissa kuin tietokoneeltakin, ja että yhteyksien nopeudet saattavat vaihdella merkittävästikin.

Kuvan resoluutio 72 dpi

Kuvan resoluution voi muuttaa 72dpi:ksi. Se on tavallisen tietokonenäytön tarkkuus, joten se riittää nettikäyttöön mainiosti.

Kun olet määrittänyt kuvallesi uuden leveyden/korkeuden sekä resoluution, niin paina Scale/Skaalaa-nappia, jolloin kuva skaalautuu antamiesi lukujen mukaiseksi.

4. Kun kuvasi on skaalattu, niin tallenna se uudella nimellä, jotta alkuperäinen kuvasi säilyy muuttumattomana.

Tee tallennus File/Tiedosto-valikon Export/Vie -toiminnolla (jos yrität vain tallentaa kuvan pelkällä Save/Tallenna-komennolla, niin se tallentuu GIMPin omaan tiedostomuotoon).

5. Valittuasi Export/Vie-toiminnon aukeaa näkymä, jossa voit tallentaa kuvan nimen ja tiedostomuodon.

Anna tiedostolle uusi nimi ja valitse tiedostomuodoksi *.jpg ja klikkaa Export/Vie-painiketta.

6. Aukeaa kuvassa 3 [alla] oleva näkymä.

Kuvien optimointi nettisivuille GIMP-ohjelmalla - Web-suunnittelija Eeva Lamminen

Laita täppä ruutuun kohtaan Show preview in image window/Näytä esikatselukuva, jolloin näet kuvan koon täppätekstin yläpuolella.

Valitse kuvan laaduksi (Quality) jotain 50-80% väliltä vetovalikossa tai kirjoittamalla numero suoraan ruutuun.

Tämä määrittää sen, kuinka paljon kuvaa pakataan tallennusvaiheessa. Mitä enemmän kuvaa pakataan, sen pienempi kuvan tiedostokoko.

Hyvä tiedostokoko on maksimissaan 200kt, optimaalisillaan se on alle 100kt.

JPG-tiedostomuodon pakkausjäljen minimointi

JPG-tiedostomuoto on ns. pakkaava tiedostmuoto, joka poistaa osan kuvan datasta saadakseen kuvan tiedoston mahdollisimman pieneksi.

Siten sitä käytettäessä kuvaan voi tulla selvää pikselöitymistä, joten pakkausprosentin kanssa kannattaa olla maltillinen.

Parhaan pakkausprosentin omille kuvilleen löytää kokeilemalla ja katsomalla tuloksista, että millä laatuprosentilla kuvat ovat tarkkoja eikä niissä ole häiritsevästi pakkausjälkeä.

Itse olen todennut 50-75 prosentin pakkauksen olevan riittävän 1500 px leveille/korkeille kuville, jolla saa tiedostokoosta 200-300 kt kokoisen.