Kuvaoptimointi verkkosivuston nopeuden parantamiseksi: täydellinen opas

Kuvat muodostavat noin 50 % sivun kokonaispainosta. Niiden optimointi on nopein suorituskykyvoitto, jonka voit saavuttaa.

---

Miksi se on tärkeää

• 53 % mobiilikäyttäjistä poistuu sivulta 3 sekunnin jälkeen (Google)
• 1 sekunnin viive = 7 % vähemmän konversioita
• LCP ja CLS (Core Web Vitals) vaikuttavat Googlen hakusijoituksiin

---

Vaihe 1: Valitse oikea formaatti

Käytä WebP:tä valokuville (25–35 % pienempi kuin JPEG), PNG:tä läpinäkyvyydelle ja logoille, SVG:tä ikoneille.

---

Vaihe 2: Pakkaa

TinyImg — selainkäyttöinen, välitön ja yksityinen.

---

Vaihe 3: Responsiiviset kuvat

<img src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Alt text" width="800" height="600" />

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Alt text" width="800" height="600" />
</picture>

---

Vaihe 4: Lazy loading

<img src="image.webp" loading="lazy" alt="Kuvaus" width="800" height="600" />

Älä käytä lazy loadingia sivun yläpuolella näkyville kuville. Aseta aina leveys ja korkeus.

---

Vaihe 5: Mitat

<img src="photo.webp" alt="Kuva" width="800" height="600" />

img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }

---

Vaihe 6: CDN

Cloudflare (ilmainen), Cloudinary, imgix tai Vercel Next.js:lle.

---

Vaihe 7: Mittaa tulokset

LCP-tavoite: alle 2,5 s. CLS-tavoite: alle 0,1. Kuvat yhteensä: alle 500 KB. Työkalut: PageSpeed Insights, Lighthouse, WebPageTest.

---

Tarkistuslista

• WebP-formaatti
• Pakattu TinyImg:llä
• srcset + sizes
• Lazy load (vain sivun alapuolella)
• Leveys + korkeus kaikissa kuvissa
• CDN
• PageSpeed-tarkistus

TinyImg — aloita täältä.