CodeKitHubČo je tento nástroj?
PNG je bezstratový formát, takže nemá „kvalitu“, ktorú by ste mohli znížiť — naivné prekódovanie pomôže len málo. Skutočná kompresia PNG funguje inak: kvantizácia palety zredukuje obrázok na starostlivo vybranú množinu farieb (až 256). Keďže screenshoty, logá a rozhrania zvyčajne aj tak nepoužívajú viac odlišných farieb, súbor sa zmenší o 50 – 70 % a pritom vyzerá identicky. Priehľadnosť (alfa kanál) zostáva plne zachovaná.
Toto je technika stojaca za známymi službami ako TinyPNG — rozdiel je v tom, že tu beží vo vašom prehliadači pomocou open-source enginu, takže vaše obrázky zostávajú na vašom zariadení a nemáte žiadny denný limit súborov.
Prečo ho používať?
- Skutočná kompresia (typicky 50 – 70 %), nie predstierané prekódovanie.
- Priehľadnosť zachovaná — bezpečné pre logá, ikony a UI prvky.
- Žiadne nahrávanie, na rozdiel od služieb typu TinyPNG — a teda žiadne limity počtu súborov.
- Nastaviteľný farebný rozpočet (16 – 256) so zobrazením úspory pri každom obrázku.
- Hromadné spracovanie, zadarmo, bez vodoznaku.
Ako sa používa
- Pretiahnite PNG súbory do plochy (kompresný engine sa automaticky raz načíta).
- Ponechajte 256 farieb pre vizuálne identický výsledok, alebo hodnotu znížte pre menší súbor.
- Pri každom výsledku sa zobrazí presná úspora — kliknite na Stiahnuť.
- Ak sa fotorealistický PNG dostatočne nezmenší, prevedie ho radšej na JPG (pozri PNG to JPG).
Príklad
Vstup
app-screenshot.png — 980 KBVýstup
app-screenshot-compressed.png — 290 KB (−70 %), 256 fariebScreenshoty a UI grafika sa kvantizujú výborne; paleta pokryje každú farbu, ktorú reálne používajú.
Z nášho vlastného testovania
Náš spúšťací test použil zámerne náročný obrázok: PNG 600×400 vyplnený 200 prekrývajúcimi sa poloprehľadnými farebnými plochami — omnoho neprehľadnejší než typický screenshot. Zmenšil sa z 31,1 KB na 7,8 KB (−75 %) pri 256 farbách, s neporušeným alfa kanálom. Bežná UI grafika sa komprimuje ešte lepšie, pretože používa menej odlišných farieb než náš záťažový test. Úprimne priznávame aj druhú stranu, ktorú sme si tiež overili: fotografický obsah vykazuje pri 256 farbách viditeľné pásovanie — vtedy je namieste cesta cez JPG/WebP, preto sú odkazy na prevodník hneď o sekciu nižšie.
Bežné prípady použitia
- Zmenšenie screenshotov aplikácie alebo webu pred pripojením k bug reportu alebo dokumentačnej stránke.
- Kompresia loga alebo sady ikon pre web bez straty priehľadného pozadia, na ktoré sa vývojári spoliehajú.
- Zmenšenie exportov UI mockupov z dizajnérskych nástrojov pred zdieľaním s tímom.
- Zníženie veľkosti dávky rozhraniových grafík pre style guide alebo repozitár dizajnového systému.
Časté otázky
Ako sa dá bezstratový formát ešte viac skomprimovať?
Tak, že sa mierne a inteligentne urobí stratovým: kvantizácia vyberie približne 256 farieb, ktoré najlepšie reprezentujú obrázok, a namapuje na ne každý pixel. Pri grafike s obmedzeným rozsahom farieb je výsledok vizuálne identický — technicky stratový, prakticky nerozoznateľný.
Prežije priehľadnosť kompresiu?
Áno — alfa kanál zostáva zachovaný vrátane čiastočne priehľadných pixelov (tiene, vyhladené hrany). Presne to logá a UI prvky potrebujú.
Kedy kompresia PNG funguje slabo?
Pri fotografiách a plynulých prechodoch — používajú tisíce farieb, takže pri 256 farbách sa môže objaviť pásovanie. Pri fotografickom obsahu ušetrí oveľa viac prevod na JPG alebo WebP; presne na to slúži náš prevodník PNG na JPG.
Ako sa to líši od TinyPNG?
Rovnaká základná technika (kvantizácia palety), podobná úspora. Praktické rozdiely: vaše súbory sa tu nikdy nenahrávajú, žiadny limit 20 súborov naraz, žiadny strop 5 MB a žiadna platená verzia — pretože tu nepracuje žiadny server.
Aký počet farieb vybrať?
Začnite so 256 — vizuálne identické takmer pri všetkej grafike. Pri ikonách a jednoduchých UI prvkoch skúste znížiť na 64 alebo 32 pre ešte väčšiu úsporu; sledujte náhľad kvôli pásovaniu.