Čo vám bezstratový WebP v skutočnosti ušetrí oproti PNG

Stručná verzia

Bezstratový WebP je pri rovnakých pixeloch často menší než PNG. To je praktický dôvod, prečo ho ľudia používajú.

Dôležité je však slovo „často“. Bezstratový WebP nie je zázračnou náhradou každého PNG. Najviac zvykne ušetriť pri obrázkoch s priehľadnosťou, snímkach obrazovky, záznamoch UI a zmiešanom graficko-fotografickom obsahu. Pri veľmi malých súboroch, silno optimalizovaných paletových PNG a jednoduchých ikonách môže ušetriť málo alebo občas aj prehrať.

Ak optimalizujete skutočný web, správna otázka neznie „Je WebP lepší než PNG?“ Znie: „Ktoré z mojich PNG sa ako bezstratový WebP zmenšia významne, bez toho, aby vznikli problémy s kompatibilitou alebo pracovným postupom?“

To je užšia otázka a odpovedá sa na ňu oveľa ľahšie.

Čo tu znamená „bezstratový“

Bezstratový znamená, že dekódované pixely presne zodpovedajú zdrojovým pixelom. Ak sa PNG skonvertuje na bezstratový WebP a znovu dekóduje, pixely obrázka by mali byť identické.

Neznamená to, že súbor je rovnaký. Metadáta, spracovanie farebných profilov, pomocné bloky PNG, informácie o gamme, časové pečiatky a bloky špecifické pre konkrétne nástroje môžu byť podľa vášho konverzného procesu zmenené, odstránené alebo reprezentované inak.

Tento rozdiel je dôležitý, ak pracujete s archívnymi obrázkami, tlačovými postupmi, vedeckými snímkami, právnymi dôkazmi alebo akoukoľvek situáciou, v ktorej kontajner súboru nesie dôležité neobrazové informácie. Pri bežnom doručovaní na webe väčšine tímov záleží najmä na vizuálnych pixeloch, priehľadnosti, rozmeroch a konzistentnosti farieb.

Ak publikujete obrázky dodané používateľmi, metadáta sú aj otázkou súkromia. Širšie sme sa tejto téme venovali v článku ako odstrániť EXIF metadáta pred zdieľaním fotografií online, no rovnaký princíp platí aj tu: optimalizácia obrázkov má jasne hovoriť, čo zachováva a čo odstraňuje.

Prečo PNG komprimuje dobre a kde naráža na limity

PNG je veľmi dobrý formát. Webovým štandardom sa stal z dobrých dôvodov:

• Je bezstratový.
• Podporuje alfa priehľadnosť.
• Má širokú podporu.
• Je predvídateľný a jednoducho sa s ním pracuje.
• Je výborný pre plochú grafiku, snímky obrazovky, logá a UI prvky.

Kompresia PNG funguje tak, že filtruje riadky obrázka a potom použije kompresiu DEFLATE. Táto kombinácia je účinná, najmä keď sú blízke pixely podobné.

Problém nie je v tom, že PNG je zlý. Problém je v tom, že PNG je starý. Jeho kompresný model má k dispozícii menej trikov než novšie formáty. Aj keď PNG optimalizujete dobrým enkóderom, stále môžete nechávať bajty nevyužité, pretože samotný formát nedokáže niektoré vzory reprezentovať tak efektívne ako bezstratový WebP.

A práve tu vstupuje do hry bezstratový WebP.

Čo robí bezstratový WebP inak

Bezstratový WebP používa kompresný systém navrhnutý špeciálne pre obrázky, nie všeobecnú kompresnú vrstvu pripojenú k filtrovaným riadkom. Pod kapotou môže používať techniky ako prediktívne kódovanie, farebné transformácie, palety, spätné odkazy a entropické kódovanie, aby opakujúce sa alebo predvídateľné pixelové vzory reprezentoval kompaktne.

Implementačné detaily si nemusíte pamätať. Užitočný mentálny model je tento:

PNG dobre komprimuje riadky. Bezstratový WebP má viac spôsobov, ako opísať štruktúru obrázka.

Táto dodatočná flexibilita je dôvodom, prečo bezstratový WebP často dokáže z rovnakého zdrojového obrázka vytvoriť menšie súbory.

