JPG vai PNG: paras valinta kuvakaappauksille, tekstille ja valokuville

JPG vai PNG: valitse kuvan sisällön perusteella

JPG ja JPEG tarkoittavat samaa kuvamuotoa. Tavallinen JPEG-tallennus pakkaa valokuvaa häviöllisesti eli pienentää tiedostoa poistamalla tietoa. PNG käyttää häviötöntä pakkausta ja tukee läpinäkyvyyttä. Siksi PNG sopii lähtökohdaksi teräväreunaiselle sisällölle, kun taas JPG on usein käytännöllinen valokuvissa.

Häviötön tallennus ei tarkoita, että jokainen PNG-muunnos säilyttäisi lähteen kaikki ominaisuudet. Koon muuttaminen, värinkäsittely tai aiempi häviöllinen tallennus on voinut muuttaa pikseleitä. PNG-tallennus ei palauta kadonneita yksityiskohtia. PNG-määrittely kuvaa muodon häviötöntä pakkausta ja läpinäkyvyyttä.

Miksi PNG sopii yleensä kuvakaappauksiin ja tekstiin?

Kuvakaappauksessa on usein toistuvia värejä, ohuita viivoja ja jyrkkiä rajoja kirjainten sekä taustan välillä. Tärkeät yksityiskohdat voivat olla pieniä: kaavion desimaalipilkku, virheilmoitus tai painikkeen ohut reunus. Häviöllinen JPEG-tallennus voi pehmentää reunoja tai lisätä niiden ympärille näkyviä virheitä.

Tukipyynnössä tai vaiheittaisessa ohjeessa tekstin luettavuus on pientä kokohyötyä tärkeämpää. Ota kuvakaappaus alkuperäisellä tarkkuudella, rajaa turhat alueet pois ja tallenna PNG-kopio. Älä pienennä koko työpöytää niin paljon, ettei tekstiä voi enää lukea. Tiukempi rajaus voi vähentää kuvan kokoa säilyttäen olennaisen alueen alkuperäisissä mitoissa.

PNG on lähtökohta, ei lupaus pienestä kuvakaappauksesta. Valokuvasta, pelistä tai yksityiskohtaisesta kartasta otettu kuvakaappaus voi olla suuri. Kokeile JPG:tä, jos tarvitset pienemmän tiedoston, mutta arvioi myös pienintä tekstiä. Jos teksti on olennainen, säilytä PNG tai jaa sisältö selkeäksi kuvakaappaukseksi ja erilliseksi valokuvaksi.

Vertaa oikeita vientitiedostoja ennen kuin oletat JPG:n olevan pienempi. Tämä peittävä tekstiä ja viivoja sisältävä grafiikka on aluksi 109,2 kt. Pixilon etusivun pakkaimella syntyy 20,6 kt:n PNG, jonka puretut pikselit ja 960 × 640 pikselin mitat säilyvät. PNG–JPG-muunnin tuotti samasta alkuperäisestä 47,0 kt:n JPG:n laadulla 80. JPG on tässä noin 128 % optimoitua PNG:tä suurempi; se näyttää pienemmältä vain optimoimattomaan lähteeseen verrattuna.

Liikuta rajaa kirjainten ja värillisten reunojen yli. Tarkkaile pehmenneitä viivoja, himmeitä reunuksia ja yhden pikselin viivojen muutoksia. Alun yksityiskohtanäkymä suurentaa pikselit kaksinkertaisiksi; vaihda koko kuvaan arvioidaksesi luettavuutta tavallisessa näyttökoossa. Laatu 80 on pakkaajan asetus, ei ”80 % alkuperäisistä yksityiskohdista”. Tämä on yksi grafiikka, ei ennuste kaikille kuvakaappauksille tai valokuville.

Optimoitu PNGPixilon JPG

Miksi JPG on usein järkevämpi valokuville?

Valokuvissa on paljon pieniä värin ja kirkkauden vaihteluita. Kaiken pikselitiedon säilyttäminen PNG:ssä voi kasvattaa tiedostoa ilman näkyvää hyötyä tavallisessa jakamisessa. Huolella valittu JPG-tallennus voi pienentää tiedostoa paljon ja näyttää silti hyvältä siinä koossa, jossa lukija sen näkee.

Tutki kasvot, hiukset, lehdet ja kankaat ennen kuin lasket laatua lisää. Tarkista myös tasainen taivas ja tummat taustat. Pienoiskuvana hyväksyttävä versio voi näyttää huonolta koko sivun levyisessä galleriassa. Tee kuva käyttökohdetta varten sen sijaan, että valitsisit yhden laatuasetuksen kaikille kuville.

