Mitä häviötön WebP oikeasti säästää PNG:hen verrattuna

Lyhyt versio

Häviötön WebP on usein pienempi kuin PNG samoille pikseleille. Se on käytännön syy, miksi sitä käytetään.

Mutta sana "usein" on olennainen. Häviötön WebP ei ole taianomainen korvaaja jokaiselle PNG:lle. Se säästää tyypillisesti eniten kuvissa, joissa on läpinäkyvyyttä, kuvakaappauksissa, käyttöliittymäkaappauksissa sekä grafiikkaa ja valokuvaa yhdistävässä sisällössä. Se voi säästää vain vähän, tai toisinaan jopa hävitä, hyvin pienissä resursseissa, vahvasti optimoiduissa paletti-PNG:issä ja yksinkertaisissa kuvakkeissa.

Jos optimoit oikeaa verkkosivustoa, oikea kysymys ei ole "Onko WebP parempi kuin PNG?" Se on: "Mitkä PNG-tiedostoistani pienenevät merkittävästi häviöttömänä WebP:nä ilman yhteensopivuus- tai työnkulkuongelmia?"

Se on kapeampi kysymys ja paljon helpompi vastata.

Mitä "häviötön" tässä tarkoittaa

Häviötön tarkoittaa, että puretut pikselit vastaavat lähdepikseleitä täsmälleen. Jos PNG muunnetaan häviöttömäksi WebP:ksi ja puretaan uudelleen, kuvan pikselien pitäisi olla identtiset.

Se ei tarkoita, että tiedosto olisi sama. Metadata, väriprofiilien käsittely, PNG:n oheislohkot, gammatiedot, aikaleimat ja työkalukohtaiset lohkot voivat muuttua, poistua tai esittyä eri tavalla riippuen muunnosputkesta.

Tällä erolla on merkitystä, jos käsittelet arkistokuvia, painotyönkulkuja, tieteellistä kuvamateriaalia, oikeudellista todistusaineistoa tai mitä tahansa tilannetta, jossa tiedostosäiliö kantaa tärkeää muuta kuin pikselitietoa. Tavallisessa verkkotoimituksessa useimmat tiimit välittävät ensisijaisesti visuaalisista pikseleistä, läpinäkyvyydestä, mitoista ja värien johdonmukaisuudesta.

Jos julkaiset käyttäjien toimittamia kuvia, metadata on myös yksityisyyskysymys. Käsittelimme tätä laajempaa aihetta artikkelissa miten EXIF-metadata poistetaan ennen kuvien jakamista verkossa, mutta sama periaate pätee myös tässä: kuvan optimoinnin pitäisi kertoa selkeästi, mitä se säilyttää ja mitä se poistaa.

Miksi PNG pakkaa hyvin ja missä sen rajat tulevat vastaan

PNG on erittäin hyvä formaatti. Siitä tuli verkon oletusformaatti hyvistä syistä:

• Se on häviötön.
• Se tukee alfa-läpinäkyvyyttä.
• Sitä tuetaan laajasti.
• Se on ennustettava ja yksinkertainen käsitellä.
• Se sopii erinomaisesti tasaiselle grafiikalle, kuvakaappauksille, logoille ja käyttöliittymäresursseille.

PNG-pakkaus toimii suodattamalla kuvarivejä ja käyttämällä sen jälkeen DEFLATE-pakkausta. Yhdistelmä on tehokas, erityisesti kun lähekkäiset pikselit ovat samankaltaisia.

Ongelma ei ole se, että PNG olisi huono. Ongelma on se, että PNG on vanha. Sen pakkausmallilla on käytettävissään vähemmän keinoja kuin uudemmilla formaateilla. Kun PNG on optimoitu hyvällä kooderilla, pöydälle voi silti jäädä tavuja, koska formaatti itse ei pysty esittämään joitakin kuvioita yhtä tehokkaasti kuin häviötön WebP.

Siinä kohtaa häviötön WebP tulee mukaan.

