CodeKitHubCo je tento nástroj?
PNG je bezztrátový formát, takže nemá nastavení "kvality", které by šlo snížit — naivní překódování téměř nepomůže. Skutečná komprese PNG funguje jinak: kvantizace palety zredukuje obrázek na pečlivě vybranou sadu barev (až 256). Protože screenshoty, loga a rozhraní stejně málokdy používají víc odlišných barev, soubor se zmenší o 50–70 % a přitom vypadá identicky. Průhlednost (alfa kanál) je plně zachována.
Jde o techniku, na které stojí známé služby jako TinyPNG — rozdíl je v tom, že tady běží ve vašem prohlížeči přes open-source engine, takže vaše obrázky zůstávají na vašem zařízení a neexistuje žádný denní limit souborů.
Proč ho používat?
- Skutečná komprese (typicky 50–70 %), ne placebo překódování.
- Průhlednost zachována — bezpečné pro loga, ikony a UI prvky.
- Bez nahrávání, na rozdíl od služeb typu TinyPNG — a proto žádné limity počtu souborů.
- Nastavitelný počet barev (16–256) se zobrazenou úsporou u každého obrázku.
- Podpora dávkového zpracování, zdarma, bez vodoznaku.
Jak se používá
- Přetáhněte PNG soubory do rámečku (kompresní engine se automaticky jednorázově načte).
- Ponechte 256 barev pro vizuálně identický výsledek, nebo snižte pro menší soubory.
- Každý výsledek ukazuje přesnou úsporu — klikněte na Stáhnout.
- Pokud se fotorealistické PNG dostatečně nezmenší, převeďte ho místo toho na JPG (viz PNG na JPG).
Příklad
Vstup
app-screenshot.png — 980 KBVýstup
app-screenshot-compressed.png — 290 KB (−70 %), 256 barevScreenshoty a UI grafika se kvantizují krásně; paleta pokrývá každou barvu, kterou skutečně používají.
Z našeho vlastního testování
Náš spouštěcí test použil záměrně nepřátelský obrázek: 600×400 PNG vyplněné 200 překrývajícími se poloprůhlednými barevnými plochami — mnohem chaotičtější než typický screenshot. Zkomprimoval se z 31,1 KB na 7,8 KB (−75 %) při 256 barvách, s neporušeným alfa kanálem. Reálná UI grafika se komprimuje ještě lépe, protože používá méně odlišných barev než náš zátěžový test. Poctivá druhá strana mince, kterou jsme také potvrdili: fotografický obsah vykazuje viditelné pruhování při 256 barvách — tehdy chcete raději cestu JPG/WebP, proto odkazy na převodník jsou o sekci výš.
Běžné případy použití
- Zmenšení screenshotů aplikace nebo webu před přiložením k hlášení chyby nebo dokumentaci.
- Komprese loga nebo sady ikon pro web bez ztráty průhledného pozadí, na kterém vývojáři závisí.
- Zmenšení exportů UI maket z designových nástrojů před sdílením s týmem.
- Zmenšení hmotnosti dávky grafiky rozhraní pro styleguide nebo repozitář designového systému.
Časté dotazy
Jak lze bezztrátový formát dále komprimovat?
Chytrým způsobem ho udělá mírně ztrátovým: kvantizace vybere přibližně 256 barev, které nejlépe reprezentují obrázek, a namapuje na ně každý pixel. U grafiky s omezeným rozsahem barev je výsledek vizuálně identický — technicky ztrátový, prakticky nerozeznatelný.
Přežije průhlednost kompresi?
Ano — alfa kanál je zachován, včetně poloprůhledných pixelů (vržené stíny, vyhlazené okraje). Přesně to loga a UI prvky potřebují.
Kdy funguje komprese PNG špatně?
U fotografií a plynulých přechodů — používají tisíce barev, takže 256 může způsobit pruhování. U fotografického obsahu ušetří mnohem víc převod na JPG nebo WebP; k tomu slouží náš převodník PNG na JPG.
Jak se to liší od TinyPNG?
Stejná základní technika (kvantizace palety), podobná úspora. Praktické rozdíly: vaše soubory se zde nikdy nenahrávají, žádný limit dávky 20 souborů, žádný limit 5 MB a žádná placená úroveň — protože žádný server tuto práci nedělá.
Kolik barev bych měl zvolit?
Začněte s 256 — vizuálně identické pro téměř všechnu grafiku. Pro ikony a jednoduché UI prvky snižte na 64 nebo 32 pro větší úsporu; sledujte náhled na pruhování.