# Kuvien pakkaus liukuvärejä pilaamatta

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

Valokuvat kestävät voimakasta pakkausta. Liukuvärit eivät. Näin pehmeä värisiirtymä muuttuu raidoiksi ja näin pidät sen tasaisena pienessä tiedostossa.

## The short version

- Kuvien pakkaus pienentää tiedostoja joko häviöttömästi tallentamalla samat pikselit tehokkaammin tai häviöllisesti poistamalla yksityiskohtia.
- Tasaiset liukuvärit kärsivät häviöllisestä pakkauksesta eniten, sillä vierekkäisiä värejä yhdistyy näkyviksi juoviksi ja lohkoiksi.
- Tummat, hienovaraiset liukuvärit juovittuvat ensin, koska 8-bittisessä kuvassa kahden läheisen tumman värin välissä on vain vähän erillisiä arvoja.
- Kevyt rae tai dithering peittää juovittumisen paremmin kuin mikään laatuasetus, sillä se hajottaa väriporrastukset.
- Vie liukuvärigrafiikka PNG:nä tai häviöttömänä WebP:nä tai käytä JPG-laatua 90 tai enemmän ja poista värikanavien alinäytteistys käytöstä.

**Kuvien pakkaus** pienentää tiedostoa kahdella tavalla. Häviötön pakkaus tallentaa täsmälleen samat pikselit tehokkaammin, kuten asiakirjan pakkaaminen zip-tiedostoon. Häviöllinen pakkaus poistaa yksityiskohtia, joita se arvioi sinun tuskin huomaavan. Valokuvien runsas tekstuuri peittää hävikin hyvin. Tasainen liukuväri ei peitä mitään: liian voimakkaasti pakattu pehmeä värisiirtymä hajoaa raidoiksi, läiskiksi ja lohkoiksi. Korjaus on oikean tiedostomuodon, laatuasetuksen ja pienen rakeen yhdistelmä.

## Miksi liukuväri hajoaa pakkauksessa

Tavallinen kuva tallentaa punaiselle, vihreälle ja siniselle kullekin 256 tasoa. Se kuulostaa paljolta, kunnes tarkastelet hienovaraista tummaa liukuväriä. Kun 1920 pikselin levyinen pääkuva liukuu väristä `#14101f` väriin `#2a2147`, punainen kanava nousee vain 22 tasoa. Jokainen taso ulottuu noin 87 pikselin matkalle. Näkyvä juovittuminen on siis lähellä jo ennen pakkausta.

Värisiirtymä, jossa on vähän tasoja: `linear-gradient(90deg, #14101f 0%, #2a2147 100%)`

Läheiset tummat värit laajalla alueella: klassinen juovittumisriski. Hyvällä näytöllä voit jo nähdä tässä haaleita pystysuuntaisia portaita.