Mitä häviötön WebP tekee eri tavalla

Häviötön WebP käyttää pakkausjärjestelmää, joka on suunniteltu nimenomaan kuville, eikä yleiskäyttöistä pakkauskerrosta, joka on liitetty suodatettuihin riveihin. Konepellin alla se voi käyttää tekniikoita kuten ennustavaa koodausta, värimuunnoksia, paletteja, taaksepäin viittaavia referenssejä ja entropiakoodausta toistuvien tai ennustettavien pikselikuvioiden tiiviiseen esittämiseen.

Toteutuksen yksityiskohtia ei tarvitse opetella ulkoa. Hyödyllinen ajattelumalli on tämä:

PNG pakkaa rivejä hyvin. Häviöttömällä WebP:llä on enemmän tapoja kuvata kuvan rakennetta.

Tämä lisäjoustavuus on syy siihen, miksi häviötön WebP voi usein tuottaa pienempiä tiedostoja samasta lähdekuvasta.

Google on historiallisesti kuvannut häviöttömien WebP-kuvien olevan omissa tutkimuksissaan keskimäärin noin 26% pienempiä kuin PNG. Käsittele sitä suuntaa antavana vertailukohtana, ei lupauksena. Sinun kuvasi eivät ole keskiarvo. Suunnittelujärjestelmäsi, kuvakaappauksesi, tuotekuvasi, kuvituksesi, viedyt resurssisi ja CMS-latauksesi käyttäytyvät omalla tavallaan.

Missä häviötön WebP yleensä säästää eniten

Läpinäkyvät kuvat

PNG:tä käytetään yleisesti alfa-läpinäkyvyyden vuoksi. Myös häviötön WebP tukee alfaa ja pakkaa sen usein tehokkaasti.

Tämä on hyödyllistä esimerkiksi seuraavissa:

• Tuotekuvien irrotukset
• Tarrat ja merkit
• Käyttöliittymäpeitteet
• Kaaviot, joissa on läpinäkyvä tausta
• Tarpeettoman suurina viedyt logot

Säästöt voivat olla huomattavia, kun alfakanava sisältää suuria ennustettavia alueita, pehmeitä reunoja tai toistuvia muotoja. Jos sinulla on katalogillinen läpinäkyviä tuotekuvia, häviötöntä WebP:tä kannattaa testata varhaisessa vaiheessa.

Kuvakaappaukset ja käyttöliittymäkaappaukset

Kuvakaappaukset sisältävät usein suuria tasaisia alueita, toistuvia käyttöliittymäkomponentteja, tekstiä, kuvakkeita, varjoja ja joitakin valokuvamaisia alueita. Tämä yhdistelmä voi olla PNG:lle hankala, etenkin suurissa mitoissa.

Häviötön WebP käsittelee nämä kuvat usein hyvin. Koko sivun käyttöliittymäkuvakaappaus, joka on optimoituna PNG:nä 900 KB, voi muuttua häviöttömänä WebP:nä 500–700 KB:n kokoiseksi. Joskus säästö on suurempi. Joskus se on pienempi. Mutta kategoria on lupaava.

Jos nämä kuvakaappaukset näkyvät dokumentaatiossa, markkinointisivuilla, perehdytysvirroissa tai asiakastarinoissa, kokonaisvaikutus voi olla todellinen.

Sekoitettu kuvitus- ja kuvasisältö

Moni moderni verkkografiikka ei ole puhdasta kuvitusta eikä puhdasta valokuvaa. Ajattele hero-kuvaa, jossa on tuotteen käyttöliittymää, liukuvärejä, pieniä kuvakkeita, tekstilabeleita ja upotettuja valokuvia.

PNG voi säilyttää sen täydellisesti mutta tuottaa suuren tiedoston. Häviöllinen WebP tai AVIF voi aiheuttaa artefakteja tekstin ja reunojen ympärille, jos pakkausta kiristetään liikaa. Häviötön WebP voi olla järkevä välimuoto, kun tarkat reunat ovat tärkeitä.

