Kuvien optimointi verkkosivuille: WebP, oikeat koot ja ilmaiset työkalut

Kun rakennamme verkkosivuja pienyrityksille, yksi ongelma toistuu lähes joka projektissa: kuvat ovat aivan liian suuria. Suoraan puhelimesta ladattu 4 megatavun valokuva voi yksinään hidastaa sivun latautumista sekunneilla — ja hidas sivu karkottaa sekä asiakkaat että Googlen.

Hyvä uutinen: kuvien optimointi ei vaadi Photoshopia eikä teknistä osaamista. Tässä oppaassa käymme läpi kolme asiaa, jotka ratkaisevat suurimman osan ongelmasta: formaatti, koko ja pakkaus.

Miksi kuvien koolla on niin suuri merkitys?

Google mittaa sivujen nopeutta Core Web Vitals -mittareilla, joista tärkein — LCP (Largest Contentful Paint) — kertoo, kuinka nopeasti sivun suurin elementti latautuu. Useimmilla sivuilla se suurin elementti on kuva.

Käytännössä:

• Yli 2,5 sekunnin LCP heikentää hakukonesijoituksia
• Jokainen latauksen lisäsekunti pudottaa konversiota tutkitusti useita prosentteja
• Mobiiliverkossa raskaat kuvat tuntuvat vielä pahemmin kuin toimiston nopealla yhteydellä

1. Valitse oikea kuvaformaatti

Nyrkkisäännöt vuonna 2026:

Formaatti	Milloin käytät	Huomioitavaa
WebP	Lähes kaikki verkkosivun kuvat	25–35 % pienempi kuin JPG samalla laadulla
JPG	Valokuvat, kun WebP ei käy (esim. vanhat järjestelmät)	Ei läpinäkyvyyttä
PNG	Logot ja grafiikat, joissa läpinäkyvyys	Suuri tiedostokoko valokuville — vältä
AVIF	Edelläkävijöille — pienin tiedostokoko	Kaikki alustat eivät vielä tue

Suurin yksittäinen parannus useimmille sivuille on siirtyä JPG- ja PNG-kuvista WebP-muotoon. Muunnoksen voi tehdä selaimessa ilmaiseksi esimerkiksi PNG–WebP-muuntimella tai JPG–WebP-muuntimella — ilman rekisteröitymistä, ja useita kuvia voi muuntaa kerralla.

2. Käytä oikeita mittoja

Toinen yleinen virhe: sivulle ladataan 4000 pikseliä leveä kuva, joka näytetään 800 pikselin levyisenä. Selain lataa silti koko jättikuvan.

Hyviä perusmittoja:

Käyttö	Suositeltu leveys
Hero-/bannerikuva	1600–1920 px
Sisältökuva artikkelissa	800–1200 px
Tuotekuva verkkokaupassa	1000–1600 px
Pikkukuva (thumbnail)	400 px

Kuvan mitat voi muuttaa ilman ohjelmien asentamista — esimerkiksi tällä ilmaisella työkalulla voit muuttaa kuvan kokoa netissä. Se säilyttää kuvasuhteen automaattisesti eikä koskaan suurenna kuvaa, joten laatu ei kärsi.

3. Pakkaa — mutta älä liikaa

WebP- ja JPG-muunnoksissa laatuasetus 80–88 on lähes aina oikea valinta: tiedostokoko putoaa murto-osaan, mutta silmä ei eroa huomaa. Tavoitteena kannattaa pitää, että:

• Hero-kuva on alle 200 kt
• Tavallinen sisältökuva alle 100 kt
• Pikkukuvat alle 30 kt

Muistilista ennen julkaisua

1. Muunna WebP-muotoon — suurin yksittäinen säästö
2. Mitoita kuva näyttökokoon — älä anna selaimen kutistaa jättikuvia
3. Nimeä tiedosto kuvaavasti (toimisto-oulu.webp, ei IMG_4823.jpg) — pieni hakukonehyöty
4. Lisää alt-teksti — saavutettavuus ja kuvahaku
5. Käytä laiskaa latausta (loading="lazy") sivun alaosan kuville

Kaikki tämän listan kuvatyökalut löytyvät ilmaiseksi yhdestä paikasta: Listiq AI:n ilmaiset kuvatyökalut — muuntimet, koon muuttaja ja taustanpoisto, ilman rekisteröitymistä tai vesileimoja. (Listiq AI on iibsofyn kehittämä tuote, joten työkalujen toimintaan voi luottaa — käytämme niitä itsekin asiakasprojekteissa.)

Entä jos koko sivusto on hidas?

Kuvien optimointi on nopein yksittäinen parannus, mutta jos sivusto on muutenkin raskas tai vanhentunut, isompi remontti voi maksaa itsensä takaisin nopeasti. Me rakennamme kustannustehokkaita verkkosivuja pienyrityksille — nopeus ja hakukonenäkyvyys sisäänrakennettuna alusta asti.

Kysy rohkeasti lisää ottamalla yhteyttä — katsotaan yhdessä, miten sivustosi saadaan lentämään.