Häviöllinen pakkaus yksinkertaistaa kuvaa pienissä lohkoissa ja yhdistää lähes samat värit. Valokuvassa vierekkäiset pikselit ovat harvoin samoja, joten muutos jää pieneksi. Liukuvärissä lähes kaikki naapuripikselit muistuttavat toisiaan, joten kokonaiset värialueet sulautuvat yhdeksi. Tästä syntyy [liukuvärin juovittuminen](https://gradiently.design/fi/guide/gradient-banding), joka näkyy eniten tummissa ja pastellisissa värisiirtymissä.

### Juovittuu helposti

- Tummat siirtymät läheisten värien välillä
- Vaaleat pastellit laajalla alueella
- Täysin puhtaat digitaaliset pinnat
- Leveät muodot, kuten 1920×1080-pääkuva

### Kestää hyvin

- Kirkkaat liukuvärit, joiden väripisteet eroavat selvästi
- Liukuvärit, joissa on raetta tai tekstuuria
- Yksityiskohtaiset valokuvat ja kuvitukset
- Pienet kuvat, joissa värialueet ovat lyhyitä

## Merkitykselliset laatuasetukset

Jokaisessa tiedostomuodossa on yksi tärkein säädin ja muutama piilotettu. Nämä lähtöarvot ovat varovaisia liukuvärejä ja tekstiä sisältävälle grafiikalle. Valokuvissa voit yleensä käyttää pienempiä arvoja. Arvioi aina hyvällä näytöllä 100%:n suurennuksella, älä esikatselukuvasta.

| Muoto | Liukuvärigrafiikan asetus | Valokuvan asetus | Huomautukset |
| --- | --- | --- | --- |
| PNG | Häviötön, täydet värit | Harvoin paras valinta | Älä vähennä liukuväriä 256 väriin |
| JPG | Laatu 90-95, alinäytteistys pois (4:4:4) | Laatu 80-85 | Älä muokkaa ja tallenna JPG:tä toistuvasti |
| WebP | Häviötön tai häviöllinen laadulla 85-90 | Häviöllinen laadulla 75-80 | Paras oletus omalle verkkosivulle |
| AVIF | Häviöllinen korkealla laadulla, testaa huolellisesti | Keskitasoinen laatu | Pienimmät tiedostot, hitaampi koodaus |

Laatuluvut eivät ole vertailukelpoisia eri tiedostomuotojen tai edes työkalujen välillä. Käytä niitä testauksen lähtökohtina.

### Värikanavien alinäytteistys

Useimmat JPG-koodaajat tallentavat värin puolikkaalla tarkkuudella kirkkauteen nähden. Merkintä on 4:2:0. Silmä tuskin huomaa tätä valokuvissa, mutta värillisten kirjainten ja kylläisten liukuvärien reunat pehmenevät ja leviävät. Monet työkalut piilottavat asetuksen lisävalintoihin. Sen poistaminen käytöstä (4:4:4) kasvattaa kokoa hieman ja pitää värireunat terävinä.

### PNG:n värien vähentäminen

PNG-optimoijat pienentävät tiedostoja usein vähentämällä paletin 256 väriin tai pienemmäksi. Se sopii yksivärisille logoille erinomaisesti, mutta tuhansia sävyjä tarvitseville liukuväreille huonosti. Jos pakattu PNG alkaa yhtäkkiä juovittua, syynä on lähes aina värien vähentäminen.

## Rae on paras korjaus juovittumiseen

Hienon kohinakerroksen lisääminen voi tuntua nurinkuriselta, mutta se on varmin korjaus. Rae hajottaa pikseleitä hieman vaaleammiksi ja tummemmiksi, jolloin silmä yhdistää portaat tasaiseksi siirtymäksi. Pakkaajalla on säilytettävää tekstuuria tasaisten yhdistettävien alueiden sijaan. Rae saa digitaalisen liukuvärin myös tuntumaan pinnalta. [Rakeiset liukuvärit](https://gradiently.design/fi/guide/grainy-gradients) näyttää sopivan määrän.

Leveä tumma verkkosivun pääkuva, jossa tasainen liukuväri ja lyhyt otsikko havainnollistavat juovittumisriskiä

Puhdas tumma liukuväri koossa 1920×1080 juovittuu pakkauksessa kaikkein todennäköisimmin.

Leveä verkkosivun pääkuva, jossa teksturoitu rakeinen liukuväri on saman otsikon taustalla

Kun pinnassa on hienoa raetta, samanlainen liukuväri kestää pakkauksen ja näyttää materiaalilta.

Verkossa voit lisätä rakeen CSS:llä tai SVG:llä sen sijaan, että tallennat sen suureen kuvaan. Näin ladattava tiedosto pysyy pienenä. Katso [CSS-kohinatekstuuri](https://gradiently.design/fi/guide/css-noise-texture). Gradientlyn Markeissa rae kuuluu materiaaliin, joten niillä tehty työ sisältää jo tekstuurin, joka auttaa kestämään alustan uudelleenpakkauksen.

## Menetelmä minkä tahansa kuvan pakkaamiseen

1. **Muuta koko näyttökokoon** Suurin säästö tulee tarpeettomien pikselien poistamisesta. Vie 1080×1350-Instagram-julkaisu koossa 1080×1350, älä 4000 pikseliä leveänä.
2. **Valitse muoto sisällön mukaan** Teksti, logot ja liukuvärit: PNG tai häviötön WebP. Valokuvat: JPG, WebP tai AVIF. [PNG vai JPG](https://gradiently.design/fi/guide/png-vs-jpeg) ja [WebP verrattuna PNG:hen ja JPG:hen](https://gradiently.design/fi/guide/webp-images) syventävät aihetta.
3. **Aloita korkeasta laadusta ja laske sitä** Aloita arvosta 90, vähennä viisi kerrallaan ja vertaa 100%:n suurennuksella. Pysähdy yhtä askelta ennen kuin huomaat muutoksen tummimmassa liukuvärissä.
4. **Pakkaa kerran alkuperäisestä** Säilytä pakkaamaton alkuperäistiedosto. Tee jokainen uusi vienti siitä, älä aiemmasta JPG:stä.
5. **Tarkista lopullinen tiedosto käyttöpaikassaan** Lataa testijulkaisu tai avaa sivu puhelimella. Alustat ja CDN-palvelut voivat pakata kuvan uudelleen.

## Pakkaustyökalut, joihin voit luottaa

Googlen Squoosh-verkkosovelluksessa voit verrata muotoja ja asetuksia rinnakkain liukusäätimellä. Se on nopein tapa oppia kunkin säätimen vaikutus. Kokonaisten kuvakansioiden kohdalla komentorivikoodaajat tekevät saman eräajona.

```bash
# JPG at quality 92 with full colour resolution (ImageMagick)
magick hero.png -quality 92 -sampling-factor 4:4:4 hero.jpg

# Lossless WebP for a gradient graphic
cwebp -lossless hero.png -o hero.webp

# Lossy WebP for a photo
cwebp -q 78 photo.png -o photo.webp
```

Suorita nämä pakkaamattomalle alkuperäistiedostolle, älä tiedostolle, joka on jo pakattu häviöllisesti.

Jos liukuväri on verkkosivun tausta, kevyin kuva on kuvaton: CSS-liukuväri ei vaadi lainkaan kuvatiedoston lataamista eikä juovitu pakkauksessa. Leveissä tummissa siirtymissä voi silti näkyä 8-bittisiä portaita. [CSS-taustat](https://gradiently.design/fi/guide/css-background-image) näyttää liukuvärien kerrostamisen pienen raetekstuurin kanssa, ja [verkkokuvien optimointi](https://gradiently.design/fi/guide/lighthouse-image-performance) kertoo, mitä Lighthouse tarkistaa.

## FAQ

### Miten pakkaan kuvia heikentämättä laatua?

Muuta kuva siihen kokoon, jossa se näytetään. Käytä grafiikkaan häviötöntä PNG:tä tai WebP:tä ja valokuviin häviöllistä JPG:tä, WebP:tä tai AVIF:iä korkealla laadulla. Vertaa 100%:n suurennuksella ennen asetuksen pienentämistä.

### Miksi pakkaus juovittaa liukuvärejä?

Häviöllinen pakkaus yhdistää lähes samat värit. Tasainen liukuväri koostuu lähes kokonaan samankaltaisista naapuripikseleistä, joten värialueet kutistuvat näkyviksi raidoiksi.

### Mikä on paras JPEG-laatuasetus?

Noin 80-85 valokuville ja 90-95 tekstiä tai liukuvärejä sisältävälle grafiikalle. Laatuarvot vaihtelevat työkaluittain, joten tarkista tulos 100%:n suurennuksella.

### Vähentääkö rakeen lisääminen todella juovittumista?

Kyllä. Hieno rae hajottaa värien väliset portaat niin, että silmä näkee tasaisen siirtymän. Se myös antaa pakkaajalle säilytettävää tekstuuria tasaisten yhdistettävien alueiden sijaan.

### Kannattaako PNG-tiedostoja pakata?

Häviötön PNG-optimointi on aina turvallista. Älä vähennä liukuväri-PNG:tä 256 värin palettiin, sillä se aiheuttaa juovittumista.