Google historicky opisoval bezstratové obrázky WebP vo vlastných štúdiách ako približne o 26 % menšie než PNG v priemere. Berte to ako orientačný benchmark, nie ako prísľub. Vaše obrázky nie sú priemer. Váš dizajnový systém, snímky obrazovky, produktové fotografie, ilustrácie, exportované assety a nahrávky z CMS sa budú správať po svojom.

Kde bezstratový WebP zvyčajne šetrí najviac

Priehľadné obrázky

PNG sa bežne používa pre alfa priehľadnosť. Bezstratový WebP tiež podporuje alfu a často ju komprimuje efektívne.

Je to užitočné pre:

• Produktové výrezy
• Nálepky a odznaky
• Prekrytia rozhrania
• Diagramy s priehľadným pozadím
• Logá exportované vo väčšej veľkosti, než je potrebné

Úspora môže byť citeľná, keď alfa kanál obsahuje veľké predvídateľné oblasti, mäkké okraje alebo opakujúce sa tvary. Ak máte katalóg plný priehľadných produktových obrázkov, bezstratový WebP sa oplatí otestovať medzi prvými.

Snímky obrazovky a záznamy UI

Snímky obrazovky často obsahujú veľké ploché oblasti, opakujúce sa komponenty rozhrania, text, ikony, tiene a niekoľko fotografických oblastí. Táto zmes môže byť pre PNG nešikovná, najmä pri veľkých rozmeroch.

Bezstratový WebP si s týmito obrázkami často poradí dobre. Celostránková snímka UI, ktorá má ako optimalizované PNG 900 KB, sa môže ako bezstratový WebP zmenšiť na 500–700 KB. Niekedy je úspora väčšia. Niekedy menšia. No táto kategória je sľubná.

Ak sa tieto snímky obrazovky zobrazujú v dokumentácii, marketingových stránkach, onboardingových tokoch alebo prípadových štúdiách, súhrnný efekt môže byť reálny.

Zmiešaný ilustračný a obrazový obsah

Mnohé moderné webové grafiky nie sú ani čisté ilustrácie, ani čisté fotografie. Predstavte si hero obrázok obsahujúci produktové UI, prechody, malé ikony, textové popisky a vložené fotografie.

PNG ho môže zachovať dokonale, ale vytvorí veľký súbor. Stratový WebP alebo AVIF môžu pri príliš silnom nastavení vytvárať artefakty okolo textu a hrán. Bezstratový WebP môže byť rozumným kompromisom, keď záleží na presných hranách.

Širší rozhodovací strom naprieč formátmi obrázkov vrátane AVIF a stratového WebP nájdete v článku Formáty obrázkov v roku 2026: kedy AVIF prekoná WebP a kedy nie.

Kde môže byť PNG stále lepší

Drobné ikony a jednoduché assety

Pri veľmi malých súboroch záleží na réžii formátu. PNG ikona s veľkosťou 650 bajtov nie je zjavný kandidát na konverziu. WebP môže ušetriť 80 bajtov, alebo môže byť väčší.

V takom rozsahu môže prevádzková zložitosť prevážiť nad prínosom. Ak je súbor už drobný, neblokuje vykresľovanie a dlho sa ukladá do cache, pravdepodobne máte dôležitejšie veci na opravu.

Starostlivo optimalizované paletové PNG

Niektoré PNG sú oveľa menšie, než ľudia čakajú, pretože používajú obmedzenú paletu. Dobrý PNG s indexovanými farbami môže byť pri jednoduchej grafike ťažké prekonať.

Platí to najmä pre:

• Malé logá
• Pixel art
• Ploché ikony
• Jednoduché diagramy
• Grafiku s malým počtom farieb

Buďte opatrní pri porovnávaní WebP s nedbalo exportovanými PNG. Ak PNG prišiel priamo z dizajnérskeho nástroja s nepotrebnými metadátami a slabými kompresnými nastaveniami, WebP môže vyzerať dramaticky lepšie. Neznamená to, že WebP porazil dobre optimalizované PNG s rovnakým náskokom.

Férový test porovnáva bezstratový WebP s optimalizovaným PNG, nie s akýmkoľvek súborom, ktorý sa náhodou nahral.

