CodeKitHubKas yra šis įrankis?
PNG yra be nuostolių formatas, tad jame nėra „kokybės“ nustatymo, kurį būtų galima sumažinti — naivus perkodavimas beveik nepadeda. Tikras PNG suspaudimas veikia kitaip: palečių kvantizacija sumažina vaizdą iki atidžiai parinkto spalvų rinkinio (iki 256). Kadangi ekrano nuotraukose, logotipuose ir sąsajos grafikoje vis tiek retai naudojama daugiau skirtingų spalvų, failas sumažėja 50–70%, tuo pačiu išliekant vizualiai identišku. Skaidrumas (alfa kanalas) išsaugomas visiškai.
Tai ta pati technika, kuria remiasi žinomos paslaugos kaip TinyPNG — skirtumas čia tas, kad ji veikia jūsų naršyklėje per atvirojo kodo variklį, tad jūsų vaizdai lieka jūsų įrenginyje ir nėra jokio dienos failų limito.
Kodėl jį naudoti?
- Tikras suspaudimas (paprastai 50–70%), o ne tuščias perkodavimas.
- Skaidrumas išsaugomas — saugu logotipams, piktogramoms ir sąsajos elementams.
- Be įkėlimo, kitaip nei TinyPNG tipo paslaugose — ir todėl jokių failų kiekio apribojimų.
- Reguliuojamas spalvų biudžetas (16–256), rodomas kiekvieno vaizdo sutaupymas.
- Palaiko masinį apdorojimą, nemokama, be vandenženklio.
Kaip naudoti
- Nuvilkite PNG failus į langelį (suspaudimo variklis įsikelia automatiškai, vieną kartą).
- Palikite 256 spalvas, jei norite vizualiai identiško rezultato, arba sumažinkite skaičių mažesniems failams.
- Kiekvienas rezultatas rodo tikslų sutaupymą — spustelėkite „Atsisiųsti“.
- Jei fotorealistiškas PNG nepakankamai sumažėja, konvertuokite jį į JPG (žr. PNG į JPG).
Pavyzdys
Įvestis
app-screenshot.png — 980 KBIšvestis
app-screenshot-compressed.png — 290 KB (−70%), 256 spalvosEkrano nuotraukos ir sąsajos grafika kvantizuojasi puikiai; paletė aprėpia visas spalvas, kurias jos iš tiesų naudoja.
Iš mūsų pačių testavimo
Mūsų paleidimo testas naudojo sąmoningai sudėtingą vaizdą: 600×400 PNG, užpildytą 200 persidengiančių iš dalies permatomų spalvų dėmių — kur kas painesnis nei tipinė ekrano nuotrauka. Jis buvo sukvantizuotas nuo 31,1 KB iki 7,8 KB (−75%) su 256 spalvomis, alfa kanalui liekant nepažeistam. Realaus pasaulio sąsajos grafika suspaudžiama net geriau, nes naudoja mažiau skirtingų spalvų nei mūsų testinis vaizdas. Sąžininga kita pusė, kurią taip pat patvirtinome: fotografinis turinys su 256 spalvomis rodo matomą juostinį efektą — tada verčiau rinktis JPG/WebP kelią, todėl konvertavimo nuorodos ir yra viename skyriuje aukščiau.
Dažniausi naudojimo atvejai
- Mažinant programos ar svetainės ekrano nuotraukas prieš pridedant jas prie klaidos pranešimo ar dokumentacijos puslapio.
- Suspaudžiant logotipą ar piktogramų rinkinį svetainei, neprarandant permatomo fono, nuo kurio priklauso kūrėjai.
- Mažinant sąsajos maketų eksporto iš dizaino įrankių dydį prieš dalijantis su komanda.
- Sumažinant sąsajos grafikos paketo dydį stiliaus vadovui ar dizaino sistemos saugyklai.
Dažniausiai užduodami klausimai
Kaip galima toliau suspausti be nuostolių formatą?
Padarant jį šiek tiek nuostolingu protingu būdu: kvantizacija parenka ~256 spalvas, kurios geriausiai atspindi vaizdą, ir kiekvieną pikselį priskiria vienai iš jų. Grafikai su ribotu spalvų diapazonu rezultatas atrodo vizualiai identiškas — techniškai nuostolingas, praktiškai nepastebimas.
Ar skaidrumas išliks po suspaudimo?
Taip — alfa kanalas išsaugomas, įskaitant iš dalies permatomus pikselius (šešėlius, glotninimo kraštus). Būtent to reikia logotipams ir sąsajos elementams.
Kada PNG suspaudimas veikia prastai?
Nuotraukose ir tolygiuose gradientuose — jose naudojami tūkstančiai spalvų, tad 256 gali sukelti juostinį efektą (banding). Foto turiniui konvertavimas į JPG ar WebP sutaupo kur kas daugiau; tam ir skirtas mūsų PNG į JPG keitiklis.
Kuo tai skiriasi nuo TinyPNG?
Ta pati pagrindinė technika (palečių kvantizacija), panašus sutaupymas. Praktiniai skirtumai: jūsų failai čia niekada neįkeliami, nėra 20 failų paketo apribojimo, nėra 5 MB limito ir nėra mokamo plano — nes darbą atlieka ne serveris.
Kokį spalvų skaičių pasirinkti?
Pradėkite nuo 256 — vizualiai identiška beveik visai grafikai. Sumažinkite iki 64 ar 32 piktogramoms ir paprastiems sąsajos elementams, kad sutaupytumėte dar daugiau; stebėkite peržiūros miniatiūrą dėl juostinio efekto.