Verkkosivulla JPG ja PNG eivät ole ainoat vaihtoehdot. Voit kokeilla WebP:tä tai AVIF-muotoa ja säilyttää sopivan varakuvan. AVIF vai WebP -opas auttaa vertailussa. Jos vastaanottaja tarvitsee nimenomaan JPEG:n, yhteensopivuus voi olla pienintä mahdollista tiedostoa tärkeämpää.

Alla oleva vuorikuva on käytännön vastaesimerkki yllä olevalle grafiikalle. Alkuperäinen JPG on 413,1 kt. Pixilon JPG–PNG-muunnin tuotti siitä 4 113,8 kt:n PNG:n. Etusivun häviötön optimointi pienensi PNG:n 2 860,5 kilotavuun purettuja pikseleitä muuttamatta. Molempien mitat ovat 1920 × 1440. Optimoitukin PNG on noin 6,9 kertaa JPG:n kokoinen palauttamatta alkuperäisessä JPEG-pakkauksessa kadonneita yksityiskohtia.

Mitä läpinäkyvälle taustalle tapahtuu?

PNG voi säilyttää läpinäkyvät alueet, tavallinen JPG ei. Läpinäkyvän logon tai tuotekuvan muuttaminen JPG:ksi vaatii yhtenäisen taustavärin. Valitse tausta ennen muunnosta, etenkin jos kuva tulee tummalle sivulle tai värilliselle dialle.

Tee valinta tarkoituksella taustavärityökalulla. Tarkista sen jälkeen kohteen reunat. Valkoista taustaa vasten valmistellussa kuvassa voi olla vaaleita reunapikseleitä, jotka erottuvat mustalla taustalla, vaikka kuva itsessään olisi läpinäkyvä.

Valkoinen tai musta esikatselu ei osoita, että tausta olisi pysyvästi osa PNG-kuvaa. Jotkin katseluohjelmat näyttävät läpinäkyvät pikselit yhtenäisen värin päällä. Lue läpinäkyvyyden vianmääritysopas ennen kuin muutat mahdollisesti jo kunnossa olevaa tiedostoa.

Entä kuvat, joissa on sekä valokuvaa että tekstiä?

Esitysdioissa, somekuvissa ja infografiikassa yhdistetään usein valokuvia ja merkintöjä. Mieti, mikä tekisi kuvasta käyttökelvottoman. Jos valokuva pehmenee hieman mutta teksti pysyy selvänä, JPG voi riittää. Jos pieni numero tai ohje käy vaikeaksi lukea, kokohyöty ei auta.

Vertaa kuvia lopullisessa näyttökoossa ja 100 %:n suurennuksella. Kiinnitä huomiota värilliseen tekstiin vastakkaisen värisellä taustalla sekä hyvin ohuisiin viivoihin. Verkkosivulla selittävä teksti kannattaa mahdollisuuksien mukaan pitää oikeana sivun tekstinä kuvan sijaan. Silloin sitä on helpompi lukea, valita ja sovittaa eri näyttöleveyksiin.

Logoissa ja yksinkertaisissa kaavioissa olemassa oleva SVG voi sopia paremmin, koska sen kokoa voi muuttaa ilman rasterikuvan pikselöitymistä. Kyse on eri käsittelytavasta: pienen PNG:n muuntaminen toiseen rasterimuotoon ei tee siitä vektorikuvaa. MDN:n kuvamuoto-opas esittelee vaihtoehdot.

100 %:n katselukoko tarkoittaa tässä kuvan todellista pikselikokoa kuvankatseluohjelmassa: yksi kuvan pikseli näkyy yhtenä näytön pikselinä. Selaimen sivun zoomaus on eri asetus.

Käytännön JPG- ja PNG-työnkulku Pixilossa

1. Säilytä alkuperäinen. Tee jakamiseen tai julkaisemiseen erillinen kopio. Anna sille nimi, joka erottaa sen lähteestä.
2. Rajaa ennen pienentämistä. Poista kuvakaappauksen turha tila rajaustyökalulla ja säilytä yksityiskohtien luettavuus.
3. Valitse mitat tarkoitukseen. Käytä koonmuutostyökalua, jos lähde on käyttökohteen tarpeita suurempi. Säilytä kuvasuhde ja tarkista teksti pienentämisen jälkeen.
4. Muunna vain tarpeeseen. Käytä PNG–JPG-muunninta valokuvan sisältävälle PNG:lle tai vain JPEG:n hyväksyvään lomakkeeseen. Valitse ensin tausta, jos kuvassa on läpinäkyvyyttä.
5. Säädä ja tarkista. PNG–JPG-muuntimessa on laatusäädin. Tarkista ladattu tiedosto sen sijaan, että luottaisit oletusasetuksen sopivan kaikkeen.
6. Testaa käyttökohde. Lataa tai avaa kopio siellä, missä sitä käytetään. Viestisovellus tai julkaisujärjestelmä voi pienentää tai pakata kuvan uudelleen.

