JPG vs PNG vs WebP: Mitä kuvaformaattia kannattaa käyttää

Aina kun viet kuvan, kuvakaappauksen tai grafiikan, teet oikeastaan kolme päätöstä yhtä aikaa: kuinka paljon yksityiskohtia säilytetään, kuinka suuri tiedostosta tulee ja toimiiko se kaikkialla, missä sen pitää toimia. JPG, PNG ja WebP vastaavat näihin kysymyksiin eri tavoin, ja väärän formaatin valinta on yksi yleisimmistä — ja helpoimmin korjattavista — syistä sille, että verkkosivu latautuu hitaasti, sähköposti ei mene perille tai logon terävät reunat pehmenevät. Tämä opas käy läpi, mitä kukin formaatti todella tekee, milloin sitä kannattaa käyttää ja miten niiden välillä muunnetaan lataamatta mitään minnekään.

Johdanto

Useimmat eivät mieti kuvaformaattia ollenkaan ennen kuin jokin menee rikki: sivu latautuu liian hitaasti, logon ympärille ilmestyy yllättäen valkoinen laatikko, tai liite ei suostu lähtemään. Lähes aina todellinen syy on ristiriita kuvan sisällön ja sen tallennusformaatin välillä. PNG-muotoon tallennettu valokuva on usein moninkertaisesti suurempi kuin tarpeen. JPG-muotoon tallennettu logo voi saada yhtenäisen taustavärin sinne, missä ennen oli läpinäkyvyys. Kummassakaan ongelmassa ei oikeastaan ole kyse "huonosta" ohjelmistosta — kyse on väärän työkalun käyttämisestä väärään sisältöön.

Tämä artikkeli käy JPG:n, PNG:n ja WebP:n läpi yksitellen, vertailee niitä rinnakkain ja antaa asetuksia, joita voit oikeasti käyttää jo tänään — ei vain abstrakteja teknisiä yksityiskohtia. Se käsittelee myös virheitä, jotka hiljaa paisuttavat tiedostokokoa tai heikentävät laatua, sekä pienet tavat, joilla molemmat vältetään.

Kaikki tässä toimii Resizon selainpohjaisten muuntimien kanssa. Resizon JPG-WebP-muunnin ja PNG-pakkain toimivat kokonaan omalla laitteellasi Canvas-rajapinnan avulla, joten formaatin vaihtaminen tai tiedoston pienentäminen ei koskaan vaadi alkuperäisen kuvan lähettämistä minnekään.

Mikä on JPG vs PNG vs WebP: mitä kuvaformaattia kannattaa käyttää?

JPG (eli JPEG) käyttää häviöllistä pakkausta: se karsii valikoivasti pois väri- ja yksityiskohtatietoa, jota silmä huomaa vähiten, minkä ansiosta 80–95 % laatuasetuksella tallennettu JPG voi näyttää lähes identtiseltä alkuperäiseen verrattuna, vaikka vie murto-osan tilasta. Tämä kompromissi tekee JPG:stä erinomaisen valokuville, joissa hienovaraiset liu'ut ja luonnollinen kohina peittävät pakkausartefaktit hyvin, mutta heikon kaikelle, jossa on teräviä reunoja — teksti, viivagrafiikka ja tasaiset värit näyttävät selvää lohkoutumista ja reunojen värähtelyä, kun pakkaus kiristyy.

PNG toimii päinvastoin: häviötön pakkaus säilyttää jokaisen pikselin täsmälleen sellaisena kuin se koodattiin. Mitään ei heitetä pois, minkä vuoksi PNG on vakiovalinta logoille, kuvakaappauksille, käyttöliittymägrafiikalle ja kaikelle, mikä tarvitsee läpinäkyvän taustan alfakanavan kautta. Hintana on tiedostokoko — vilkkaan valokuvan PNG-versio on yleensä huomattavasti suurempi kuin sama kuva JPG- tai WebP-muodossa, koska häviötön pakkaus ei voi hyödyntää samoja oikoteitä kuin häviöllinen.

Googlen kehittämä WebP tukee molempia tapoja yhdessä formaatissa: häviöllistä pakkausta, joka yleensä voittaa JPG:n vastaavalla laatutasolla, ja häviötöntä pakkausta, joka kilpailee PNG:n kanssa mutta tuottaa yleensä pienemmän tiedoston. Se tukee myös läpinäkyvyyttä ja animaatiota, mikä ennen vaati vaihtelua PNG:n ja GIF:n välillä. Selaintuki on nykyään käytännössä universaali Chromessa, Firefoxissa, Safarissa ja Edgessä, minkä takia WebP:stä on tullut verkkokuvien oletussuositus kapean erikoisvaihtoehdon sijaan.

Miksi tällä on merkitystä

Formaattivalinnat kasautuvat. Yksikin liian suuri kuva vilkkaalla sivulla hidastaa jokaisen kävijän ensimmäistä renderöintiä, ja sivu täynnä PNG-kuvia siellä, missä WebP olisi toiminut, voi lisätä todellisen, mitattavan viiveen ennen kuin mikään merkityksellinen edes piirtyy näytölle. Toisessa ääripäässä joukko pakkaamattomia kuvia sähköpostiliitteinä voi hiljaa työntää viestin palveluntarjoajan kokorajan yli, jolloin viesti joko kimpoaa takaisin tai liitteet karsitaan pois ilman varoitusta.