Laajemman päätöspuun kuvaformaateista, mukaan lukien AVIF ja häviöllinen WebP, löydät artikkelista Kuvaformaatit vuonna 2026: milloin AVIF voittaa WebP:n ja milloin ei.

Missä PNG voi edelleen olla parempi

Pienet kuvakkeet ja yksinkertaiset resurssit

Hyvin pienissä tiedostoissa formaatin oma ylimääräinen rakenne merkitsee. 650 tavun PNG-kuvake ei ole ilmeinen muunnosehdokas. WebP voi säästää 80 tavua, tai siitä voi tulla suurempi.

Tässä mittakaavassa operatiivinen monimutkaisuus voi ylittää hyödyn. Jos tiedosto on jo pieni, ei estä renderöintiä ja pysyy välimuistissa pitkään, sinulla on todennäköisesti parempaa korjattavaa.

Huolellisesti optimoidut paletti-PNG:t

Jotkin PNG:t ovat paljon pienempiä kuin ihmiset odottavat, koska ne käyttävät rajattua palettia. Hyvää indeksoitujen värien PNG:tä voi olla vaikea voittaa yksinkertaisessa grafiikassa.

Tämä pätee erityisesti seuraaviin:

• Pienet logot
• Pikselitaide
• Tasaiset kuvakkeet
• Yksinkertaiset kaaviot
• Grafiikka, jossa on vähän värejä

Ole varovainen, kun vertaat WebP:tä huolimattomiin PNG-vienteihin. Jos PNG on tullut suoraan suunnittelutyökalusta tarpeettoman metadatan ja heikkojen pakkausasetusten kanssa, WebP voi näyttää dramaattisesti paremmalta. Se ei tarkoita, että WebP voittaisi hyvin optimoidun PNG:n samalla marginaalilla.

Reilu testi vertaa häviötöntä WebP:tä optimoituun PNG:hen, ei mihin tahansa sattumalta ladattuun tiedostoon.

Kuvat, joiden pitäisi olla häviöllisiä

Tämä on hiljainen virhe: tiimit muuntavat PNG:n häviöttömäksi WebP:ksi, vaikka kuvan ei olisi pitänyt olla PNG alun perinkään.

Valokuvat ovat tavallinen tapaus. Täysvärinen valokuva PNG:nä voi olla valtava. Sen muuntaminen häviöttömäksi WebP:ksi voi pienentää tiedostoa, mutta se on yleensä silti paljon suurempi kuin laadukas häviöllinen WebP tai AVIF.

Jos käyttäjä ei havaitse eroa, häviöttömyys on usein väärä tavoite. Tuotekuvat, toimitukselliset kuvat, taustat ja muotokuvat kuuluvat yleensä häviölliseen formaattiin järkevillä laatuasetuksilla.

Häviötön kannattaa varata tapauksiin, joissa täsmällisillä pikseleillä on merkitystä: käyttöliittymäkuvakaappauksiin, kaavioihin, tekstipitoiseen grafiikkaan, läpinäkyvyyteen, generoituun kaaviografiikkaan ja resursseihin, jotka heikkenevät näkyvästi häviöllisessä pakkauksessa.

Mitä se säästää tavujen lisäksi

Ilmeinen säästö on siirtokoko. Pienemmät kuvatiedostot tarkoittavat yleensä vähemmän kaistanleveyttä, nopeampia latauksia ja parempaa toimintaa hitailla yhteyksillä.

Mutta on myös toissijaisia hyötyjä:

• Vähemmän datankäyttöä kävijöille, joilla on käytön mukaan laskutettava liittymä
• Nopeampi kuvavälimuistin täyttyminen
• Pienempi CDN-kaistanleveys
• Vähemmän tallennus- ja varmuuskopiointivolyymia suuressa mittakaavassa
• Vähemmän painetta suorituskykybudjeteille