Pixilon JPG–WebP-, PNG–WebP-, PNG–JPG- ja WebP–JPG-muuntimissa on oletuksena käytössä pisimmän sivun 4000 pikselin raja. Tarkista koonmuutosvalinta: pelkkää kuvamuotoa verrattaessa pikselimittojen on oltava samat. Tämä ei koske kaikkia muuntimia: JPG–PNG säilyttää mitat sallittujen lähtökuvarajojen puitteissa. Säilytä alkuperäinen erikseen, jos tarvitset sen metatietoja, väritietoja tai täyttä tarkkuutta.

Entä jos PNG on liian suuri?

Poista ensin sisältö, jota lukija ei tarvitse. Rajattu virheilmoitus voi olla koko näytön kuvakaappausta hyödyllisempi. Mieti seuraavaksi vaaditut mitat. Kuvakaappauksen liiallinen pienentäminen voi haitata enemmän kuin hieman suurempi tiedosto.

Kokeile häviötöntä PNG-optimointia ennen kuvamuodon vaihtamista. Se voi tehostaa tallennusta kirjaimia heikentämättä, kuten yllä oleva grafiikka osoittaa. Säästö riippuu lähteen pakkauksesta; valmiiksi optimoitu PNG voi pienentyä tuskin lainkaan. PNG:n säilyttäminen on hyvä tulos, kun sen koko täyttää vaatimuksen.

Jos lomakkeella on tiukka kokoraja, tarkista myös hyväksytyt kuvamuodot ja vähimmäismitat. JPG-muunnos on yksi vaihtoehto, mutta se ei sovi, kun läpinäkyvyys tai tarkat tekstin reunat on säilytettävä. Opas kuvan pienentämisestä tiedostokokorajaan auttaa vaatimusten yhteensovittamisessa.

Älä arvioi tehokkuutta vain tiedostopäätteestä. Pieni, yksinkertainen PNG voi olla samoilla mitoilla tehtyä JPG:tä pienempi. Vertaa samasta lähteestä tehtyjä tiedostoja ja valitse pienin versio, joka täyttää käyttötarpeesi.

Vaikuttaako JPG:n tai PNG:n valinta hakukonenäkyvyyteen?

Google tukee molempia kuvamuotoja. Valitse luettavuuden, lataustarpeiden ja yhteensopivuuden perusteella sen sijaan, että odottaisit tiedostopäätteen parantavan sijoituksia. Käytä kuvaavaa tiedostonimeä, hyödyllistä vaihtoehtoista tekstiä ja ympäröivää sisältöä tukevaa kuvaa. Katso Googlen kuvien hakukoneoptimointiohje.

Kirjoita ohjeiden kuvakaappausten tärkeät toimintaohjeet myös sivun tekstiksi. Vaihtoehtoisen tekstin tulee selittää kuvan tarkoitus; sen ei tarvitse toistaa jokaista kuvakaappauksen valikkokohtaa. Kuvateksti voi antaa tarvittavan lisätaustan.

Usein kysytyt kysymykset

Parantaako JPG:n tallentaminen PNG:nä laatua?

Ei. PNG voi tallentaa avatun kuvan ilman uutta häviöllistä pakkausvaihetta, mutta se ei palauta alkuperäisessä JPEG-pakkauksessa kadonnutta tietoa. Tiedosto voi vain kasvaa.

Pitäisikö kaikki kuvakaappaukset tallentaa PNG:nä?

PNG on hyvä lähtökohta tekstille ja käyttöliittymän yksityiskohdille. Jos kuvakaappaus sisältää enimmäkseen valokuvaa, vertaa myös JPG:tä. Säilytä luettava ja käyttökohteeseen sopiva versio.

Voinko laskea JPG:n laatua toistuvasti, kunnes koko sopii?

Tee jokainen kokeilu alkuperäisestä, älä edellisestä pakatusta kopiosta. Toistuvat häviölliset tallennukset voivat lisätä näkyviä virheitä. Tarkista laadun lisäksi mitat.

Miksi PNG näyttää sumealta, vaikka sen pakkaus on häviötön?

Kuva on voitu pienentää, kaapata matalalla tarkkuudella tai tehdä jo valmiiksi sumeasta lähteestä. Häviötön pakkaus säilyttää nämä pikselit eikä terävöitä niitä.