CodeKitHubMiért érdemes használni?
- Nyaralási fotókat töltesz fel egy weboldalra vagy e-mailbe, és a postafiók elutasítja a 25 MB feletti mellékletet — kötegelt módban egyszerre 40 fotót kicsinyítesz le anélkül, hogy egyenként töltenéd fel egy idegen szerverre.
- Webshopot üzemeltetsz, és a fényképezőgépből származó termékfotók egyenként 6 MB-ot nyomnak, ami lassítja az oldalbetöltést — WebP-re tömöríted őket 200 KB alá, és a Core Web Vitals egyik napról a másikra javul.
- Érzékeny dokumentumokat vagy még ki nem adott terveket fotózol le, és nem szeretnéd egy ismeretlen felhőszerverre küldeni csak a kicsinyítés miatt — itt minden a böngésződben történik, a kép sosem megy sehova.
- Régi PNG screenshotjaid vannak a dokumentációból, amelyek feleslegesen sokat nyomnak — megtartod PNG-ként az éles szöveg miatt, de csökkented a méretét, ami sokkal többet spórol, mint a minőség változtatása.
- Egy fotót küldenél WhatsAppon vagy Messengeren, ahol az alkalmazás úgyis a saját módján tömöríti a képet — előre magad tömöríted, hogy te szabályozd a végső minőséget az automatikus alkalmazás-tömörítés helyett.
Gyakori kérdések
A tömörítés elrontja a képeim kinézetét?
70–85%-os minőségen a különbségek gyakorlatilag láthatatlanok képernyőn nézett fotóknál. Látható hibák kb. 50% alatt jelennek meg. A szövegdús képernyőképek kivételt jelentenek — hamarabb mutatnak hibákat JPG-ben; ezeknél próbáld a WebP kimenetet, vagy tartsd a minőséget 85% felett.
Van fájlméret- vagy darabszám-korlát?
Nincs. Mivel a tömörítés az eszközödön fut, nem egy szerveren, nincs mit korlátozni — tömöríts egy 50 MB-os képet, vagy 100 képet egy kötegben. A nagyon nagy képek csak kicsit tovább tartanak.
Feltöltésre kerülnek a képeim valahová?
Nem. A fájlokat teljesen a böngésződ olvassa be és kódolja újra a HTML5 canvas API segítségével. Betöltheted ezt az oldalt, offline mehetsz, és tovább tömöríthetsz.
JPG-t vagy WebP-t válasszak kimenetnek?
A WebP jellemzően 25–35%-kal kisebb azonos vizuális minőségen, és minden modern böngészőben működik — a legjobb weboldalakhoz. A JPG mindenhol megnyílik, beleértve régi szoftvereket és nyomtatókat is — a legjobb megosztáshoz és e-mailhez. Ha kételkedsz, válaszd a JPG-t.
Miért lett a PNG-m ennyivel kisebb?
A PNG veszteségmentes, ami drága fotóknál — egy fényképszerű PNG gyakran 5–10×-szer nagyobb, mint egy vizuálisan azonos JPG. A fotó-PNG-k JPG/WebP-vé alakítása adja a legnagyobb megtakarítást. A PNG-t csak olyan grafikákhoz tartsd meg, amelyeknek átlátszóságra vagy borotvaéles szélekre van szükségük.
Miért nagyobb néha a kimenet, mint az eredeti?
Ha a kép már erősen tömörített volt, az újrakódolás nem segít, és bájtokat adhat hozzá. Az eszköz jelzi, ha ez történik — ilyenkor egyszerűen tartsd meg az eredetit.
Mi a különbség a veszteséges és a veszteségmentes tömörítés között?
A veszteséges tömörítés (JPG, WebP alacsony minőségen) tartósan eldob némi képadatot a kisebb méret érdekében — ezért van minőségi csúszka. A veszteségmentes tömörítés (PNG, WebP veszteségmentes módban) egyetlen képpont megváltoztatása nélkül csökkenti a fájlméretet, de a megtakarítás sokkal kisebb, jellemzően csak 10-30% fotografikus tartalomnál. Fotóknál a veszteséges tömörítés éri meg, éles szélű grafikánál a veszteségmentes.
Megtartja a tömörített kép az EXIF-metaadatokat (GPS-hely, kamera modellje, dátum)?
Nem — ez az eszköz az újrakódolás során eltávolítja az EXIF-metaadatokat, mivel a böngésző canvas API-ján keresztüli mentés mellékhatásaként ezek nem íródnak vissza. Ez valójában privacy szempontból előny: ha telefonos fotót osztasz meg, a fotó GPS-koordinátái automatikusan nem jutnak el a címzetthez.
Át tudom alakítani ezzel az eszközzel PNG-t JPG-vé, vagy JPG-t WebP-vé?
Igen — a kimeneti formátumot a bemenettől függetlenül választod ki. Feltöltesz egy PNG-t és JPG vagy WebP kimenetet választasz, az eszköz a tömörítéssel egyszerre elvégzi a formátumkonverziót is. Ne feledd, hogy a PNG-ből JPG-be konvertálás eltávolítja az átlátszóságot (alfa csatorna), mivel a JPG ezt nem támogatja.
Mi ez az eszköz?
Egy képtömörítő csökkenti a fájlméretet a kép hatékonyabb (veszteséges) beállításokkal való újrakódolásával. Egy telefonos fotó gyakran 3–8 MB; egy weboldalhoz, chatüzenethez vagy e-mailhez általában 200–500 KB is ugyanúgy néz ki képernyőn. A kisebb képek gyorsabban töltődnek fel, gyorsabban töltődnek be, és tárhelyet és sávszélességet takarítanak meg.
Ez az eszköz a böngésző saját kodekjével újrakódolja a képeket a választott minőségen, opcionálisan lekicsinyítve a nagyon nagy képeket egy ésszerű maximális szélességre — ez a két kapcsoló számít a legtöbbet a fájlméret szempontjából. A tömörítés erőssége és a látható minőség mindig kompromisszum; az élő előtte/utána méretek segítenek megtalálni az arany középutat minden képhez.
Formátum-összehasonlítás: JPG vs WebP vs PNG méret szerint
Ugyanaz a fotó, ugyanaz a vizuális minőség, három nagyon eltérő méret: a PNG a nehézsúlyú (veszteségmentes — fotóknál gyakran 5–10×-szer nagyobb, mint a JPG), a JPG az univerzális középút, a WebP jellemzően 25–35%-kal a JPG alatt landol. Így egy fotó tömörítési hierarchiája: először térj el a PNG-től, majd válaszd a JPG-t kompatibilitásért, vagy a WebP-t minimális méretért.
Grafikáknál fordul a helyzet: képernyőképeknél, logóknál és egyszínű UI-képeknél egy palettakvantált PNG általában felülmúlja a JPG-t méretben és élességben is — a JPG fotográfiai tömörítése elmossa az éles éleket. Erre az esethez van egy saját eszköz alább.
| Tartalomtípus | Legjobb formátum | Miért |
|---|---|---|
| Fotók webhez/e-mailhez/chathez | WebP (vagy JPG kompatibilitásért) | A veszteséges tömörítés illik a fotográfiai részletekhez; a WebP 25–35%-kal kisebb, mint a JPG azonos minőségen. |
| Képernyőképek, logók, egyszínű UI | PNG | Veszteségmentes — a JPG fotográfiai tömörítése elmossa az éles szöveget és a kemény éleket. |
| Átlátszóságot igénylő képek | PNG vagy WebP | A JPG-nek nincs alfa csatornája; a PNG és a WebP is támogatja az átlátszó hátteret. |
| Maximális kompatibilitás (régi szoftverek, nyomtatók) | JPG | Az 1990-es évek óta univerzálisan támogatott; a WebP támogatás újabb, bár mára szinte univerzális a böngészőkben. |
Teljesítménnyel kapcsolatos megjegyzések
- Méretezz át, mielőtt erősebben tömörítenél: a méretek 4000px-ről 1920px-re csökkentése kb. 77%-kal kevesebb képpontot jelent — semmilyen minőségi csúszka nem versenyezhet ezzel.
- A kötegelt feldolgozás egymás után fut a processzorodon; száz telefonos fotó néhány percet vesz igénybe egy laptopon. Semmi sem várakozik egy szerveren, így ez általában még mindig gyorsabb, mint a feltöltés-alapú oldalak — és offline is működik.
- A −% szám a visszajelzésed: ha egyszámjegyű, a kép már optimalizált volt, és a további minőségcsökkentés inkább ront a kinézeten, mint segít a méreten.
- Webes publikáláshoz célozz ≤200 KB-ot a tartalomképekhez és ≤500 KB-ot a teljes szélességű hero-képekhez; ezek a keretek kényelmesen tartják a Core Web Vitals-t mobilkapcsolaton.
Mi történik az adataiddal tömörítés közben
- A kép betöltődik a böngésző memóriájába és újrarajzolódik egy HTML5 canvasre, amely aztán a választott minőség szerint exportálja az új fájlt — a teljes folyamat JavaScriptben zajlik az eszközödön, nincs szerverre való feltöltés.
- Az EXIF-metaadatok (GPS, kamera modellje, időbélyeg) ennek a folyamatnak a során nem kerülnek át a kimenetbe, ami a nyilvános fotómegosztásnál inkább privacy előny, mint hátrány.
- A kép színprofilja (sRGB) megmarad, így a színek tömörítés után ugyanúgy néznek ki, mint az eredetiben szokásos képernyőkön.
- A böngészőfül bezárása után semmilyen nyom nem marad a feldolgozott képekből — semmi nem kerül szerveroldali gyorsítótárba, mert szerver sosem látta a képet.
A saját tesztelésünkből
Mielőtt élesítettük volna ezt az eszközt, generált tesztképeken futtattuk, és képpontról képpontra ellenőriztük a kimenetet, nem csak szemmel. Egy 3000×2000-es, sokszínű PNG 140 KB-ról 94 KB-ra (−33%) csökkent 75%-os minőségen az 1920px-es korláttal — és mivel a tesztkép szintetikus volt, ellenőrizni tudtuk, hogy egyetlen képpont sem tért el jobban, mint a JPG kodek elvárt tűréshatára. Azt is megerősítettük, hogy a már optimalizált fájlra figyelmeztető üzenet helyesen aktiválódik ahelyett, hogy csendben nagyobb fájlt hozna létre: adj neki egy erősen tömörített JPG-t, és azt mondja, tartsd meg az eredetit, ahelyett hogy úgy tenne, mintha segített volna.
Használati útmutató
- Húzd a képeket a dobozra (vagy kattints a kiválasztáshoz) — JPG, PNG és WebP támogatott.
- Állítsd be a minőséget: 75% jó egyensúly; csökkentsd 60%-ra a maximális megtakarításhoz.
- Válassz egy maximális szélességet — 1920px bőven elég teljes képernyős webhasználathoz.
- Válaszd a JPG-t (univerzális) vagy a WebP-t (kisebb, minden modern böngészőben) kimenetnek.
- Kattints a Letöltés gombra minden eredmény mellett. A méret és a százalékos megtakarítás fájlonként látható.
Példa
- Bemenet
phone-photo.jpg — 4,20 MB, 4032×3024- Kimenet
phone-photo-compressed.jpg — 0,48 MB (−89%), 1920×1440
1920px-re átméretezve és 75%-os minőségben újrakódolva: bármely képernyőn vizuálisan azonos, 9×-szer kisebb.