Co vám WebP lossless ve skutečnosti ušetří oproti PNG

Stručná verze

WebP lossless je při stejných pixelech často menší než PNG. To je praktický důvod, proč ho lidé používají.

Ale slovo „často“ je důležité. WebP lossless není kouzelná náhrada za každé PNG. Nejvíce obvykle ušetří u obrázků s průhledností, snímků obrazovky, zachycení UI a smíšeného grafického/fotografického obsahu. U velmi malých assetů, silně optimalizovaných paletových PNG a jednoduchých ikon může ušetřit málo, nebo být občas i větší.

Pokud optimalizujete skutečný web, správná otázka nezní „Je WebP lepší než PNG?“ Zní: „Která z mých PNG se jako WebP lossless smysluplně zmenší, aniž by způsobila problémy s kompatibilitou nebo pracovním postupem?“

To je užší otázka a odpovídá se na ni mnohem snáze.

Co zde znamená „lossless“

Lossless znamená, že dekódované pixely přesně odpovídají zdrojovým pixelům. Pokud se PNG převede do WebP lossless a znovu dekóduje, pixely obrázku by měly být identické.

Neznamená to, že soubor je stejný. Metadata, zpracování barevných profilů, doplňkové PNG chunky, informace o gammě, časová razítka a chunky specifické pro jednotlivé nástroje se mohou změnit, odstranit nebo reprezentovat jinak podle vašeho převodního procesu.

Toto rozlišení je důležité, pokud pracujete s archivními obrázky, tiskovými workflow, vědeckými snímky, právními důkazy nebo jakoukoli situací, kde kontejner souboru nese důležité neobrazové informace. Pro běžné doručování na webu většině týmů jde primárně o vizuální pixely, průhlednost, rozměry a konzistenci barev.

Pokud publikujete obrázky dodané uživateli, metadata jsou také otázkou soukromí. Tomuto širšímu tématu jsme se věnovali v článku jak odstranit metadata EXIF před sdílením fotografií online, ale stejný princip platí i zde: optimalizace obrázků by měla jasně říkat, co zachovává a co odstraňuje.

Proč PNG dobře komprimuje a kde naráží

PNG je velmi dobrý formát. Stal se webovým standardem z dobrých důvodů:

• Je bezeztrátový.
• Podporuje alfa průhlednost.
• Má širokou podporu.
• Je předvídatelný a snadno se s ním pracuje.
• Je výborný pro plochou grafiku, snímky obrazovky, loga a UI assety.

Komprese PNG funguje tak, že filtruje řádky obrázku a poté použije kompresi DEFLATE. Tato kombinace je účinná, zejména když jsou blízké pixely podobné.

Problém není v tom, že by PNG bylo špatné. Problém je v tom, že PNG je staré. Jeho kompresní model má k dispozici méně triků než novější formáty. Jakmile PNG optimalizujete dobrým enkodérem, stále můžete nechávat bajty na stole, protože samotný formát nedokáže některé vzory reprezentovat tak efektivně jako WebP lossless.

A právě tam přichází WebP lossless.

Co WebP lossless dělá jinak

WebP lossless používá kompresní systém navržený přímo pro obrázky, nikoli obecnou kompresní vrstvu přidanou k filtrovaným řádkům. Pod kapotou může využívat techniky jako prediktivní kódování, barevné transformace, palety, zpětné reference a entropické kódování, aby opakující se nebo předvídatelné pixelové vzory zapsal kompaktně.

Nemusíte si pamatovat detaily implementace. Užitečný mentální model je tento:

PNG dobře komprimuje řádky. WebP lossless má více způsobů, jak popsat strukturu obrázku.

Právě tato dodatečná flexibilita je důvod, proč WebP lossless často dokáže ze stejného zdrojového obrázku vytvořit menší soubory.

Google historicky popisoval obrázky WebP lossless ve vlastních studiích jako v průměru přibližně o 26 % menší než PNG. Berte to jako orientační benchmark, ne jako slib. Vaše obrázky nejsou průměr. Váš design systém, snímky obrazovky, produktové fotografie, ilustrace, exportované assety a nahrávky do CMS se budou chovat po svém.

Kde WebP lossless obvykle ušetří nejvíce

Průhledné obrázky

PNG se běžně používá kvůli alfa průhlednosti. WebP lossless také podporuje alfa kanál a často ho komprimuje efektivně.

To se hodí pro:

• Produktové výřezy
• Nálepky a odznaky
• Překryvy rozhraní
• Diagramy s průhledným pozadím
• Loga exportovaná ve větší velikosti, než je nutné

Úspory mohou být znatelné, když alfa kanál obsahuje velké předvídatelné oblasti, měkké hrany nebo opakované tvary. Pokud máte katalog plný průhledných produktových obrázků, WebP lossless stojí za včasné otestování.

Snímky obrazovky a zachycení UI

Snímky obrazovky často obsahují velké ploché oblasti, opakované prvky rozhraní, text, ikony, stíny a některé fotografické části. Tato kombinace může být pro PNG nepříjemná, zejména ve velkých rozměrech.

