Kuvien pakkaus liukuvärejä pilaamatta

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.

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, joka näkyy eniten tummissa ja pastellisissa värisiirtymissä.

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.

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 näyttää sopivan määrän.

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. 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. 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. 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 ja WebP verrattuna PNG:hen ja JPG:hen syventävät aihetta.

3. 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. 4

   Pakkaa kerran alkuperäisestä

   Säilytä pakkaamaton alkuperäistiedosto. Tee jokainen uusi vienti siitä, älä aiemmasta JPG:stä.

5. 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.

# 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

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 näyttää liukuvärien kerrostamisen pienen raetekstuurin kanssa, ja verkkokuvien optimointi kertoo, mitä Lighthouse tarkistaa.