Mit takarít meg valójában a WebP veszteségmentes módja a PNG-hez képest

A rövid változat

A veszteségmentes WebP gyakran kisebb, mint a PNG ugyanazokhoz a pixelekhez. Ez a gyakorlati oka annak, hogy sokan használják.

De a „gyakran” szó fontos. A veszteségmentes WebP nem varázslatos helyettesítő minden PNG-re. Általában az átlátszóságot tartalmazó képeknél, képernyőképeknél, UI-rögzítéseknél és vegyes grafikus/fotós tartalmaknál spórol a legtöbbet. Nagyon kis elemeknél, erősen optimalizált palettás PNG-knél és egyszerű ikonoknál keveset nyerhetünk vele, vagy néha akár nagyobb is lehet.

Ha egy valódi webhelyet optimalizál, a helyes kérdés nem az, hogy „Jobb-e a WebP, mint a PNG?” Hanem ez: „Mely PNG-jeim lesznek érdemben kisebbek veszteségmentes WebP-ként, anélkül hogy kompatibilitási vagy munkafolyamatbeli problémákat okoznának?”

Ez szűkebb kérdés, és sokkal könnyebb megválaszolni.

Mit jelent itt a „veszteségmentes”?

A veszteségmentes azt jelenti, hogy a dekódolt pixelek pontosan megegyeznek a forráspixelekkel. Ha egy PNG-t veszteségmentes WebP-vé alakítanak, majd újra dekódolnak, a képpixeleknek azonosnak kell lenniük.

Ez nem jelenti azt, hogy a fájl ugyanaz. A metaadatok, a színprofil-kezelés, a kiegészítő PNG-chunkok, a gamma-információk, az időbélyegek és az eszközspecifikus chunkok a konverziós folyamattól függően megváltozhatnak, eltávolításra kerülhetnek, vagy másképp lehetnek reprezentálva.

Ez a különbség számít, ha archív képekkel, nyomdai munkafolyamatokkal, tudományos képanyaggal, jogi bizonyítékkal vagy bármilyen olyan helyzettel dolgozik, ahol a fájlkonténer fontos, nem pixelalapú információkat hordoz. Hétköznapi webes kiszolgálásnál a legtöbb csapatot elsősorban a vizuális pixelek, az átlátszóság, a méretek és a színkonzisztencia érdekli.

Ha felhasználók által feltöltött képeket tesz közzé, a metaadat adatvédelmi kérdés is. Ezt a tágabb témát már tárgyaltuk itt: hogyan távolítsuk el az EXIF-metaadatokat fotók online megosztása előtt, de ugyanaz az elv itt is érvényes: a képoptimalizálásnak egyértelműnek kell lennie abban, mit őriz meg és mit távolít el.

Miért tömörít jól a PNG, és hol vannak a határai

A PNG nagyon jó formátum. Jó okokból vált webes alapértelmezéssé:

• Veszteségmentes.
• Támogatja az alfa-átlátszóságot.
• Széles körben támogatott.
• Kiszámítható és egyszerű vele dolgozni.
• Kiváló lapos grafikákhoz, képernyőképekhez, logókhoz és UI-elemekhez.

A PNG-tömörítés úgy működik, hogy szűri a képsorokat, majd DEFLATE-tömörítést alkalmaz. Ez a kombináció hatékony, különösen akkor, ha a közeli pixelek hasonlóak.

A probléma nem az, hogy a PNG rossz. A probléma az, hogy a PNG régi. A tömörítési modellje kevesebb trükköt kínál, mint az újabb formátumoké. Miután egy PNG-t jó enkóderrel optimalizált, még mindig maradhatnak benne felesleges bájtok, mert maga a formátum bizonyos mintázatokat nem tud olyan hatékonyan leírni, mint a veszteségmentes WebP.

Itt lép be a veszteségmentes WebP.

Miben más a veszteségmentes WebP?

A veszteségmentes WebP olyan tömörítési rendszert használ, amelyet kifejezetten képekhez terveztek, nem pedig egy általános célú tömörítési réteget illeszt rá szűrt sorokra. A motorháztető alatt olyan technikákat használhat, mint a prediktív kódolás, a színtranszformációk, a paletták, a visszafelé hivatkozások és az entrópiakódolás, hogy az ismétlődő vagy kiszámítható pixelmintázatokat tömören reprezentálja.

Nem kell bemagolnia a megvalósítás részleteit. A hasznos mentális modell ez:

A PNG jól tömöríti a sorokat. A veszteségmentes WebP többféle módon tudja leírni a képszerkezetet.

