Mikä on oikea kuvakoko ja -tyyppi nettisivuilla? Pitäisikö käyttää jpg, png, gif, tiff vai webp tyyppiä? Kuinka isoja kuvien täytyy olla?

Kuvakoko

Kuvakoosta puhuttaessa voidaan tarkoittaa kahta eri asiaa:

• Kuvan resoluutiota eli kuinka leveä ja korkea se on
• Kuvatiedoston kokoa eli kuinka paljon se vie levytilaa

Resoluutio

Resoluutio voi olla esimerkiksi 640 x 320 pikseliä. Nimenomaan pikseliä. Ei printtimediassa käytettävää dpi:tä, joka tarkoittaa pistettä tuumalle. Erilaisilla näytöillä kun on eri verran pikseleitä eli kuvapisteitä tuumalla. Fyysisesti saman kokoinen näyttö voi olla resoluutioltaan erilainen. Siksi verkkosivutkin saattavat näyttää hieman erilaiselta fyysisesti samankokoisella näytöllä.

Verkkosivuilla paras resoluutio on se, missä koossa kuva maksimissaan sivustolla on. Eli mahdollisimman pieni. Koko ruudun levyisissä kuvissa kannattaa käyttää FullHD näytön kokoista resoluutiota eli 1920px leveää tai nykyään jo yleistymässä olevaa 2560px leveää. Ei isompaa.

Verkkosivuston sisältöosio rajataan usein maksimissaan 1200 pikseliin. Näin ollen sisältöalueella ei kannata käyttää sen leveämpää kuvaa. Jos sisältö on vielä kahdessa sarakkeessa, kuvan maksimileveys olisi 600px.

Kun verkkosivuilla käytetään juuri sen kokoista kuvaa kun alkuperäinen kuvatiedosto on, sen laatu on myös paras. Jos selain joutuu pienentämään kuvaa, niin sen laatu kärsii. Tämä näkyy erityisesti pienissä kuvissa.

Kuvatiedoston koko

Kuvatiedoston kokoon vaikuttaa edellä mainittu resoluutio. Mutta resoluutioltaan pienempi kuva ei välttämättä aina ole tiedostokooltaan pienempi. Siihen vaikuttaa suuresti kuvan tiedostotyyppi ja pakkaustaso. Esimerkiksi yleisessä JPG kuvaformaatissa pakkaustasolla on iso vaikutus kuvatiedoston kokoon. Ei siis riitä pelkästään resoluution pienentäminen.

Tässä esimerkiksi kaksi samalla resoluutiolla, mutta eri pakkaustasolla tallennettua JPG kuvaa:

Vasemmanpuoleisen kuvan tiedostokoko on noin kolme kertaa suurempi. Molemmat ovat JPG kuvia samalla resoluutiolla. Laadussa silmä ei eroa huomaa. Isommilla resoluutioilla tiedostokoon ero voi olla todella suuri, esimerkiksi 2MB:n kuva saattaa olla alle 100kt isommalla pakkaustasolla.

Kuvatyyppi

Paras tiedostotyyppi nettisivuille on Googlen kehittämä WebP kuvaformaatti. Sen pakkaus on tehokkaampi kuin JPG:n. WebP tukee myös kuvan läpinäkyvyyttä. Toisin kuin JPG. Läpinäkyvissä kuvissa on käytetty usein PNG -kuvia, mutta ne ovat tiedostomuodoltaan selkeästi webP -kuvia isompia. WebP:ssä myös kuvan pakkaustasoa voi säätää. Siinä on mahdollisuus myös ”häviöttömään” pakkaamiseen. Mutta se ei ole suositeltavaa verkkosivuistoissa, koska tiedostokoko on silloin iso.

Gif kuvia käytetään lähinnä pienten gif -videoiden esittämiseksi.

Logoissa ja ikoneissa on suositeltavaa käyttää vektorimuotoista SVG -kuvaa.