Väärään suuntaan meneminen on yhtä kallista. Tekstipainotteisen kuvakaappauksen tai tasavärisen logon muuntaminen JPG-muotoon tuo lähes aina näkyviä artefakteja reunoille — sumeita hehkuja kirjainten ympärille, raitoja tasaisilla taustoilla — koska JPG:n pakkausmalli ei ole koskaan ollut suunniteltu tällaiselle sisällölle. PNG:n valitseminen jokaiselle valokuvalle "varmuuden vuoksi" välttää tämän ongelman, mutta vaihtaa sen tarpeettoman suuriin tiedostoihin, jotka hidastavat kaikkea ilman mitään visuaalista hyötyä.

Myös hakukoneet ja selaimet palkitsevat yhä enemmän tämän tekemisestä oikein. Googlen oma ohjeistus kuvien julkaisusta yhdistää nopeasti latautuvat, hyvin optimoidut kuvat sekä käyttökokemukseen että löydettävyyteen, ja Core Web Vitals -mittarit riippuvat suoraan siitä, kuinka paljon kuvadataa sivun täytyy siirtää ennen kuin se on käyttökelpoinen. Oikean formaatin valitseminen on yksi edullisimmista suorituskyky- ja SEO-voitoista, koska se ei maksa mitään muuta kuin muutaman sekunnin ajattelua per kuva.

Keskeiset hyödyt

• Pienemmät tiedostot ilman näkyvää laadun heikkenemistä, kunhan formaatti oikeasti vastaa sisältöä.
• Nopeammat sivunlataukset ja paremmat Core Web Vitals -pisteet, koska kuvat ovat yleensä minkä tahansa sivun raskain osa.
• Oikea läpinäkyvyys aina kun sitä tarvitaan, sen sijaan että logon taakse ilmestyisi vahingossa valkoinen tai musta tausta.
• Vähemmän formaattiin liittyviä yllätyksiä — ei enää sumeita PNG-kuvakkeita tai rosoisia JPG-kuvakaappauksia viennin jälkeen.
• Yksi muunnin, joka toimii joka suuntaan, joten et koskaan jää kiinni siihen formaattiin, jonka kamera tai kuvakaappaustyökalu sattui käyttämään.

Taustalla oleva hyöty on hallinta. Kun ymmärrät, mihin kukin formaatti sopii parhaiten, formaatin valinnasta lakkaa olemasta arvailua ja siitä tulee kahden sekunnin päätös, jonka teet oikein joka kerta — ennen kuin tiedosto edes päätyy verkkosivulle, sähköpostiin tai asiakkaalle.

Vaiheittainen opas

1. Selvitä, mikä kuva oikeasti on. Valokuva, teksti- tai logografiikka, vai jotain, joka tarvitsee läpinäkyvän taustan.
2. Tarkista, minne kuva on menossa. Verkkosivulle, sähköpostiin, someen vai painoon — ja huomioi kohteen mahdolliset tiedostokoko- tai mittarajoitukset.
3. Avaa Resizon JPG-WebP-muunnin ja lisää tiedosto. Se toimii kokonaan selaimessasi, joten alkuperäinen tiedosto ei koskaan poistu laitteeltasi.
4. Valitse kohdeformaatti. WebP useimpiin verkkokäyttötarkoituksiin, PNG kun tarvitset läpinäkyvyyttä tai terävää tekstiä ja viivoja, tai JPG laajimman yhteensopivuuden vuoksi.
5. Säädä laatua ja vertaile esikatselua. Tarkista reaaliaikainen esikatselu alkuperäiseen verrattuna ennen vientiä, erityisesti kasvojen, tekstin ja hienojen reunojen kohdalla.
6. Lataa muunnettu tiedosto ja tarkista se. Katso sekä uutta tiedostokokoa että visuaalista laatua 100 prosentin zoomauksella.
7. Säilytä alkuperäinen, kunnes muunnettu tiedosto on varmistettu. Varmista, että se toimii kaikkialla tarvittavassa paikassa ennen kuin poistat mitään.

Suositellut asetukset

Nämä ovat lähtökohtia, eivät sääntöjä. Muotokuva, läpinäkyvä tuoteleikkaus ja tekstipainotteinen kuvakaappaus käyttäytyvät kaikki eri tavoin pakkauksessa, joten testaa muutama edustava tiedosto ennen kuin sovellat samaa asetusta koko kansioon.

Parhaat käytännöt