Obrázky, ktoré by mali byť stratové

Toto je tichá chyba: tímy konvertujú PNG na bezstratový WebP, hoci obrázok vôbec nemal byť PNG.

Typickým prípadom sú fotografie. Plnofarebná fotografia uložená ako PNG môže byť obrovská. Konverzia na bezstratový WebP môže súbor zmenšiť, no zvyčajne bude stále oveľa väčší než kvalitný stratový WebP alebo AVIF.

Ak používateľ rozdiel nevníma, bezstratovosť je často nesprávny cieľ. Produktové fotografie, editoriálne obrázky, pozadia a portréty zvyčajne patria do stratového formátu s rozumným nastavením kvality.

Bezstratovosť si nechajte pre prípady, keď záleží na presných pixeloch: snímky UI, diagramy, grafika s veľkým množstvom textu, priehľadnosť, generované grafy a assety, ktoré sa pri stratovej kompresii viditeľne zhoršujú.

Čo šetrí okrem bajtov

Zjavnou úsporou je veľkosť prenosu. Menšie obrazové súbory zvyčajne znamenajú menšiu spotrebu pásma, rýchlejšie sťahovanie a lepšie správanie na pomalých pripojeniach.

Sú tu však aj sekundárne výhody:

• Menej dát spotrebovaných návštevníkmi s meranými programami
• Rýchlejšie napĺňanie cache obrázkov
• Nižšia spotreba CDN pásma
• Menší objem úložiska a záloh vo veľkom rozsahu
• Menší tlak na výkonnostné rozpočty

Tieto úspory nie sú rozdelené rovnomerne. Jeden 2 MB PNG skonvertovaný na 900 KB WebP je dôležitejší než päťdesiat ikon zmenšených o 100 bajtov každá.

Preto by sa optimalizácia obrázkov mala prioritizovať podľa dopadu na stránku, nie podľa formátovej ideológie. Ak Lighthouse označí doručovanie obrázkov, berte to ako stopu, nie ako rozsudok. Náš sprievodca ako čítať report Lighthouse bez paniky vysvetľuje, ako odlíšiť zmysluplné výkonnostné problémy od hlučnej diagnostiky.

Kompromis pri nákladoch na dekódovanie

Menšie súbory nie sú jedinou výkonnostnou premennou. Prehliadače musia obrázky pred vykreslením aj dekódovať.

Dekódovanie PNG je vyspelé a zvyčajne rýchle. Dekódovanie WebP je tiež široko podporované a efektívne, no v niektorých prípadoch môže stáť viac CPU. Na moderných zariadeniach to zriedka býva blokujúce, ale pri slabších telefónoch, stránkach s množstvom obrázkov alebo veľkých prvkoch nad zlomom stránky sa to oplatí merať.

Praktické pravidlo: ak bezstratový WebP zmenší veľké PNG o 30–50 %, sieťová úspora zvyčajne dominuje. Ak zmenší malé PNG o 3 %, tento kompromis pravdepodobne nestojí za pozornosť.

Výkonnostná práca je plná takýchto prahových rozhodnutí. Neoptimalizujte každý bajt s rovnakou intenzitou.

Jednoduchá testovacia metóda

Použite reprezentatívnu dávku, nie jeden obrázok.

Vytvorte priečinok s príkladmi z vášho skutočného webu:

• Logá a ikony
• Snímky obrazovky
• Produktové výrezy
• Diagramy
• PNG nahrané cez CMS
• Obrázky pre sociálne náhľady
• Veľké hero grafiky

Potom porovnajte tri veci:

1. Pôvodné PNG tak, ako bolo nahraté
2. Optimalizované PNG
3. Bezstratovú verziu WebP

Pri pracovných postupoch v príkazovom riadku tímy často používajú nástroje ako oxipng, pngcrush, zopflipng alebo cwebp -lossless. Presný nástroj je menej dôležitý než disciplína porovnávať porovnateľné.

Sledujte:

• Veľkosť súboru
• Zhodu pixelov po dekódovaní
• Vizuálne vykreslenie v cieľových prehliadačoch
• Správnosť priehľadnosti
• Vzhľad farieb
• Čas buildu
• Trenie v CMS alebo dizajnovom pracovnom postupe

