# Optimoi verkkosivujen kuvat laatua menettämättä

[Canonical HTML page](https://gradiently.design/fi/guide/lighthouse-image-performance)

Kuvat ovat usein sivun raskain osa ja Lighthouse-varoitusten syy. Näin valitset pikselimitat, tiedostomuodon, responsiivisen merkinnän ja latausvihjeet ilman näkyvää laadun heikkenemistä.

## The short version

- Verkkosivujen kuvien optimointi onnistuu viemällä jokainen kuva näyttökokoonsa, tiheille näytöille noin kaksinkertaisena, alkuperäisen lataamisen sijaan.
- AVIF ja WebP tuottavat huomattavasti pienempiä tiedostoja kuin JPEG ja PNG samalla silmämääräisellä laadulla, ja kaikki nykyiset selaimet tukevat WebP:tä.
- srcset- ja sizes-attribuutit antavat selaimen ladata pienimmän kuvan, joka näyttää terävältä kyseisellä näytöllä.
- Lataa ensimmäisen näkymän alapuoliset kuvat laiskasti asetuksella loading="lazy", mutta pääkuva heti asetuksella fetchpriority="high", sillä se määrää usein Largest Contentful Paint -ajan.
- Määritä kuville aina width ja height, jotta selain varaa niille tilan eikä asettelu hypi latauksen aikana.

**Verkkosivujen kuvien optimointi** ilman näkyvää laadun heikkenemistä koostuu viidestä asiasta: vie kuva sen näyttökoon mukaisena (teräville näytöille noin kaksinkertaisena), valitse moderni muoto kuten AVIF tai WebP, pakkaa maltillisella laatuasetuksella ja vertaa silmämääräisesti, tarjoa useita kokoja `srcset`-attribuutilla ja lataa ensimmäisen näkymän alapuoliset kuvat laiskasti. Näillä toimilla poistat useimmat Lighthousen kuvavaroitukset ja yleensä pienennät sivun tiedostokokoa huomattavasti. Suoraan kamerasta tai suunnittelutyökalusta tuleva kuva on moninkertaisesti näytön tarpeita suurempi.

## Vaihe 1: vie kuva näyttökoossaan

800 pikselin levyisenä näkyvän kuvan ei tarvitse olla 4 000 pikseliä leveä. Lighthouse huomauttaa liian suurista kuvista, sillä ylimääräiset pikselit ladataan, puretaan ja hylätään. Mittaa kuvan suurin leveys asettelussasi ja vie se noin kaksinkertaisena tiheille puhelin- ja kannettavan näytöille. Yli kaksinkertainen koko näyttää harvoin terävämmältä ja kasvattaa aina tavumäärää.

| Kuva | Näyttökoko | Vientileveys |
| --- | --- | --- |
| Koko sivun levyinen pääkuva | Enintään 1920 px | 1920 px ja pienemmät versiot |
| Artikkelikuva | Noin 720 px | 1440 px |
| Kortin pikkukuva | Noin 360 px | 720 px |
| Profiilikuva | 48 px | 96 px |
| Open Graph -kuva | Sivuston ulkopuolella | Täsmälleen 1200×630 |

Tavallisia tavoitekokoja. Koko sivun levyinen pääkuva on poikkeus kaksinkertaistamiseen: 1920 px riittää useimmille näytöille, ja hyvin suurilla näytöillä kuva on hieman pehmeä kohtuullisella tiedostokoolla.

- Sivuston pääkuva 1920×1080: 1920 × 1080
- Blogin banneri 1200×600: 1200 × 600
- Linkin esikatselu 1200×630: 1200 × 630

Kolme yleistä verkkokuvakokoa mittakaavassa. Suunnittele lopulliseen kokoon, jotta kuvaa ei rajata tai skaalata viennin jälkeen.

## Vaihe 2: valitse oikea tiedostomuoto

Tiedostomuoto vaikuttaa enemmän kuin mikään pakkausliukusäädin. AVIF tuottaa yleensä pienimmän tiedoston. WebP pääsee lähelle ja toimii kaikissa nykyisissä selaimissa. JPEG ja PNG ovat edelleen turvallisia varavaihtoehtoja. [WebP ja PNG](https://gradiently.design/fi/guide/webp-images) sekä [PNG ja JPG](https://gradiently.design/fi/guide/png-vs-jpeg) vertailevat pareja tarkemmin.

| Muoto | Sopii parhaiten | Huomioita |
| --- | --- | --- |
| AVIF | Valokuvat, liukuvärit, suuret pääkuvat | Pienimmät tiedostot; hitaampi koodaus |
| WebP | Lähes kaikki | Häviöllinen ja häviötön, läpinäkyvyys, laaja tuki |
| JPEG | Valokuvat varavaihtoehtona | Ei läpinäkyvyyttä; porrastaa tasaisia liukuvärejä |
| PNG | Kuvakaappaukset, tasainen grafiikka, läpinäkyvyys | Häviötön; valokuvissa suuri |
| SVG | Logot, kuvakkeet, kuvitukset | Vektori, yksinkertaisena pieni; katso [SVG ja PNG](https://gradiently.design/fi/guide/svg-vs-png) |

Valitse sisällön, älä tottumuksen mukaan. Tasaiset liukuvärit ovat JPEG:lle vaikeimpia, joten juuri niissä WebP ja AVIF auttavat eniten.

> **Liukuvärit pakkautuvat huonosti** Tasaisissa värisiirtymissä pakkaus näkyy portaina. Lisää ennen vientiä hieman rakeisuutta [liukuvärin porrastumisen](https://gradiently.design/fi/guide/gradient-banding) ohjeen mukaan, niin kooderi voi pakata tehokkaammin ilman näkyvää haittaa. Vielä parempi on piirtää verkkosivun liukuvärit CSS:llä.

Pääkuvan liukuväri noin 70 tavulla: `linear-gradient(160deg, #0f172a 0%, #1e3a8a 50%, #0ea5e9 100%)`

CSS-muodossa tämä liukuväri vie vähemmän tilaa kuin yksi sivun rivi. 1920×1080-kuvana sama asia painaisi useita kilotavuja. Katso [CSS-liukuvärien suorituskyky](https://gradiently.design/fi/guide/css-gradient-performance).

## Vaihe 3: pakkaa ja katso

Häviöllisissä muodoissa on laatuasetus, jonka sopiva arvo riippuu kuvasta. Aloita WebP:llä arvosta 75-80 ja AVIF:llä arvosta 50-60. Vie kuva ja vertaa alkuperäiseen 100 %:n suurennuksella. Laske arvoa, kunnes näet eron, ja nosta sitten yhden askeleen verran. Kasvot, pieni teksti ja liukuvärit vaativat parempaa laatua kuin yksityiskohtaiset maisemat. [Kuvien pakkaus](https://gradiently.design/fi/guide/image-compression) selittää, mitä kooderi poistaa.

Poista samalla metatiedot, kuten kameran tiedot ja upotetut pikkukuvat. Useimmissa vientityökaluissa yksi valintaruutu riittää. Näin poistat tavuja, joita kukaan ei näe.

## Vaihe 4: responsiivisuus srcset- ja sizes-attribuuteilla

Kun olet vienyt useita leveyksiä, anna selaimen valita. `srcset` luettelee tiedostot ja niiden leveydet. `sizes` kertoo selaimelle, kuinka leveänä kuva näkyy. Selain lataa sitten pienimmän tiedoston, joka on näytölle riittävän terävä.

```html
<picture>
  <source type="image/avif"
    srcset="/img/hero-960.avif 960w, /img/hero-1440.avif 1440w, /img/hero-1920.avif 1920w"
    sizes="100vw" />
  <source type="image/webp"
    srcset="/img/hero-960.webp 960w, /img/hero-1440.webp 1440w, /img/hero-1920.webp 1920w"
    sizes="100vw" />
  <img src="/img/hero-1920.jpg" alt="Morning light over the harbour"
    width="1920" height="1080" fetchpriority="high" decoding="async" />
</picture>
```

Selain käyttää ensimmäistä tukemaansa source-elementtiä. img-elementti on varavaihtoehto sekä alt-, width- ja height-attribuuttien ja latausvihjeiden paikka.

Kuvaile palstan sisällä olevan kuvan asettelu `sizes`-attribuutissa, esimerkiksi `sizes="(min-width: 1024px) 720px, 100vw"`. Virheellinen `sizes` on yleisin syy siihen, että responsiivinen toteutus lataa edelleen suuren tiedoston.

## Vaihe 5: tärkeät latausvihjeet

```html
<!-- Below the fold: let the browser wait -->
<img src="/img/team-720.webp" alt="The team at the spring workshop"
  width="720" height="480" loading="lazy" decoding="async" />

<!-- The hero: fetch first, never lazy -->
<img src="/img/hero-1920.webp" alt="Morning light over the harbour"
  width="1920" height="1080" fetchpriority="high" />
```

Leveys ja korkeus antavat selaimen varata tilan kuvasuhteen perusteella, joten mikään ei siirry kuvien saapuessa. CSS voi silti tehdä kuvasta joustavan asetuksilla max-width: 100% ja height: auto.

### Yleiset virheet

- `loading="lazy"` pääkuvassa
- Leveys ja korkeus puuttuvat, joten sivu hypähtää
- Yksi valtava tiedosto kaikille näytöille
- JPEG tasaisesta logosta tai kuvakaappauksesta
- Liukuväritaustat tallennetaan kuvina

### Tee näin

- Pääkuva latautuu heti asetuksella `fetchpriority="high"`
- Määritä kumpikin attribuutti jokaiselle img-elementille
- `srcset` kolmella tai neljällä leveydellä
- SVG tai PNG tasaiselle grafiikalle
- CSS-liukuvärit, tarvittaessa rakeisuudella

Nämä vihjeet liittyvät suoraan Core Web Vitals -mittareihin. Pääkuva on usein Largest Contentful Paint -elementti, jonka tulisi [web.devin](https://web.dev/articles/lcp) mukaan piirtyä 2,5 sekunnissa. Puuttuvat mitat ovat tavallinen syy asettelun siirtymiin. Jos pääkuva onkin video, sama ajattelu pätee [verkkosivujen videotaustoihin](https://gradiently.design/fi/guide/video-background-website).

## Tarkistuslista ennen julkaisua

1. **Mittaa kuvan paikka** Selvitä kunkin kuvan suurin näyttöleveys asettelussasi.
2. **Vie sopivat koot** 1-2 kertaa näyttöleveys sekä pienemmät versiot puhelimille.
3. **Valitse muoto** AVIF tai WebP valokuville ja liukuväreille, SVG logoille ja PNG vain silloin, kun se on paras.
4. **Pakkaa silmämääräisesti** Laske laatua, kunnes huomaat muutoksen, ja nosta sitten yhden askeleen verran.
5. **Lisää merkinnät** `srcset`, `sizes`, `width`, `height`, `alt` sekä ensimmäisen näkymän alapuolisten kuvien laiska lataus.
6. **Testaa** Suorita Lighthouse incognito-ikkunassa ja tarkista kuva-auditoinnit sekä LCP-elementti.

Moni vaihe helpottuu, kun kuva tehdään alusta asti lopulliseen kokoonsa. Gradientlyssä suunnittelet kerran, ja Pro muuttaa työn kaikkiin kokoihin yhdellä kertaa. Sen jälkeen viet PNG-, JPG- tai SVG-tiedoston täsmällisillä mitoilla jopa 4K-koossa. Näin pääkuva, banneri ja [Open Graph -kuva](https://gradiently.design/fi/guide/open-graph-tags) ovat valmiiksi siinä koossa, jossa sivu ne näyttää.

## FAQ

### Miten optimoin verkkokuvat laatua menettämättä?

Vie kuva näyttökoossa, käytä AVIF- tai WebP-muotoa ja laske laatuasetusta vain siihen asti, että näet eron. Tarjoa useita kokoja srcset-attribuutilla. Suurin näkyvä haitta johtuu raskaasta pakkauksesta, ei koon muuttamisesta.

### Mikä kuvamuoto on paras verkkosivuille?

WebP on turvallinen moderni oletus, ja AVIF on yleensä vielä pienempi. Käytä SVG:tä logoihin ja kuvakkeisiin ja pidä JPEG tai PNG varavaihtoehtoina.

### Pitäisikö kaikki kuvat ladata laiskasti?

Ei. Lataa ensimmäisen näkymän alapuoliset kuvat laiskasti, mutta pääkuva heti, sillä sen viivyttäminen hidastaa Largest Contentful Paint -aikaa.

### Minkä kokoisia verkkosivujen kuvien pitäisi olla?

Noin kaksi kertaa niiden näyttöleveyden kokoisia, jotta ne ovat teräviä tiheillä näytöillä. Koko sivun levyinen 1920 px:n pääkuva riittää useimmille näytöille.

### Miksi Lighthouse sanoo, etteivät kuvani ole oikean kokoisia?

Tiedostossa on enemmän pikseleitä kuin sen täyttämässä tilassa sivulla. Vie pienempi versio ja käytä srcset- ja sizes-attribuutteja, jotta selain valitsee sopivan.