• Aloita parhaasta käytettävissä olevasta alkuperäisestä — huonolaatuisen kopion koon muuttaminen tai muuntaminen vain tekee olemassa olevista artefakteista näkyvämpiä.
• Päätä formaatti sisällön, ei tottumuksen perusteella. Valokuva ei automaattisesti kuulu PNG-muotoon vain siksi, että "häviötön kuulostaa paremmalta".
• Vie tiedosto kerran. Saman JPG:n tai häviöllisen WebP:n avaaminen ja tallentaminen uudelleen toistuvasti kasaa pakkausvaurioita jokaisella kierroksella.
• Pidä pieni testijoukko — muotokuva, tuotekuva, kuvakaappaus ja läpinäkyvä grafiikka — jotta voit tarkistaa asetukset ennen isoa erää.

Yksi tapa maksaa itsensä takaisin enemmän kuin mikään asetus: muunna suoraan parhaasta käytettävissä olevasta lähteestä, yhdellä kierroksella, suoraan siihen formaattiin, jota kohde oikeasti tarvitsee.

Yleisiä virheitä

• PNG:n käyttäminen jokaiselle valokuvalle tottumuksesta, mikä tuottaa tarpeettoman suuria tiedostoja ilman näkyvää laatuetua JPG:hen tai WebP:hen verrattuna.
• JPG:n tallentaminen toistuvasti useiden muokkauskierrosten aikana, mikä kasaa pakkausartefakteja jokaisella uudelleenkoodauksella.
• Oletetaan, ettei WebP:tä tueta laajasti — sitä on tuettu kaikissa nykyisissä suurissa selaimissa jo vuosia.
• Läpinäkyvän PNG:n litistäminen JPG:ksi, jolloin läpinäkyvyyden tilalle ilmestyy yllättäen valkoinen tai musta tausta.
• EXIF-suuntatietojen huomiotta jättäminen muunnoksen aikana, mikä voi jättää muunnetun kuvan väärään asentoon.

Useimmilla näistä virheistä on sama juurisyy: formaattia käsitellään jälkiajatuksena ensimmäisen päätöksen sijaan. Kun formaatti valitaan tietoisesti, suurin osa tästä listasta lakkaa tapahtumasta itsestään.

Edistyneet vinkit

• Tarjoile WebP JPG- tai PNG-varmistuksella HTML:n <picture>-elementin kautta sitä pientä osaa vanhoja selaimia varten, jotka sitä yhä tarvitsevat.
• Puhtaasti vektorisisällölle — yksinkertaiset kuvakkeet, sanamerkit, viivapohjaiset logot — harkitse SVG:tä minkä tahansa rasteriformaatin sijaan; se skaalautuu täydellisesti ja on usein pienempi kuin vastaava PNG.
• Kun muunnat kokonaista kansiollista vanhoja valokuvia, erämuunna ne WebP-muotoon yhdellä kierroksella sen sijaan, että avaisit ja tallentaisit jokaisen tiedoston erikseen.

Nämä vinkit merkitsevät eniten suuressa mittakaavassa. Yksittäinen väärä formaattivalinta tuskin näkyy missään, mutta sama virhe toistettuna satojen tuotekuvien tai blogikuvien kohdalla kertyy todelliseksi lataus- ja tallennustilan kustannukseksi.

Todellisia esimerkkejä ja käyttötapauksia

Käytännön työnkulku JPG-WebP-muuntimella

Avaa JPG-WebP-muunnin, lisää yksi edustava kuva ja muunna se järkevällä laatuasetuksella ennen kuin kosket loppuun erään. Jos tulos kestää sekä normaalissa katselukoossa että 100 prosentin zoomauksessa, käytä samaa asetusta loppuihin tiedostoihin. Jos tarvitset sen sijaan läpinäkyvän taustan — logon, kuvakkeen, käyttöliittymägrafiikan — käytä PNG-pakkainta, joka pienentää PNG-tiedostoja häviöttömästi koskematta alfakanavaan.

Koska molemmat työkalut toimivat paikallisesti selaimessa, mukana ei ole latausvaihetta, tiliä eikä jonoa — muunnat tiedoston sillä hetkellä, kun pudotat sen työkaluun, ja alkuperäinen pysyy täsmälleen siellä missä se oli.

Ulkopuoliset asiantuntijalähteet kannattaa tarkistaa

Usein kysytyt kysymykset

Johtopäätös

JPG, PNG ja WebP eivät ole kilpailevia standardeja, joista yksi voittaisi suoralta kädeltä — ne ovat kolme eri tehtäviin rakennettua työkalua. JPG käsittelee valokuvia tehokkaasti, PNG suojaa terävät reunat ja läpinäkyvyyden, ja WebP hoitaa nykyään suurimman osan molemmista tehtävistä paremmin kuin kumpikaan vanhempi formaatti yksinään, minkä vuoksi siitä on tullut järkevä oletusvalinta verkkoon. Oikea valinta ei ole niinkään teknisten tietojen ulkoa opettelua vaan yhden kysymyksen esittämistä ennen jokaista vientiä: mitä tämän kuvan pitää oikeasti säilyttää?

Kun tämä tapa on paikallaan, formaattien välillä muuntaminen on helppo osuus. Resizon muuntimet hoitavat mekaanisen työn selaimessa, ilmaiseksi, lähettämättä mitään minnekään — joten ainoa jäljellä oleva päätös on se, joka oikeasti merkitsee.