WebP lossless si s těmito obrázky často poradí dobře. Celostránkový snímek UI, který má jako optimalizované PNG 900 KB, může mít jako bezeztrátový WebP 500–700 KB. Někdy je úspora větší. Někdy menší. Ale tato kategorie je slibná.

Pokud se tyto snímky obrazovky objevují v dokumentaci, marketingových stránkách, onboardingových tocích nebo případových studiích, souhrnný efekt může být reálný.

Smíšený ilustrační a obrazový obsah

Mnoho moderních webových grafik není ani čistá ilustrace, ani čistá fotografie. Představte si hero obrázek obsahující produktové UI, přechody, malé ikony, textové popisky a vložené fotografie.

PNG ho může zachovat dokonale, ale vytvoří velký soubor. Ztrátové WebP nebo AVIF mohou při příliš agresivním nastavení vytvářet artefakty kolem textu a hran. WebP lossless může být rozumný kompromis, když záleží na přesných hranách.

Širší rozhodovací strom napříč obrazovými formáty včetně AVIF a ztrátového WebP najdete v článku Obrazové formáty v roce 2026: kdy AVIF překoná WebP a kdy ne.

Kde může být PNG stále lepší

Drobné ikony a jednoduché assety

U velmi malých souborů záleží na režii formátu. PNG ikona o velikosti 650 bajtů není zjevný kandidát na převod. WebP může ušetřit 80 bajtů, nebo se může zvětšit.

V tomto měřítku může provozní složitost převážit přínos. Pokud je soubor už malý, neblokuje vykreslování a dlouho se cachuje, pravděpodobně máte lepší věci k opravě.

Pečlivě optimalizovaná paletová PNG

Některá PNG jsou mnohem menší, než lidé čekají, protože používají omezenou paletu. Dobré PNG s indexovanými barvami může být u jednoduché grafiky těžké překonat.

Platí to zejména pro:

• Malá loga
• Pixel art
• Ploché ikony
• Jednoduché diagramy
• Grafiku s malým počtem barev

Buďte opatrní při porovnávání WebP s nedbale exportovanými PNG. Pokud PNG pochází přímo z návrhového nástroje se zbytečnými metadaty a špatným nastavením komprese, WebP může vypadat dramaticky lépe. To neznamená, že WebP stejným rozdílem překonal dobře optimalizované PNG.

Férový test porovnává WebP lossless s optimalizovaným PNG, ne s libovolným souborem, který byl náhodou nahrán.

Obrázky, které by měly být ztrátové

Tohle je tichá chyba: týmy převádějí PNG na WebP lossless, když obrázek vůbec neměl být PNG.

Typickým případem jsou fotografie. Plnobarevná fotografie uložená jako PNG může být obrovská. Převod do WebP lossless může soubor zmenšit, ale obvykle bude stále mnohem větší než kvalitní ztrátové WebP nebo AVIF.

Pokud uživatel rozdíl nevnímá, bezeztrátovost je často špatný cíl. Produktové fotografie, redakční obrázky, pozadí a portréty obvykle patří do ztrátového formátu s rozumným nastavením kvality.

Lossless by mělo být vyhrazeno pro případy, kde záleží na přesných pixelech: snímky UI, diagramy, grafiky s velkým množstvím textu, průhlednost, generované grafy a assety, které se při ztrátové kompresi viditelně zhoršují.

Co šetří kromě bajtů

Zřejmou úsporou je velikost přenosu. Menší obrazové soubory obvykle znamenají menší přenos dat, rychlejší stahování a lepší chování na pomalých připojeních.

Existují ale i sekundární přínosy:

• Méně dat spotřebovaných návštěvníky na tarifech s limitem
• Rychlejší naplnění obrazové cache
• Snížená šířka pásma CDN
• Nižší objem úložišť a záloh ve velkém měřítku
• Menší tlak na výkonnostní rozpočty

Tyto úspory nejsou rozložené rovnoměrně. Jedno 2MB PNG převedené na 900KB WebP je důležitější než padesát ikon zmenšených o 100 bajtů každá.

Proto by optimalizace obrázků měla být prioritizována podle dopadu na stránku, ne podle formátové ideologie. Pokud Lighthouse upozorní na doručování obrázků, berte to jako indicii, ne jako verdikt. Náš průvodce jak číst report Lighthouse bez paniky vysvětluje, jak oddělit skutečné výkonnostní problémy od šumových diagnostik.

Kompromis v nákladech na dekódování

Menší soubory nejsou jedinou výkonnostní proměnnou. Prohlížeče také musí obrázky před vykreslením dekódovat.

Dekódování PNG je vyspělé a obvykle rychlé. Dekódování WebP je také široce podporované a efektivní, ale v některých případech může stát více CPU. Na moderních zařízeních to zřídka bývá překážka, ale na levných telefonech, stránkách s mnoha obrázky nebo velkých assetech nad ohybem stránky stojí za to měřit.

Praktické pravidlo: pokud WebP lossless zmenší velké PNG o 30–50 %, síťová úspora obvykle převáží. Pokud zmenší malé PNG o 3 %, ten kompromis nejspíš nestojí za pozornost.

