Kuvakoon muokkaaminen ja optimointi WordPress-verkkosivuja varten

Olemme saaneet kyselyitä kuvakoon muokkaamisesta ja kuvan kompressoinnista niin chatin, sähköpostin kuin myös pitämiemme koulutusten kautta. Nyt kirjoitimme aiheesta oman artikkelin.

Jos haluat optimoida kotisivujesi tai verkkokauppasi kuvia ja siten parantaa verkkosivujesi käyttäjäkokemusta sekä hakukoneoptimointia, tämä artikkeli on sinulle! Näillä ohjeilla pienennät ja pakkaat kuvat nettisivujasi varten.

Miksi kuvia pitäisi optimoida?

Oletko koskaan kuullut hakukoneoptimoinnista? SEO eli hakukoneoptimointi tarkoittaa kaikkia niitä toimia, joilla pyritään parantamaan verkkosivuston näkyvyyttä hakukoneissa, kuten esimerkiksi Googlen hakutuloksissa.

Yksi hakukoneoptimoinnin keinoista on sivuston nopeuden optimointi. Nettisivujen nopeus on tärkeää, sillä kukaan meistä ei pidä hitaasti latautuvista nettisivuista. Googlen suositus onkin, että nettisivujen pitäisi latautua alle 1,5 sekunnissa.

Jos nettisivuillasi on paljon kuvia, se hidastaa sivun latausaikaa, koska jokaisen kuvan tarvitsee latautua ennen kuin sivua voidaan näyttää kokonaan.

Lue lisää: Hakukoneoptimoinnin yleisimmät virheet

Kuvien optimointi verkkosivuja varten

Kuvitellaan vaikka, että kotisivujesi etusivulla on kymmenen kuvaa, etkä ole muokannut niitä ollenkaan.

Kamerasta suoraan otettu kuva on monesti tiedostokooltaan vähintään 4 megatavua, kuvakoon ollessa esimerkiksi 4000×3000 pikseliä.

Jos etusivullasi on kymmenen noita neljän megatavun kuvia, niin pelkästään kuvista tulee 40 megatavua ladattavaa! Se on paljon, koska keskimäärin yhden sivun koko on noin kolme megatavua.

Miten voit sitten optimoida kuvat ja nopeuttaa kotisivujesi tai verkkokauppasi latausaikaa? Siitä seuraavaksi.

Lue lisää: HEIC-tiedostojen käyttäminen WordPress-sivustolla

Näin voit optimoida kotisivujen kuvat

Kuvakoon muokkaaminen onnistuu monilla ohjelmilla, mutta yksi suosituimmista ilmaisista ohjelmista on GIMP. Voit ladata ilmaisen version ohjelmistosta täältä: https://www.gimp.org/downloads/

Esimerkkitapauksessamme kuvan koko on alunperin 5505×3670 pikseliä eli kuva on 5505 pikseliä leveä ja 3670 pikseliä korkea. Noin suurta kuvakokoa ei tarvitse ikinä verkkosivuilla.

Käytä aina vain sellaista kuvakokoa kuin tarvitset. Jos tarvitset pienen, esimerkiksi 300×300 kokoisen kuvan, on turha ladata kotisivuillesi täysikokoista kuvaa.

Gimpillä voit muokata kuvakokoa helposti!

Kuvan koon muokkaaminen Gimpillä

Avaa ensiksi haluamasi tiedosto auki.

Kun olet saanut kuvan auki, klikkaa yläpalkista Kuva ja valitse sieltä Skaalaa kuvaa…

Vaihda Leveys-kohtaan haluamasi leveys, esimerkiksi 800, jolloin korkeus muokkautuu automaattisesti niin, että kuvan muoto pysyy samana.

Klikkaa lopuksi Skaalaus-painiketta.

Nyt kuvan kokoa on pienennetty alkuperäisestä haluamaasi kokoon.

Kuvan kompressointi Gimpillä

Äskeisessä vaiheessa kuvan kokoa muokattiin, mutta kuvaa kannattaa vielä kompressoida eli pakata pienemmäksi.

Klikkaa ylävalikosta Tiedosto ja sen jälkeen Korvaa ”kuvannimi”-painiketta. Esimerkissäni painikkeen teksti on Korvaa luontokuva.jpg.

Oletuksena kuvanlaatu on 100 %, mutta kuvaa voi yleensä kompressoida 60-70 % tasolle ilman, että se vielä näyttäisi rakeiselta.

Valitse siis laaduksi esimerkiksi 70 ja klikkaa lopuksi Vie-painiketta.

Paljonko kuvan kompressointi vaikuttaa kuvan tiedostokokoon?

Tässä lukemia esimerkkitapauksestamme:

Alkuperäinen kuva oli siis 5505×3670 pikseliä ja kuvan tiedostokoko 4,2 megatavua.

Kuvakoon pienentäminen 800×533 kokoon teki jo kuvan tiedostokoolle hyvää tiedostokoon pudotessa 0,34 megatavuun.

800×533 kokoisen kuvan kompressointi 70% laatuun teki lopullisesta kuvastamme 0,037 megatavun eli 37 kilotavun kokoisen.

Pienentämällä kuvakokoa sekä kompressoimalla kuva saatiin aikaiseksi noin 99% pienempi kuvan tiedostokoko! Jos kompressoit tällä tavalla kaikki verkkosivujesi kuvat, niin sivujesi latausnopeus paranee varmasti.

Lue lisää: WordPress-kotisivujen ylläpito

Huomaatko kuvissa eroa?

Alempi kuva on kompressoitu.

Yhteenveto

Kuvien optimointi:

• Lisää kuvatiedostot verkkosivuillesi valmiiksi sellaisessa koossa kuin niitä aiot käyttää
• Pienennä kuvan kokoa esimerkiksi Gimpillä
• Kompressoi eli pakkaa kuvat 60-70 % laadulla
• Nimeä kuvat ennen niiden lisäämistä verkkosivuillesi

Jos sinulle tulee mieleen kysyttävää kuvankäsittelystä tai jostain muusta markkinointiin, yrittämiseen tai verkkosivuihin liittyvistä asioista, niin ole meihin yhteydessä.

Lue seuraavaksi: Blogiartikkelin hakukoneoptimointi