Tiimin huomioita tekniikasta, tiedostomuodoista ja niistä pienistä päätöksistä, jotka tekevät hyvän lopputuloksen.
Miten WebP saavuttaa pienemmät koot kuin PNG
WebP käyttää kahta erillistä pakkaustilaa. Häviötön tila yhdistää tilallisen ja värillisen ennustamisen entropiavaiheeseen, joka on kehittyneempi kuin PNG:n DEFLATE, ja saavuttaa pakkaussuhteita noin 26 prosenttia paremmin tavallisilla kuvilla Googlen julkaiseman mittauksen mukaan. Häviöllinen tila käyttää lohkopohjaista muunnosta, joka muistuttaa videopakkausta ja on suunniteltu hylkäämään tieto, jota silmä ei juuri huomaa, samalla kun se säilyttää sen, mitä todella näemme. Alfakanavan sisältävillä kuvilla WebP käyttää alfadatalle erillistä häviötöntä alipakkausta, kun RGB-data pakataan häviöllisesti, ja juuri siksi häviöllinen WebP läpinäkyvyydellä voi olla suunnilleen kolme kertaa pienempi kuin PNG samalla visuaalisella laadulla. PNG:n DEFLATE on vain häviötön eikä voi hyödyntää sitä havaintoon perustuvaa kompromissia, jota häviöllinen tila käyttää. Muotojen välinen ero selittää eron koossa.
Alfakanava tarkemmin
Sekä PNG että WebP tukevat 8-bittistä alfaläpinäkyvyyttä, jolloin kukin pikseli voi kantaa peittävyysarvon nollasta täysin läpinäkyvälle aina 255:een täysin peittävälle. Kun selaimen kuvamoottori tallentaa PNG:n WebP-muotoon, se lukee jokaisen pikselin RGBA-arvot ja vie alfa-arvot suoraan WebP-pakkaukseen, jossa ne säilytetään häviöttömällä pakkauksella riippumatta siitä, miten RGB-dataa käsitellään. Tuloksena jokainen PNG:n läpinäkyvä pikseli arvolla alfa 0, jokainen puoliläpinäkyvä pikseli väliltä 1 ja 254 sekä jokainen peittävä pikseli arvolla 255 päätyy täsmälleen samaan tilaan WebP:ssä. Logossa, jossa on pehmeät varjot tai reunoiltaan pehmennetty teksti läpinäkyvällä taustalla, reunan pehmeys siirtyy vahingoittumattomana. Tämä on vastakohta JPG:lle, jolla ei ole alfakenttää säiliömäärityksessään ja jonka on asetettava kuva taustaväriä vasten ennen tallennusta.
Core Web Vitals ja kuvamuodon valinta
Largest Contentful Paint mittaa, kuinka kauan sivun suurimman näkyvän elementin ilmestyminen näkymään kestää. Useimmilla sisältösivuilla tuo elementti on pääkuva, ja Google käyttää LCP:tä sijoitussignaalina Core Web Vitals -arvioinnissaan. PNG-kuvat ovat jatkuva heikon LCP:n lähde tiedostokoon vuoksi, sillä 4K-tarkkuuden valokuva-PNG voi painaa useita megatavuja, kun taas vastaava lähes häviöttömän laadun WebP on tyypillisesti murto-osa siitä. PageSpeed Insights merkitsee tämän nimenomaan kohdassaan kuvien tarjoamisesta seuraavan sukupolven muodoissa ja listaa PNG:n muodoksi, joka tulisi vaihtaa. Kriittisillä renderöintipoluilla olevien PNG:iden muuntaminen WebP:ksi on yksi vaikuttavimmista yksittäisistä muutoksista mitatun sivun suorituskyvyn parantamiseksi. Selaintuen aikajana tekee tästä turvallista: Chrome lisäsi WebP:n vuonna 2011, Firefox 2019, Safari 2020 ja Edge Chromium-uudelleenrakennuksestaan lähtien.
Häviöllinen tulos ja lähes häviötön asetus
WebP-tallennus tarjoaa laatuparametrin nollasta sataan, jossa korkeammat arvot säilyttävät enemmän yksityiskohtaa suurempien tiedostojen kustannuksella. Tämä työkalu tallentaa kiinteällä lähes häviöttömällä asetuksella, joka on viritetty tasapainottamaan visuaalinen tarkkuus ja tiedostokoko verkkoaineiston tyypillisille luokille eli valokuville, käyttöliittymägrafiikalle ja kuvakkeille. Tällä asetuksella tulos ei havainnoltaan erotu lähde-PNG:stä tavallisella näytön katseluetäisyydellä. Teknisesti hieman bittitason tarkkuutta menetetään aitoon häviöttömään tallennukseen verrattuna, mikä tarkoittaa, että tavutason vertailu purettujen WebP-pikselien ja alkuperäisten PNG-pikselien välillä näyttäisi pieniä numeerisia eroja. Nämä erot jäävät ihmisen havaintokynnyksen alapuolelle valokuvasisällössä. Lääketieteelliseen kuvantamiseen, satelliittikuvaukseen tai digitaaliseen arkistointiin, joissa häviötön tarkkuus on ehdoton vaatimus, oikea ratkaisu on säilyttää PNG ja käyttää WebP:tä pelkästään jakeluvientinä, ei työkopiona.
Miten metatiedot käyttäytyvät
PNG-WebP-muunnoksessa käytetty putki karsii EXIF-, IPTC- ja XMP-metatiedot tuloksesta. Tämä vastaa käyttäytymistä, joka havaitaan kaikissa kolmessa suuressa selainmoottorissa. ICC-väriprofiileja käsitellään epäjohdonmukaisesti: Chrome ja Safari säilyttävät sRGB-ICC-profiilin merkinnän WebP-tuloksessa, kun taas Firefox karsii kaikki metatiedot, ICC-profiili mukaan lukien. Lopputulos on, että muunnettu WebP on sRGB-turvallinen selaimesta riippumatta, mutta mikä tahansa laajan väriskaalan merkintä kuten Display-P3, Adobe RGB tai ProPhoto RGB lähde-PNG:ssä ei säily Firefoxissa. Värikriittisissä ammattityönkuluissa tällä epäjohdonmukaisuudella on merkitystä, joten jos lopullinen tulos tarvitsee väriprofiilin tarkkuutta, muunna työkalulla, joka kirjoittaa ICC-datan nimenomaisesti, tai lisää profiilimerkintä jälkikäteen erillisellä kuvametatietojen muokkaimella.
Milloin pitää PNG ja milloin WebP riittää
Käytännön valintapuu on lyhyt. Jos kuvan lopullinen kohde on verkkosivu tai verkkosovellus ja renderöintiympäristö on mikä tahansa selain vuodesta 2020 eteenpäin, WebP on oikea vientimuoto. Jos kuvan on avauduttava suunnitteluohjelmassa kuten Figma, Sketch tai Affinity Designer, tarkista WebP-tuki juuri siinä versiossa, jota käytät, sillä tuki vaihtelee. Jos kuvaa käytetään painotyönkulussa, PNG tai TIFF on suositeltava, koska useimmat painon RIP-ohjelmat eivät käsittele WebP:tä. Jos kuva lähetetään sähköpostissa, PNG on turvallisempi, sillä sähköpostiohjelmat ovat tunnetusti epäjohdonmukaisia nykyaikaisten muotojen kanssa. Jos kuvaa käytetään työtiedostona, jota muokataan ja tallennetaan uudelleen monta kertaa, säilytä PNG alkuperäisenä. WebP lähes häviöttömällä laadulla on erinomainen jakelumuoto, ja PNG on parempi arkistointiin ja muokkaukseen. Ihanteellinen työnkulku säilyttää PNG:n alkuperäisenä ja vie WebP:n verkkojakeluun.
