Kuvien pakkaaminen
Häviöllinen vai häviötön pakkaus: miten valitset?
Ymmärrä häviöllisen ja häviöttömän kuvapakkauksen erot. Tunnista laatuongelmat ja valitse valokuville, kuvakaappauksille ja grafiikalle sopiva pakkaustapa.
Mitä eroa on häviöllisellä ja häviöttömällä pakkauksella?
Pakkaus pienentää kuvatiedoston viemää tilaa. Häviötön pakkaus säilyttää kuvan pikseliarvot muuttumattomina. Häviöllinen pakkaus poistaa osan yksityiskohdista, jotta tiedosto pienenee. Sopiva tapa riippuu siitä, minkä täytyy pysyä kuvassa selkeänä.
Tavallisessa valokuvassa pieniä muutoksia voi olla vaikea huomata kuvan tarkoitetussa näyttökoossa. Tuotteen etiketti, kuvakaappaus tai kaavio voi kärsiä niistä enemmän: pehmeät reunat voivat vaikeuttaa lukemista. Mieti ennen pakkaustavan valintaa, mitkä yksityiskohdat lukijan täytyy nähdä.
Ilmaisulla ”laadun heikkenemättä” tarkoitetaan usein sitä, ettei eroa huomaa silmällä. Se on järkevä ulkonäköä koskeva tavoite, mutta eri asia kuin häviötön pakkaus. Hyvältä näyttävä häviöllinen versio poikkeaa silti pakattavaksi annetusta kuvasta. Häviötön tiedosto taas voi säilyttää huonon kuvan täsmällisesti, mutta ei tehdä epätarkasta alkuperäisestä terävää.
Häviöttömyys koskee pakkausvaihetta, ei välttämättä koko muokkausprosessia. Koon tai värien muuttaminen, värimäärän vähentäminen ja läpinäkyvyyden korvaaminen taustalla voivat muuttaa pikseleitä jo ennen pakkaamista. Näiden muutosten jälkeen tallennettu PNG säilyttää muokatun kuvan eikä kumoa tehtyjä muutoksia.
Valitse pienin tiedosto, joka palvelee käyttötarkoitustaan
- Tarvitsetko tarkat reunat tai luettavaa pientä tekstiä? Aloita häviöttömästä versiosta ja rajaa tarpeeton tila pois.
- Valmisteletko tavallista valokuvaa julkaisuun? Kokeile häviöllistä versiota ja tarkista tärkeät yksityiskohdat.
- Tarvitsetko läpinäkyvyyttä? Valitse muoto ja työkalu, jotka säilyttävät läpinäkyvyyden. Pelkkä pakkaustavan valinta ei vastaa tähän kysymykseen.
- Jatkatko vielä muokkaamista? Säilytä alkuperäinen äläkä jätä pakattua julkaisuversiota ainoaksi lähtökuvaksi.
- Pitääkö kuvan mahtua kokorajan alle? Tarkista todellinen raja, vertaa kuvamittoja ja laatua ja salli koon pienentäminen vain, kun se sopii käyttötarkoitukseen.
- Julkaisetko kuvan alustan kautta? Tarkista, mitä alusta muodostaa lataamastasi kuvasta, ennen kuin optimoit saman kuvan kahteen kertaan.
Pakkaus parantaa lukukokemusta, kun se vähentää tarpeetonta lataamista piilottamatta tärkeää tietoa. Se ei ole oikotie parempiin hakusijoituksiin, eikä pienin tiedosto ole automaattisesti paras. Koko prosessia käsittelee opas kuvatiedoston koon pienentämisestä.
Vertaa pakkaustapoja sen mukaan, mitä haluat säilyttää
| Kysymys | Häviöllinen pakkaus | Häviötön pakkaus |
|---|---|---|
| Säilyvätkö alkuperäiset pikseliarvot täsmälleen? | Eivät välttämättä; pakkaus voi muuttaa niitä | Kyllä, pakattavaksi annetussa kuvassa |
| Mihin sitä kannattaa kokeilla? | Valokuviin ja muihin kuviin, joiden ladattavaa tiedostokokoa pitää rajoittaa | Tekstiin, kaavioihin ja grafiikkaan, joissa tarkat reunat ovat tärkeitä |
| Mitä kannattaa tarkistaa? | Pintakuviot, väriliu’ut, teksti ja reunojen pakkausvirheet | Tiedostokoko ja ennen pakkaamista tehdyt muutokset |
| Säilyykö muokattava projektitiedosto? | Ei | Ei välttämättä; yhdeksi kuvaksi yhdistetty tiedosto ei säilytä tasoja |
| Korjaako se aiemmin heikentyneen kuvan? | Ei | Ei |
Nämä ovat lähtökohtia, eivät sääntöjä, joiden mukaan jokainen valokuva pitäisi pakata häviöllisesti tai jokainen grafiikka tallentaa PNG-muodossa. Kokeile juuri käsittelemääsi kuvaa. Yksinkertainen grafiikka voi olla jo valmiiksi riittävän pieni häviöttömänä. Suuri kuvakaappaus voi puolestaan tarvita tiukemman rajauksen ennen kuin muodon vaihtamisesta on hyötyä.
Älä tee päätöstä pelkän tiedostopäätteen perusteella. Kuvamuoto voi tukea useita pakkaustapoja, joista sovellus tarjoaa vain osan. Tallennusasetukset ovat yhtä tärkeitä kuin tiedostotyyppi.