Nämä säästöt eivät jakaudu tasaisesti. Yhden 2 MB:n PNG:n muuntaminen 900 KB:n WebP:ksi merkitsee enemmän kuin viidenkymmenen kuvakkeen pienentäminen 100 tavulla kutakin.

Siksi kuvien optimointi pitäisi priorisoida sivuvaikutuksen, ei formaatti-ideologian perusteella. Jos Lighthouse merkitsee kuvien toimituksen ongelmaksi, lue se vihjeenä, ei tuomiona. Oppaamme miten Lighthouse-raporttia luetaan panikoimatta selittää, miten merkitykselliset suorituskykyongelmat erotetaan kohinaisista diagnostiikoista.

Purkukustannuksen kompromissi

Pienemmät tiedostot eivät ole ainoa suorituskykymuuttuja. Selainten on myös purettava kuvat ennen niiden maalaamista.

PNG:n purku on kypsää ja yleensä nopeaa. Myös WebP:n purkua tuetaan laajasti ja se on tehokasta, mutta joissakin tapauksissa se voi vaatia enemmän CPU:ta. Moderneilla laitteilla tämä on harvoin este, mutta edullisissa puhelimissa, kuvapainotteisilla sivuilla tai suurissa taitteen yläpuolisissa resursseissa se kannattaa mitata.

Käytännön sääntö: jos häviötön WebP pienentää suuren PNG:n 30–50%, verkon säästö yleensä hallitsee. Jos se pienentää pientä PNG:tä 3%, kompromissista ei todennäköisesti kannata välittää.

Suorituskykytyö on täynnä tällaisia kynnysratkaisuja. Älä optimoi jokaista tavua samalla intensiteetillä.

Yksinkertainen testimenetelmä

Käytä edustavaa erää, älä yhtä kuvaa.

Luo kansio, jossa on esimerkkejä omalta sivustoltasi:

• Logot ja kuvakkeet
• Kuvakaappaukset
• Tuotekuvien irrotukset
• Kaaviot
• CMS:ään ladatut PNG:t
• Sosiaalisen median esikatselukuvat
• Suuret hero-grafiikat

Vertaa sitten kolmea asiaa:

1. Alkuperäinen PNG ladattuna
2. Optimoitu PNG
3. Häviötön WebP-versio

Komentorivityönkuluissa tiimit käyttävät usein työkaluja kuten oxipng, pngcrush, zopflipng tai cwebp -lossless. Tarkka työkalu merkitsee vähemmän kuin kurinalaisuus verrata samanlaista samanlaiseen.

Seuraa:

• Tiedostokokoa
• Pikselien yhtäläisyyttä purkamisen jälkeen
• Visuaalista renderöintiä kohdeselaimissa
• Läpinäkyvyyden oikeellisuutta
• Värien ulkoasua
• Koontiaikaa
• CMS- tai suunnittelutyönkulun kitkaa

Yksinkertainen taulukko riittää. Lisää alkuperäinen tiedostokoko, optimoidun PNG:n koko, häviöttömän WebP:n koko, säästöprosentti ja sivu, jolla kuva näkyy.

Lajittele sitten kokonaistavusäästön mukaan. Tämä lajittelujärjestys kertoo yleensä, mitä kannattaa tehdä.

Toimitus: älä riko vanhempia asiakkaita kevyesti

WebP-tuki on nykyään laaja moderneissa selaimissa. Useimmille julkisille verkkosivustoille sen käyttö on turvallista. Silti, jos kokonaisuuteen kuuluu upotettuja webview-näkymiä, sähköpostiohjelmia, vanhoja yritysselaimia, natiivisovelluksia tai epätavallisia indeksoijia, testaa ennen kuin korvaat PNG:n suoraan.

Konservatiivinen malli on pitää PNG varavaihtoehtona ja toimittaa WebP tuetuissa ympäristöissä:

<picture>
  <source srcset="diagram.webp" type="image/webp">
  <img src="diagram.png" alt="Diagram showing the checkout flow">
</picture>

Tämä lähestymistapa on tylsä, ja tylsä on hyvä. WebP:tä tukevat käyttäjät saavat pienemmän tiedoston. Kaikki muut saavat PNG:n.

Jos koontijärjestelmäsi lisää resursseille sormenjäljet ja CDN välimuistittaa ne oikein, tätä ei ole vaikea ylläpitää. Jos CMS tekee vaihtoehtoisista formaateista hankalia, aloita suurimmista ja eniten toistuvista kuvista sen sijaan, että yrittäisit muuntaa koko mediakirjaston yhdessä sprintissä.

Yksityisyys ja paikallinen käsittely

Kuvien muunnos tapahtuu usein koontiputkissa tai palvelinpuolen mediapalveluissa. Se sopii monille tiimeille. Mutta jos käsittelet arkaluonteisia kuvakaappauksia, asiakaslatauksia tai sisäisiä dokumentteja, tiedosta, missä tiedostoja käsitellään.

Selaimessa toimivat kuvankäsittelytyökalut ovat kehittyneet riittävän hyviksi moniin yksinkertaisiin muunnoksiin, esikatseluihin ja metadatan tarkistuksiin. Rajoja on, mutta paikallinen käsittely voi vähentää yksityisten kuvien tarpeetonta lataamista palvelimelle. Käsittelimme kompromisseja artikkelissa miksi kuvien käsittely selaimessa on yksityisyysvoitto.

Sisäisten resurssien kohdalla pääasia on politiikan selkeys. Tiedä, lähtevätkö kuvat laitteelta, mihin muunnetut versiot tallennetaan ja säilytetäänkö metadata.

Käytännön nyrkkisääntö

Käytä häviötöntä WebP:tä, kun kaikki kolme pitävät paikkansa:

• Lähde on tällä hetkellä PNG.
• Täsmällisillä pikseleillä tai siistillä läpinäkyvyydellä on merkitystä.
• Häviötön WebP säästää merkittävästi, kun sitä verrataan optimoituun PNG:hen.

Pidä PNG, kun:

• Tiedosto on hyvin pieni.
• PNG on jo palettioptimoitu ja kilpailukykyinen.
• Yhteensopivuusrajoitteet ovat epätavallisia.
• Operatiivinen monimutkaisuus ei ole säästettyjen tavujen arvoista.

Käytä häviöllistä WebP:tä tai AVIF:ää, kun:

• Kuva on valokuvamainen.
• Täsmällisillä pikseleillä ei ole merkitystä.
• Laatuasetus voi pienentää kokoa dramaattisesti ilman näkyvää haittaa.

Paras kuvastrategia ei yleensä ole yksi formaatti kaikkialla. Se on pieni joukko sääntöjä, joita sovelletaan johdonmukaisesti.

<!-- tool-cta:start -->

💡 Kokeile tätä: Aja sama PNG Image Converter -työkalun läpi luodaksesi häviöttömän WebP-version ja vertaa tiedostokokoja suoraan.

<!-- tool-cta:end -->

Mitä häviötön WebP siis oikeasti säästää?

Se säästää tavuja siellä, missä PNG:ltä ovat loppuneet pakkauskeinot. Joskus se tarkoittaa maltillista 10%:n säästöä. Joskus se tarkoittaa suuren läpinäkyvän kuvan leikkaamista lähes puoleen. Oikealla sivustolla säästöt keskittyvät yleensä vähemmistöön resursseista.

Se on tärkeä osa. Häviötön WebP ei ole moraalinen päivitys PNG:stä. Se on käytännöllinen vaihtoehto tiettyyn tehtävään: pienemmät häviöttömät verkkokuvat, joissa on läpinäkyvyys ja laaja modernien selainten tuki.

Käytä sitä siellä, missä luvut perustelevat sen. Jätä PNG rauhaan siellä, missä ne eivät.