Ez a plusz rugalmasság az oka annak, hogy a veszteségmentes WebP gyakran kisebb fájlokat tud előállítani ugyanabból a forrásképből.

A Google korábban a saját tanulmányaiban úgy írta le a veszteségmentes WebP-képeket, hogy átlagosan körülbelül 26%-kal kisebbek a PNG-nél. Ezt irányadó viszonyítási pontként kezelje, ne ígéretként. Az Ön képei nem átlagok. A dizájnrendszere, képernyőképei, termékfotói, illusztrációi, exportált elemei és CMS-feltöltései mind saját viselkedést mutatnak.

Hol szokott a legtöbbet spórolni a veszteségmentes WebP?

Átlátszó képek

A PNG-t gyakran az alfa-átlátszóság miatt használják. A veszteségmentes WebP is támogatja az alfát, és sokszor hatékonyan tömöríti.

Ez hasznos lehet például:

• Termékkivágásoknál
• Matricáknál és jelvényeknél
• Felületi átfedéseknél
• Átlátszó hátterű diagramoknál
• A szükségesnél nagyobbra exportált logóknál

A megtakarítás észrevehető lehet, ha az alfa-csatorna nagy, kiszámítható régiókat, lágy éleket vagy ismétlődő alakzatokat tartalmaz. Ha egy katalógus tele van átlátszó termékképekkel, a veszteségmentes WebP-t érdemes korán tesztelni.

Képernyőképek és UI-rögzítések

A képernyőképek gyakran tartalmaznak nagy, homogén területeket, ismétlődő felületi elemeket, szöveget, ikonokat, árnyékokat és néhány fotós régiót. Ez a keverék kényelmetlen lehet a PNG számára, különösen nagy méreteknél.

A veszteségmentes WebP gyakran jól kezeli ezeket a képeket. Egy teljes oldalas UI-képernyőkép, amely optimalizált PNG-ként 900 KB, veszteségmentes WebP-ként 500–700 KB lehet. Néha nagyobb a megtakarítás. Néha kisebb. De ez a kategória ígéretes.

Ha ezek a képernyőképek dokumentációban, marketingoldalakon, onboarding folyamatokban vagy esettanulmányokban jelennek meg, az összesített hatás valódi lehet.

Vegyes illusztrációs és képi tartalom

Sok modern webes grafika sem nem tiszta illusztráció, sem nem tiszta fotó. Gondoljon egy hero képre, amely termék-UI-t, gradienseket, kis ikonokat, szöveges címkéket és beágyazott fotókat tartalmaz.

A PNG tökéletesen megőrizheti, de nagy fájlt eredményezhet. A veszteséges WebP vagy AVIF túl erős beállítások mellett artefaktumokat hozhat létre a szöveg és az élek körül. A veszteségmentes WebP ésszerű középút lehet, ha a pontos élek fontosak.

A képformátumok szélesebb döntési fájához, beleértve az AVIF-et és a veszteséges WebP-t is, lásd: Képformátumok 2026-ban: mikor veri az AVIF a WebP-t, és mikor nem.

Hol lehet még mindig jobb a PNG?

Apró ikonok és egyszerű elemek

Nagyon kis fájloknál a formátum többletterhe számít. Egy 650 bájtos PNG-ikon nem egyértelmű jelölt konverzióra. A WebP talán spórol 80 bájtot, vagy akár nagyobb is lehet.

Ezen a léptéken az üzemeltetési komplexitás meghaladhatja a hasznot. Ha a fájl már eleve apró, nem blokkolja a renderelést, és hosszú ideig gyorsítótárazott, valószínűleg vannak fontosabb javítanivalók.

Gondosan optimalizált palettás PNG-k

Egyes PNG-k sokkal kisebbek, mint azt sokan várnák, mert korlátozott palettát használnak. Egy jó indexelt színű PNG-t egyszerű grafikáknál nehéz felülmúlni.

Ez különösen igaz az alábbiakra:

• Kis logók
• Pixel art
• Lapos ikonok
• Egyszerű diagramok
• Kevés színt használó grafikák

Legyen óvatos, amikor a WebP-t hanyagul exportált PNG-khez hasonlítja. Ha a PNG közvetlenül egy tervezőeszközből érkezett felesleges metaadatokkal és rossz tömörítési beállításokkal, a WebP drámaian jobbnak tűnhet. Ez nem jelenti azt, hogy a WebP ugyanekkora előnnyel vert volna meg egy jól optimalizált PNG-t.