Mitä JPG, PNG, WebP ja AVIF tarkoittavat valinnan kannalta?
Tavallinen JPG-tallennus käyttää häviöllistä pakkausta. PNG käyttää häviötöntä pakkausta. WebP tukee kumpaakin tapaa, ja myös AVIF tarjoaa erilaisia pakkausvaihtoehtoja. Tämä ei tarkoita, että jokainen muunnin tarjoaisi kaikki vaihtoehdot tai että laatusäätimen suurin arvo valitsisi häviöttömän pakkauksen.
Kuvamuotojen ominaisuuksia käsittelee MDN:n kuvamuotojen vertailu. Googlen WebP-pakkauksen dokumentaatio selittää muodon erilliset häviölliset ja häviöttömät pakkaustavat. Käytännön valintaan auttaa opas verkkosivulle sopivasta kuvamuodosta.
Pixilon JPG–WebP- ja PNG–WebP-työkalut käyttävät laatuasetusta häviölliseen tallennukseen. Niissä ei ole erillistä häviötöntä WebP-tilaa. AVIF-muunnin käyttää myös kiinteää häviöllistä asetusta. Käytä näitä työkaluja, kun tavoitteena on hyvältä näyttävä julkaisuversio, ei pikseliarvojen täsmällinen säilyttäminen.
Pixilon WebP–PNG-muunnin tallentaa kuvan PNG-muodossa ilman uutta häviöllistä pakkausvaihetta ja säilyttää mitat tuettujen kokorajojen sisällä. Jos WebP-kuva oli jo häviöllinen, muunnoksen lähtökohtana on siitä avattu kuva. PNG ei palauta aiemmin menetettyjä yksityiskohtia, ja uusi tiedosto voi olla suurempi.
Miltä häviöllisen pakkauksen aiheuttamat virheet näyttävät?
Avaa tallennettu kuva koossa, jossa sitä käytetään, ja tutki sitten tärkeät yksityiskohdat. Pelkän pikkukuvan katsominen voi peittää lukukelvottoman etiketin. Pelkän voimakkaasti suurennetun nurkan tutkiminen taas voi saada hylkäämään kuvan, joka toimii hyvin tarkoitetussa koossa. Molemmille tarkistuksille on paikkansa.
- Pieni teksti: kirjainten reunat voivat sumentua, saada vaalean kehän tai muuttua väriltään epätasaisiksi. Tarkista myös välimerkit ja ohuet viivat, älä pelkkää otsikkoa.
- Hienot pintakuviot: hiukset, kangas tai ruoho voivat sulautua pehmeiksi alueiksi. Varmista tuotekuvissa, että materiaalin yksityiskohdat näyttävät edelleen uskottavilta.
- Tasaiset väriliu’ut: taivaalle tai studiotaustaan voi ilmestyä näkyviä portaita tai laikkuja. Tarkista sekä vaaleat että tummat siirtymät.
- Selkeät ääriviivat: tumman kohteen reunoille voi syntyä kohinaa vaaleaa taustaa vasten. Tarkista myös kuvan ulkonäkö sivun todellisella taustalla.
- Varjojen yksityiskohdat: tummat alueet voivat palikoitua tai menettää sävyeroja, jotka näkyivät alkuperäisessä.
Jos huomaat ongelman, vertaa kuvaa alkuperäiseen ennen kuin pidät tallennusta syyllisenä. Virhe voi tulla kamerasta, aiemmasta muokkauksesta tai liian suureksi venytetystä kuvasta. Pakkausasetukset eivät korjaa näitä syitä. Aloita parhaasta saatavilla olevasta alkuperäisestä ja muuta yhtä asetusta kerrallaan.
Laatuasetus ei kerro säilyneiden yksityiskohtien prosenttiosuutta
80 %:iin asetettu liukusäädin ei takaa, että 80 % yksityiskohdista säilyy. Se ei myöskään tarkoita tiedostokoon pienenevän 80 %. Luku ohjaa pakkausta. Eri kuvamuodot, toteutukset ja kuvat reagoivat asetukseen eri tavoin, joten samat luvut eri työkaluissa eivät takaa samaa laatua.
Käytä lukua toistettaviin kokeiluihin yhden työkalun sisällä. Tallenna versio, tarkista se ja säädä tarvittaessa. Älä valitse erittäin matalaa laatua vain siksi, että se sopi edelliseen valokuvaan. Tekstiä tai hienoa kuviota sisältävä kuva voi kärsiä samalla asetuksella paljon enemmän.
Reilussa kuvamuotojen vertailussa tavoitellaan ensin suunnilleen yhtä hyvää ulkonäköä ja verrataan sitten tiedostokokoja. Pidä kuvamitat samoina pakkausta kokeillessasi. Jos yksi tiedosto on pienempi myös vähäisemmän pikselimäärän vuoksi, et voi päätellä koko säästön johtuvan kuvamuodosta.
Pixilon JPG–WebP-, PNG–WebP-, PNG–JPG- ja WebP–JPG-muuntimet pienentävät yli 4000 pikselin levyiset tai korkuiset kuvat säilyttäen kuvasuhteen. Tarkista tallennetut mitat, jos alkuperäinen on tätä suurempi. Tämä on erityisen tärkeää, kun vertaat tulosta toisella sovelluksella tehtyyn versioon.
Käytännön testi valokuvalle ja kuvakaappaukselle
Oletetaan, että valmistelet valokuvaa verkkosivulle ja kuvakaappausta ohjeeseen. Seuraavat vaiheet ovat testisuunnitelma, eivät mitattu vertailu tai lupaus tiedostokoista.
- Säilytä alkuperäiset. Tee kaikki vertailuversiot samasta alkuperäisestä kuvasta, jotta et vahingossa pakkaa yhtä versiota uudelleen toisen pohjalta.
- Valitse sivulla näkyvä kuvakoko. Rajaa ensin tarpeeton tila pois. Käytä koonmuutostyökalua, jos tiedostossa on selvästi enemmän pikseleitä kuin käyttökohde tarvitsee.
- Testaa valokuvan julkaisuversio. Kokeile sopivaa JPG- tai WebP-tallennusta. Tarkista kohde, pintakuviot ja tausta tarkoitetussa näyttökoossa.
- Arvioi kuvakaappauksen luettavuutta. Säilytä PNG-versio vertailua varten ja kokeile pienempää häviöllistä versiota. Lue pienet tekstit ja tarkista käyttöliittymän ohuet viivat.
- Kirjaa tulos. Kirjaa mitat, tiedostomuoto ja koko sekä syyt, joiden vuoksi valittu versio sopii tarkoitukseen. Pienempi mutta lukukelvoton kuvakaappaus ei ole onnistunut tulos.
- Tarkista julkaisun jälkeen. Julkaisujärjestelmä voi muodostaa vielä uuden version. Tarkista kävijöille tarjottava tiedosto, älä oleta sen olevan sama kuin oma tallennuksesi.
Jos kuvakaappaus on edelleen liian suuri, rajaa epäolennainen sisältö pois sen sijaan, että heikennät laatua lukukelvottomaksi asti. Jos valokuvan yksityiskohdat eivät riitä, nosta laatua tai harkitse sen näyttökokoa uudelleen. Eri ongelmat vaativat eri ratkaisuja.
Jos lataukselle on tarkka kokoraja, kokeile tiedostokokoon pakkaavaa työkalua. Pieni kokoraja voi vaatia kompromisseja, eikä jokainen kuva saavuta sitä riittävän hyvällä laadulla ilman koon pienentämistä. Tiedostokokorajan opas auttaa arvioimaan vaihtoehtoja.
Vältä toistuvaa häviöllistä tallentamista ja harhaanjohtavia muunnoksia
Kun lataat pakatun JPG-kuvan, muokkaat sitä, tallennat sen uudelleen JPG-muodossa ja muunnat vielä toiseen muotoon, syntyy tallennusten ketju. Jokainen häviöllinen vaihe voi muuttaa kuvaa lisää. Ensimmäinen muutos voi olla huomaamaton, mutta pienet virheet voivat voimistua ketjun jatkuessa.
Säilytä alkuperäinen tiedosto ja tee uudet julkaisuversiot siitä. Jos työskentelet tasojen tai muokattavan tekstin kanssa, säilytä myös projektitiedosto. Yhdeksi kuvaksi yhdistetty PNG ei korvaa muokattavaa projektia. Nimeä julkaisuversiot erikseen, jotta pienin pakattu kopio ei vahingossa päädy seuraavan muokkauksen lähtökuvaksi.
JPG-kuvan muuntaminen PNG-muotoon voi olla tarpeen, jos seuraava työvaihe vaatii PNG:tä. Muunnos ei kuitenkaan palauta alkuperäistä valokuvaa. Häviötön pakkaus ei myöskään yksin takaa EXIF-tietojen, väriprofiilien, animaatioiden tai muiden tiedoston ominaisuuksien säilymistä. Se riippuu koko käsittelyprosessista.
Monet Pixilon työkalut muodostavat tuetuista kuvista uusia versioita selaimessa. Ne on tarkoitettu julkaisuun, eivät alkuperäisen tiedoston kaikkien ominaisuuksien arkistointiin. Säilytä alkuperäinen, jos sen metatiedoilla tai muilla ominaisuuksilla on merkitystä.
Usein kysytyt kysymykset
Onko häviötön pakkaus aina parempi?
Se on parempi, kun alkuperäiset pikseliarvot täytyy säilyttää täsmälleen. Suuri häviötön valokuva voi kuitenkin olla tarpeettoman raskas, jos pienempi häviöllinen versio näyttää käyttökohteessaan hyvältä. Valitse kuvan tarkoituksen, älä pelkän termin perusteella.
Onko WebP aina häviöllinen?
Ei. WebP tukee kumpaakin pakkaustapaa. Tarkista työkalun käyttämä tila: WebP-tiedostopääte tai suurin laatuasetus ei osoita, että tallennus olisi häviötön.
Tekeekö laatuasetus 100 JPG-kuvasta häviöttömän?
Ei. Tavallisen JPG-tallennuksen suurin laatuasetus ei muuta pakkausta häviöttömäksi. Se voi myös kasvattaa tiedostoa huomattavasti ilman näkyvää hyötyä.
Miksi PNG-kuvani on suurempi kuin alkuperäinen JPG?
PNG tallentaa avatun kuvan ilman uutta häviöllistä pakkausvaihetta. Valokuva voi tarvita näin enemmän tilaa. Suurempi tiedostokoko ei tarkoita, että menetetyt yksityiskohdat olisivat palautuneet.
Voinko pakata kuvan muuttamatta sen mittoja?
Kyllä, kuvamuodosta ja työkalusta riippuen. Pakkaaminen ja kuvakoon muuttaminen ovat eri toimenpiteitä. Tarkista tallennetut mitat ja työkalun mahdolliset automaattiset kokorajat. Samat mitat eivät yksin todista pikseliarvojen säilyneen muuttumattomina.
Testaa julkaisuversio ja säilytä alkuperäinen
Valitse sopivat kuvamitat, vertaa tallennusta alkuperäiseen ja säilytä versio, jossa lukijan tarvitsema tieto näkyy.
Vertaa JPG- ja WebP-kuviaPienennä kuva kokorajan alle →