Jednoduchá tabuľka stačí. Pridajte pôvodnú veľkosť súboru, veľkosť optimalizovaného PNG, veľkosť bezstratového WebP, percentuálnu úsporu a stránku, na ktorej sa obrázok zobrazuje.

Potom zoraďte podľa celkových ušetrených bajtov. Toto poradie vám zvyčajne napovie, čo robiť.

Doručovanie: nerozbíjajte starších klientov len tak

Podpora WebP je dnes široká naprieč modernými prehliadačmi. Pre väčšinu verejných webov je bezpečné ho používať. Ak však máte v mixe vložené webview, e-mailových klientov, staršie podnikové prehliadače, natívne aplikácie alebo nezvyčajné crawlery, pred úplným nahradením PNG testujte.

Konzervatívny vzor je ponechať PNG ako fallback a WebP servírovať tam, kde je podporovaný:

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

Tento prístup je nudný, a nudné je dobré. Používatelia s podporou WebP dostanú menší súbor. Všetci ostatní dostanú PNG.

Ak váš build systém fingerprintuje assety a váš CDN ich správne cachuje, nie je to náročné udržiavať. Ak váš CMS sťažuje prácu s alternatívnymi formátmi, začnite najväčšími a najčastejšie opakovanými obrázkami namiesto toho, aby ste sa pokúšali skonvertovať celú knižnicu médií v jednom sprinte.

Súkromie a lokálne spracovanie

Konverzia obrázkov sa často deje v build pipeline alebo v serverových mediálnych službách. Pre mnohé tímy je to v poriadku. Ak však pracujete s citlivými snímkami obrazovky, zákazníckymi nahrávkami alebo internými dokumentmi, všímajte si, kde sa súbory spracúvajú.

Nástroje na spracovanie obrázkov v prehliadači sú dnes dosť dobré na mnohé jednoduché konverzie, náhľady a kontroly metadát. Majú limity, no lokálne spracovanie môže obmedziť zbytočné nahrávanie súkromných obrázkov. Kompromisy sme rozobrali v článku prečo je spracovanie obrázkov v prehliadači výhrou pre súkromie.

Pri interných assetoch je hlavné mať jasnú politiku. Vedzte, či obrázky opúšťajú zariadenie, kde sa ukladajú transformované verzie a či sa metadáta zachovávajú.

Praktické pravidlo

Použite bezstratový WebP, keď platia všetky tri veci:

• Zdroj je aktuálne PNG.
• Záleží na presných pixeloch alebo čistej priehľadnosti.
• Bezstratový WebP ušetrí významné množstvo po porovnaní s optimalizovaným PNG.

Ponechajte PNG, keď:

• Súbor je drobný.
• PNG je už paletovo optimalizovaný a konkurencieschopný.
• Kompatibilitné obmedzenia sú nezvyčajné.
• Prevádzková zložitosť nestojí za ušetrené bajty.

Použite stratový WebP alebo AVIF, keď:

• Obrázok je fotografický.
• Na presných pixeloch nezáleží.
• Nastavenie kvality dokáže dramaticky zmenšiť veľkosť bez viditeľného poškodenia.

Najlepšia stratégia obrázkov málokedy znamená jeden formát všade. Je to malý súbor pravidiel aplikovaných konzistentne.

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

💡 Vyskúšajte toto: Prežeňte ten istý PNG cez Image Converter, aby ste vytvorili bezstratovú verziu WebP, a priamo porovnajte veľkosti súborov.

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

Čo teda bezstratový WebP v skutočnosti šetrí?

Šetrí bajty tam, kde PNG už vyčerpal svoje kompresné triky. Niekedy to znamená skromných 10 %. Niekedy zmenší veľký priehľadný obrázok takmer na polovicu. Na skutočnom webe sa úspory zvyčajne sústredia v menšine assetov.

To je podstatné. Bezstratový WebP nie je morálny upgrade oproti PNG. Je to praktická možnosť pre konkrétnu úlohu: menšie bezstratové webové obrázky s priehľadnosťou a širokou podporou v moderných prehliadačoch.

Použite ho tam, kde to čísla odôvodňujú. PNG nechajte na pokoji tam, kde nie.