A tisztességes teszt a veszteségmentes WebP-t optimalizált PNG-hez hasonlítja, nem ahhoz a fájlhoz, amelyet épp feltöltöttek.

Képek, amelyeknek inkább veszteségesnek kellene lenniük

Ez a csendes hiba: a csapatok PNG-t alakítanak veszteségmentes WebP-vé, amikor a képnek eleve nem PNG-nek kellett volna lennie.

A fotók a szokásos eset. Egy teljes színű fotó PNG-ként mentve óriási lehet. Veszteségmentes WebP-vé alakítva csökkenhet a fájlméret, de általában még így is sokkal nagyobb lesz, mint egy jó minőségű veszteséges WebP vagy AVIF.

Ha a felhasználó nem érzékeli a különbséget, a veszteségmentesség gyakran rossz cél. A termékfotók, szerkesztőségi képek, hátterek és portrék általában veszteséges formátumba valók, ésszerű minőségi beállításokkal.

A veszteségmentest azokra az esetekre érdemes fenntartani, ahol a pontos pixelek számítanak: UI-képernyőképek, diagramok, sok szöveget tartalmazó grafikák, átlátszóság, generált diagramok és olyan elemek, amelyek láthatóan romlanak veszteséges tömörítés alatt.

Mit spórol meg a bájtokon kívül?

A nyilvánvaló megtakarítás az átviteli méret. A kisebb képfájlok általában kevesebb sávszélességet, gyorsabb letöltést és jobb viselkedést jelentenek lassú kapcsolatokon.

De vannak másodlagos előnyök is:

• Kevesebb adatfelhasználás a forgalmi korlátos csomagokat használó látogatóknál
• Gyorsabb kép-gyorsítótár feltöltés
• Csökkent CDN-sávszélesség
• Alacsonyabb tárhely- és mentési volumen nagy léptékben
• Kisebb nyomás a teljesítménybüdzséken

Ezek a megtakarítások nem egyenletesen oszlanak el. Egyetlen 2 MB-os PNG 900 KB-os WebP-vé alakítása többet számít, mint ötven ikon 100 bájtos csökkentése.

Ezért a képoptimalizálást az oldalra gyakorolt hatás alapján kell priorizálni, nem formátumideológia szerint. Ha a Lighthouse jelzi a képkiszolgálást, olvassa nyomként, ne ítéletként. Útmutatónk arról, hogyan olvasson Lighthouse-jelentést pánik nélkül, elmagyarázza, hogyan válassza szét az érdemi teljesítményproblémákat a zajos diagnosztikától.

A dekódolási költség kompromisszuma

A kisebb fájlok nem az egyetlen teljesítménytényezők. A böngészőknek a képeket ki is kell dekódolniuk, mielőtt kirajzolják őket.

A PNG-dekódolás kiforrott és általában gyors. A WebP-dekódolás is széles körben támogatott és hatékony, de bizonyos esetekben több CPU-t igényelhet. Modern eszközökön ez ritkán akadály, de gyengébb telefonokon, képekkel teli oldalakon vagy nagy, hajtás feletti elemeknél érdemes mérni.

A gyakorlati szabály: ha a veszteségmentes WebP egy nagy PNG-t 30–50%-kal csökkent, általában a hálózati megtakarítás dominál. Ha egy kis PNG-t 3%-kal csökkent, a kompromisszum valószínűleg nem érdemel figyelmet.

A teljesítményoptimalizálás tele van ilyen küszöbdöntésekkel. Ne optimalizáljon minden bájtot ugyanakkora intenzitással.

Egy egyszerű tesztelési módszer

Reprezentatív csomagot használjon, ne egyetlen képet.

Hozzon létre egy mappát a tényleges webhelyéről származó példákkal:

• Logók és ikonok
• Képernyőképek
• Termékkivágások
• Diagramok
• CMS-be feltöltött PNG-k
• Közösségi előnézeti képek
• Nagy hero grafikák

Ezután hasonlítson össze három dolgot:

1. Az eredeti, feltöltött PNG-t
2. Egy optimalizált PNG-t
3. Egy veszteségmentes WebP-változatot

Parancssori munkafolyamatoknál a csapatok gyakran használnak olyan eszközöket, mint az oxipng, pngcrush, zopflipng vagy cwebp -lossless. A konkrét eszköz kevésbé fontos, mint az a fegyelem, hogy hasonlót hasonlóval hasonlítson össze.

Kövesse nyomon:

• Fájlméret
• Pixelazonosság dekódolás után
• Vizuális megjelenítés a célböngészőkben
• Az átlátszóság helyessége
• Színmegjelenés
• Build-idő
• CMS- vagy tervezési munkafolyamatbeli súrlódás

