Miten optimoida kuvat hakukoneita varten?

Kuvan optimointi

Oikein optimoidut kuvat parantavat sivuston nopeutta, saavutettavuutta ja hakukonenäkyvyyttä – sekä tuovat lisäliikennettä kuvahausta.

Miksi kuvien optimointi on tärkeää?

Parempi hakukonenäkyvyys

Hakukoneet ymmärtävät kuvan sisällön ensisijaisesti tiedostonimen, alt-tekstin ja
ympäröivän kontekstin perusteella. Oikein kuvailtu media parantaa näkyvyyttä myös Googlen kuvahaussa.

Nopeampi sivuston latausaika

Raskaat kuvat hidastavat sivustoa. Nopeus vaikuttaa sekä käyttäjäkokemukseen että sijoituksiin –
optimoimalla kuvat pienennät ladattavaa dataa ja parannat Core Web Vitals -arvoja.

Parempi saavutettavuus

alt-teksti palvelee ruudunlukuohjelmia ja toimii varatekstinä, jos kuva ei lataudu. Tämä on sekä
hyvää käytäntöä että monin paikoin vaatimustaso.

Miten kuvat optimoidaan hakukoneita varten?

1) Valitse oikea tiedostomuoto

  • JPEG: valokuvat ja väririkkaat kuvat.
  • PNG: grafiikat, läpinäkyvyys.
  • WebP: moderni, pieni koko & hyvä laatu (suositeltu oletus).
  • SVG: logot ja ikonit (skaalautuva, erittäin kevyt).

2) Pienennä tiedostokoko ilman merkittävää laadun heikkenemistä

Tavoittele alle ~200 kt per kuva, kun se on realistista. Hyödynnä pakkaustyökaluja tai
palvelinpuolen optimointia (esim. WordPress-lisäosat).

3) Nimeä tiedosto kuvaavasti

Vältä IMG_1234.jpg ja käytä muotoa punainen-talvitakki.jpg. Pienet kirjaimet,
väliviivat ja luonnollinen avainsana auttavat hakukonetta ymmärtämään sisältöä.

4) Lisää informatiivinen alt-teksti

Hyvä alt: ”Punainen naisten talvitakki lumisessa maisemassa”.
Huono alt: ”takki, talvitakki, punainen takki, naisten takki”.

5) Optimoi koko ja responsiivisuus

Tarjoa samasta kuvasta useita kokoja. Hyödynnä srcset / sizes tai
<picture>-elementtiä, jotta mobiili ei lataa tarpeettoman suurta tiedostoa.

<img 
  src="kuva-800.jpg" 
  srcset="kuva-400.jpg 400w, kuva-800.jpg 800w, kuva-1200.jpg 1200w" 
  sizes="(max-width: 768px) 100vw, 800px" 
  alt="Esimerkkikuva responsiivisena">
Esimerkki responsiivisesta kuvasta srcset ja sizes -attribuuteilla.

6) Ota käyttöön laiska lataus (lazy loading)

Lisää loading="lazy" kuviin, jolloin ne latautuvat vasta näkökentässä.
WordPress aktivoi tämän usein automaattisesti uudemmissa versioissa.

7) Lisää konteksti ja tarvittaessa kuvateksti

Kuvaa ympäröivä teksti, otsikot ja mahdollinen caption kertovat hakukoneille, miksi kuva on sivulla
ja miten se liittyy aiheeseen.

8) Hyödynnä kuvien sivukarttaa (image sitemap)

Jos sivustolla on runsaasti kuvia, varmista että SEO-lisäosa (esim. Yoast, Rank Math) sisällyttää kuvat
XML-sivukarttaan, jotta hakukoneet löytävät ne tehokkaammin.

Yleisiä virheitä kuvien optimoinnissa

  • Liian suuret tiedostokoot → hidas lataus ja heikompi käyttäjäkokemus.
  • Alt-tekstien puute → hakukoneet ja ruudunlukijat eivät ymmärrä kuvaa.
  • Epäselvät tiedostonimet → hukattu SEO-mahdollisuus.
  • Kuvat ilman kontekstia → sisältö jää hakukoneelle epäselväksi.
  • Leveys/korkeus määrittämättä → CLS kasvaa ja sivu ”hyppii”.

Kuvien optimointi ja Core Web Vitals

Kuvilla on suuri vaikutus suorituskykymittareihin:

  • Largest Contentful Paint (LCP): Pienennä ja esilataa (preload) keskeinen sankarikuva.
  • Cumulative Layout Shift (CLS): Varaa tila määrittämällä width/height tai
    aspect-ratio.

Yhteenveto

Kuvien optimointi on keskeinen osa SEO:ta ja käyttökokemusta. Kun valitset oikean formaatin, pakkaat tiedostot,
nimeät ja tekstität kuvat oikein sekä huolehdit responsiivisuudesta ja lazy loadingista, nopeutat sivustoa,
parannat saavutettavuutta ja saat lisää näkyvyyttä myös kuvahausta.

Tarvitsetko apua kuvien optimointiin?

Autan määrittämään parhaat käytännöt WordPress-sivustollesi, valitsemaan työkalut ja automatisoimaan prosessin.
Ota yhteyttä, niin tehostetaan sivustosi suorituskykyä ja hakunäkyvyyttä.