Práce na výkonu je plná takových prahových rozhodnutí. Neoptimalizujte každý bajt se stejnou intenzitou.

Jednoduchá metoda testování

Použijte reprezentativní dávku, ne jeden obrázek.

Vytvořte složku s příklady z vašeho skutečného webu:

• Loga a ikony
• Snímky obrazovky
• Produktové výřezy
• Diagramy
• PNG nahraná do CMS
• Obrázky pro sociální náhledy
• Velké hero grafiky

Potom porovnejte tři věci:

1. Původní PNG tak, jak bylo nahráno
2. Optimalizované PNG
3. Verzi WebP lossless

V příkazové řádce týmy často používají nástroje jako oxipng, pngcrush, zopflipng nebo cwebp -lossless. Konkrétní nástroj je méně důležitý než disciplína porovnávat srovnatelné se srovnatelným.

Sledujte:

• Velikost souboru
• Shodu pixelů po dekódování
• Vizuální vykreslení v cílových prohlížečích
• Správnost průhlednosti
• Vzhled barev
• Čas sestavení
• Tření v CMS nebo návrhovém workflow

Stačí jednoduchá tabulka. Přidejte původní velikost souboru, velikost optimalizovaného PNG, velikost WebP lossless, procentuální úsporu a stránku, kde se obrázek zobrazuje.

Potom seřaďte podle celkových ušetřených bajtů. Toto pořadí vám obvykle řekne, co dělat.

Doručování: nerozbíjejte starší klienty bez rozmyslu

Podpora WebP je dnes v moderních prohlížečích široká. Pro většinu veřejných webů je jeho použití bezpečné. Přesto, pokud máte ve hře embedded webview, e-mailové klienty, starší podnikové prohlížeče, nativní aplikace nebo neobvyklé crawlery, testujte před tím, než PNG rovnou nahradíte.

Konzervativní vzor je ponechat PNG jako fallback a WebP doručovat tam, kde je podporováno:

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

Tento přístup je nudný a nudné je dobré. Uživatelé s podporou WebP dostanou menší soubor. Všichni ostatní dostanou PNG.

Pokud váš build systém přidává assetům fingerprinty a vaše CDN je správně cachuje, není těžké to udržovat. Pokud vaše CMS dělá alternativní formáty bolestivými, začněte největšími a nejčastěji opakovanými obrázky, místo abyste se snažili převést celou knihovnu médií během jednoho sprintu.

Soukromí a lokální zpracování

Převod obrázků často probíhá v build pipeline nebo serverových mediálních službách. Pro mnoho týmů je to v pořádku. Pokud ale pracujete s citlivými snímky obrazovky, zákaznickými nahrávkami nebo interními dokumenty, všímejte si, kde se soubory zpracovávají.

Nástroje pro práci s obrázky v prohlížeči jsou dnes dostatečně dobré pro mnoho jednoduchých převodů, náhledů a kontrol metadat. Mají své limity, ale lokální zpracování může omezit zbytečné nahrávání soukromých obrázků. Kompromisy jsme popsali v článku proč je zpracování obrázků v prohlížeči výhrou pro soukromí.

U interních assetů je hlavní jasnost zásad. Vězte, zda obrázky opouštějí zařízení, kde se ukládají transformované verze a zda se zachovávají metadata.

Praktické pravidlo

Použijte WebP lossless, když platí všechny tři podmínky:

• Zdroj je aktuálně PNG.
• Záleží na přesných pixelech nebo čisté průhlednosti.
• WebP lossless ušetří smysluplné množství po porovnání s optimalizovaným PNG.

Ponechte PNG, když:

• Soubor je drobný.
• PNG je už paletově optimalizované a konkurenceschopné.
• Omezení kompatibility jsou neobvyklá.
• Provozní složitost nestojí za ušetřené bajty.

Použijte ztrátové WebP nebo AVIF, když:

• Obrázek je fotografický.
• Na přesných pixelech nezáleží.
• Nastavení kvality dokáže dramaticky zmenšit velikost bez viditelného poškození.

Nejlepší obrazová strategie málokdy znamená jeden formát všude. Je to malá sada pravidel uplatňovaných konzistentně.

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

💡 Vyzkoušejte toto: Prožeňte stejný PNG soubor přes Image Converter, vytvořte bezeztrátovou verzi WebP a přímo porovnejte velikosti souborů.

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

Co tedy WebP lossless ve skutečnosti ušetří?

Šetří bajty tam, kde PNG došly kompresní triky. Někdy to znamená skromných 10 %. Někdy to znamená zmenšit velký průhledný obrázek téměř na polovinu. Na skutečném webu se úspory obvykle soustřeďují do menšiny assetů.

To je ta důležitá část. WebP lossless není morální upgrade oproti PNG. Je to praktická volba pro konkrétní úkol: menší bezeztrátové webové obrázky s průhledností a širokou podporou v moderních prohlížečích.

Používejte ho tam, kde to čísla ospravedlňují. Nechte PNG být tam, kde ne.