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.

Hakukoneoptimoidun sisällön tuottaminen

Miten saan sivuston Googlessa ensimmäiseksi? Tai edes ensimmäiselle sivulle?

Ensimmäinen ja tärkein asia on sivuston sisältö. Jos sivuillasi ei ole kertaakaan mainittu haluttua hakusanaa, se tuskin Googlestakaan löytyy. Kirjoita siis tekstiä, josta halutut hakusanat löytyy. Näin mahdollistat Googlen yhdistävän sivustosi tiettyyn hakusanaan. Sisällön lisäksi hakutulokseen vaikuttavat monet muutkin seikat. Esimerkiksi linkit ulkopuolisilta sivuilta, kävijöiden sivulla vietetty aika, sivuston toimivuus mobiililaitteilla ja sivuston nopeus. Sisältö on kuitenkin tärkein. Ota nämä asiat huomioon, kun teet sisältöä verkkosivuillesi:

1. Mieti avainsanat, joilla tuotteita tai palveluitasi haetaan

Avainsanoina voi olla myös sanapari. Voit käyttää apuna myös Googlen avainsanasuunnittelijaa (vaatii Google Ads tilin).

2. Kirjoita jokaiselle avainsanalle oma sivu

Tarvitset jokaiselle avainsanalle oman sivun, jotta optimointi on mahdollista.

3. Lisää haluttu avainsana sivun url:iin

4. Lisää haluttu avainsana sivun pääotsikkoon

5. Käytä väliotsikoita, joissa hakusana esiintyy

Väliotsikot ovat yleensä H2 tai H3 tason otsikoita.

6. Kirjoita riittävän pitkä teksti, jossa avainsana toistuu

Tekstisisältöä tulee olla vähintään 350 sanaa.

7. Kirjoita avainsana sivun metatietoihin

Avainsana tulee löytyä sivun otsikko (title) ja kuvaus (description) -kentistä. Näissä kentissä tulee olla riittävän pitkä teksti. Ei siis pelkkä avainsana.

8. Lisää avainsana kuvan alt -kenttään (vaihtoehtoinen teksti)

9. Lisää sisäisiä linkkejä

Linkitä esimerkiksi etusivulta alasivulle ja alasivulta toiselle.

10. Käytä apuna Yoast SEO -lisäosaa

Lisäosa opastaa hakukoneoptimoidun sivun tekemisessä. Se kertoo, mitkä asiat on huomioitu ja missä on parannettavaa. Myös sivun meta-tiedot voit päivittää Yoast SEO:n kautta.