CodeKitHubMi ez az eszköz?
A PNG veszteségmentes, ezért nincs "minőség" beállítása, amit csökkenteni lehetne — a naiv újrakódolás alig segít. A valódi PNG tömörítés másképp működik: a palettakvantálás egy gondosan kiválasztott színkészletre (akár 256-ra) csökkenti a képet. Mivel a képernyőfotók, logók és felhasználói felület grafikák ritkán használnak ennél több különböző színt, a fájl 50–70%-kal kisebb lesz, miközben ugyanúgy néz ki. Az átlátszóság (az alfa csatorna) teljesen megmarad.
Ez a technika áll a jól ismert szolgáltatások, például a TinyPNG mögött is — a különbség itt az, hogy ez a böngésződben fut egy nyílt forráskódú motoron keresztül, így a képeid az eszközödön maradnak, és nincs napi fájlkorlát.
Miért érdemes használni?
- Valódi tömörítés (tipikusan 50–70%), nem egy hatástalan újrakódolás.
- Megmarad az átlátszóság — biztonságos logókhoz, ikonokhoz és felhasználói felület elemekhez.
- Nincs feltöltés, ellentétben a TinyPNG-szerű szolgáltatásokkal — így nincs fájlszám-korlát sem.
- Állítható színkeret (16–256), képenkénti megtakarítás megjelenítésével.
- Kötegelt támogatás, ingyenes, vízjel nélkül.
Használati útmutató
- Húzd a PNG fájlokat a mezőre (a tömörítő motor automatikusan betöltődik, egyszer).
- Tartsd meg a 256 színt vizuálisan azonos eredményekhez, vagy csökkentsd kisebb fájlokért.
- Minden eredmény megmutatja a pontos megtakarítást — kattints a Letöltésre.
- Ha egy fotószerű PNG nem tömörödik eléggé, alakítsd inkább JPG-vé (lásd a PNG-JPG átalakítót).
Példa
Bemenet
app-screenshot.png — 980 KBKimenet
app-screenshot-compressed.png — 290 KB (−70%), 256 színA képernyőfotók és felhasználói felület grafikák gyönyörűen kvantálódnak; a paletta lefedi minden ténylegesen használt színüket.
A saját teszteléseinkből
Az indulási tesztünk egy szándékosan barátságtalan képet használt: egy 600×400-as PNG-t 200 átfedő, félig átlátszó színfolttal — sokkal zavarosabbat egy tipikus képernyőfotónál. 31,1 KB-ról 7,8 KB-ra kvantálódott (−75%) 256 szín mellett, az alfa csatorna sértetlenül. A valós felhasználói felület grafikák még jobban tömörödnek, mert kevesebb különböző színt használnak, mint a stressztesztünk. Az őszinte árnyoldal, amit szintén megerősítettünk: a fotós tartalom látható sávozódást mutat 256 szín mellett — ekkor érdemes inkább a JPG/WebP útvonalat választani, ezért is találhatók az átalakítóra mutató linkek egy szakasszal feljebb.
Gyakori felhasználási esetek
- Alkalmazás- vagy weboldal-képernyőfotók zsugorítása, mielőtt egy hibajelentéshez vagy dokumentációs oldalhoz csatolnád őket.
- Egy logó vagy ikonkészlet tömörítése egy weboldalhoz, anélkül hogy elveszítenéd az átlátszó hátteret, amelyre a fejlesztők számítanak.
- Tervezőeszközökből exportált felhasználói felület makettek méretének csökkentése, mielőtt megosztanád őket a csapattal.
- Egy felhasználói felület grafikai köteg súlyának csökkentése egy stíluskalauzhoz vagy tervezési rendszer tárolóhoz.
Gyakori kérdések
Hogyan lehet tovább tömöríteni egy veszteségmentes formátumot?
Úgy, hogy okos módon kissé veszteségessé tesszük: a kvantálás kiválasztja a képet legjobban reprezentáló ~256 színt, és minden pixelt ezekhez rendel. Korlátozott színtartományú grafikáknál az eredmény vizuálisan azonos — technikailag veszteséges, gyakorlatilag megkülönböztethetetlen.
Túléli az átlátszóság a tömörítést?
Igen — az alfa csatorna megmarad, beleértve a félig átlátszó pixeleket is (árnyékok, élsimított szélek). Pontosan ez az, amire a logóknak és felhasználói felület elemeknek szükségük van.
Mikor működik rosszul a PNG tömörítés?
Fényképeken és sima színátmeneteken — ezek több ezer színt használnak, így a 256 sávozódást (bandinget) mutathat. Fotós tartalomhoz a JPG-re vagy WebP-re való átalakítás sokkal többet takarít meg; erre való a PNG-JPG átalakítónk.
Miben különbözik ez a TinyPNG-től?
Ugyanaz az alapul szolgáló technika (palettakvantálás), hasonló megtakarítás. A gyakorlati különbségek: a fájljaid itt soha nem kerülnek feltöltésre, nincs 20 fájlos kötegkorlát, nincs 5 MB-os korlát, és nincs fizetős csomag — mert nincs szerver, amely a munkát végezné.
Milyen színszámot válasszak?
Kezdd 256-tal — ez a legtöbb grafikánál vizuálisan azonos. Csökkentsd 64-re vagy 32-re ikonoknál és egyszerű felhasználói felület elemeknél a további megtakarításhoz; figyeld az előnézeti bélyegképet a sávozódás jeleiért.