Egy egyszerű táblázat elég. Adja hozzá az eredeti fájlméretet, az optimalizált PNG méretét, a veszteségmentes WebP méretét, a megtakarított százalékot és azt az oldalt, ahol a kép megjelenik.

Ezután rendezzen az összes megtakarított bájt szerint. Ez a sorrend általában megmutatja, mit érdemes tenni.

Kiszolgálás: ne törje el könnyelműen a régebbi klienseket

A WebP támogatása ma már széles a modern böngészőkben. A legtöbb nyilvános webhelyen biztonságosan használható. Ennek ellenére, ha beágyazott webview-k, e-mail kliensek, régi vállalati böngészők, natív alkalmazások vagy szokatlan crawlerek is érintettek, teszteljen, mielőtt teljesen lecseréli a PNG-t.

A konzervatív minta az, hogy a PNG-t megtartja tartalékként, és ott szolgál ki WebP-t, ahol támogatott:

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

Ez a megközelítés unalmas, és az unalmas jó. A WebP-t támogató felhasználók megkapják a kisebb fájlt. Mindenki más megkapja a PNG-t.

Ha a buildrendszere ujjlenyomattal látja el az elemeket, és a CDN megfelelően gyorsítótárazza őket, ezt nem nehéz fenntartani. Ha a CMS fájdalmassá teszi az alternatív formátumokat, kezdje a legnagyobb és legtöbbször ismétlődő képekkel ahelyett, hogy egy sprint alatt próbálná átalakítani a teljes médiatárat.

Adatvédelem és helyi feldolgozás

A képkonverzió gyakran buildfolyamatokban vagy szerveroldali médiaszolgáltatásokban történik. Ez sok csapat számára rendben van. De ha érzékeny képernyőképekkel, ügyfélfeltöltésekkel vagy belső dokumentumokkal dolgozik, legyen tisztában azzal, hol dolgozzák fel a fájlokat.

A böngészőoldali képeszközök sok egyszerű konverzióhoz, előnézethez és metaadat-ellenőrzéshez már elég jók. Vannak korlátok, de a helyi feldolgozás csökkentheti a privát képek szükségtelen feltöltését. A kompromisszumokat itt tárgyaltuk: miért adatvédelmi előny a képek böngészőben történő feldolgozása.

Belső elemeknél a fő szempont a szabályzat egyértelműsége. Tudja, hogy a képek elhagyják-e az eszközt, hol tárolódnak az átalakított változatok, és megmaradnak-e a metaadatok.

Egy gyakorlati ökölszabály

Használjon veszteségmentes WebP-t, ha mindhárom igaz:

• A forrás jelenleg PNG.
• Fontosak a pontos pixelek vagy a tiszta átlátszóság.
• A veszteségmentes WebP érdemi mennyiséget spórol egy optimalizált PNG-hez hasonlítva.

Tartsa meg a PNG-t, ha:

• A fájl apró.
• A PNG már palettára optimalizált és versenyképes.
• A kompatibilitási korlátok szokatlanok.
• Az üzemeltetési komplexitás nem éri meg a megtakarított bájtokat.

Használjon veszteséges WebP-t vagy AVIF-et, ha:

• A kép fotós jellegű.
• A pontos pixelek nem számítanak.
• Egy minőségi beállítás drámaian csökkentheti a méretet látható károsodás nélkül.

A legjobb képstratégia ritkán egyetlen formátum mindenhol. Inkább egy kis szabályrendszer következetes alkalmazása.

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

💡 Próbálja ki ezt: Futtassa át ugyanazt a PNG-t az Image Converter eszközön, hogy veszteségmentes WebP-verziót hozzon létre, és hasonlítsa össze közvetlenül a fájlméreteket.

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

Tehát mit takarít meg valójában a veszteségmentes WebP?

Bájtokat takarít meg ott, ahol a PNG kifogyott a tömörítési trükkökből. Néha ez szerény 10%-ot jelent. Néha azt, hogy egy nagy átlátszó kép majdnem a felére csökken. Egy valódi webhelyen a megtakarítások általában az elemek kisebb részére koncentrálódnak.

Ez a fontos rész. A veszteségmentes WebP nem erkölcsi előrelépés a PNG-hez képest. Gyakorlati lehetőség egy konkrét feladatra: kisebb, veszteségmentes webes képek átlátszósággal és széles modern böngészőtámogatással.

Használja ott, ahol a számok igazolják. Hagyja békén a PNG-t ott, ahol nem.