Hogyan működik a böngészőalapú képtömörítés
Minden tömörítési lépés a böngésződben fut. JPEG és PNG esetén a böngésző beépített Canvas API-ja végzi a kódolást. WebP esetén Safarin és AVIF esetén minden böngészőben a lap egy könnyűsúlyú WebAssembly kodecket tölt be igény szerint — még mindig lokálisan, a képek sosem hagyják el az eszközt.
- Minden feltöltött fájl beolvasása Blobként, és egy objektum URL létrehozása, hogy a böngésző lokálisan dekódolhassa anélkül, hogy bájtokat másolna egy szerverre vagy írna lemezre.
- A dekódolt kép kirajzolása egy képernyőn kívüli Canvas elemre az eredeti pixelméretben, készen az újrakódolásra.
canvas.toBlob(callback, mimeType, quality)hívása a pixelek újrakódolásához JPEG, PNG és Chrome/Firefox WebP esetén. Safari WebP és AVIF kódoláshoz egy WebAssembly kodek worker töltődik be első használatkor és egy háttérszálon végzi a kódolást. Minőségi módban a csúszka értéke közvetlenül a kódoló kvantálási beállításához rendelődik; célméret módban az oldal felezi a minőségi értéket, amíg a kimeneti blob belefér a bájtkeretbe.- Egy előtte/utána kimutatás megjelenítése az eredeti mérettel, a tömörített mérettel és a megtakarítás százalékával, majd egy képenkénti letöltés vagy egyetlen ZIP a teljes köteghez. A ZIP memóriában készül az fflate segítségével, egy 8 KB-os könyvtárral, ami első használatkor töltődik be.
Miért érdemes képeket tömöríteni?
- A kisebb képek gyorsabban betöltődnek. Egy 4 MB-os hős kép 600 KB-ra csökkentése közvetlenül javítja a Largest Contentful Paint értéket, ami az egyik Core Web Vitals, amit a Google a rangsoroláshoz használ. Több fényképet tartalmazó oldalakon a megtakarítás összeadódik és gyorsabb első festést eredményez.
- Aztán ott vannak a feltöltési korlátok. Rengeteg CMS platform, ticketing eszköz és e-mail rendszer elutasít bármit, ami 1-2 MB-nál nagyobb, és egy gyors tömörítési lépés a korlát alá szorítja a fotót anélkül, hogy megnyitnál egy teljes szerkesztőt.
- A sávszélesség és a tárolás pénzbe kerül nagy léptékben. WebP szállítása 0.8-as minőségen a teljes méretű PNG helyett harmadával vagy még többel csökkentheti a képterhelést, ami alacsonyabb CDN kimenő forgalmi számlákat és mobilos adathasználatot jelent a látogatóid számára.
- Néhány képet egyáltalán nem szabad feltölteni. Mivel itt minden a böngésződben fut, azonosítókártya szkennelések, orvosi képek és belső képernyőképek az eszközödön maradnak. Nincs harmadik féltől származó szerver, mint a TinyPNG, ami miatt aggódni kellene.
Gyakori felhasználások
Tömörítés akkor merül fel, amikor egy kép nagyobb, mint a hely, ahová szánják. Három mintát látunk újra és újra.
- Termékfotók előkészítése egy online áruházhoz. JPEG eredetik tömörítése 0.8-as minőségre (vagy 200 KB-os célra), hogy az áruház gyors maradjon és teljesítse a Core Web Vitalseket mobilon.
- Képernyőképek zsugorítása, mielőtt egy hibakövetőhöz vagy wikibe csatolnád. Egy köteg PNG felvétel JPEG-re konvertálva 0.85-ös minőségen gyakran tíz megabájtokról pár megabájtra csökken.
- Fotó méretének csökkentése egy feltöltési korlát alá — egy álláspályázati portál, ami elutasítja az 1 MB-nál nagyobb fájlokat, egy e-mail rendszer szoros csatolmánykorláttal, vagy egy fórum avatar, aminek bele kell férnie egy bájtkeretbe.
Egy gyakorlati példa: 4 MB-os JPEG 400 KB-ra
Egy 4 MB-os JPEG közvetlenül egy telefon kamerájáról gyakori terhelés, ami feltöltési korlátokba ütközik és lassítja az oldalakat. Ez egy jó benchmark arra, hogy a tömörítés mennyit spórol.
Dobd a JPEG-et a feltöltési zónába, hagyd a formátumot JPEG-en, és vagy húzd le a minőségi csúszkát 0.7-re, vagy válts célméret módba és írd be a 400 KB-ot. Minőségi módban a Canvas pipeline egyszer kódol újra és mutatja az eredményt, jellemzően 500-700 KB körül a fotótól függően. Célméret módban az oldal kipróbál néhány minőségi értéket, megállapodik a legmagasabbnál, ami még belefér 400 KB-ba, és jelzi a megtakarítás százalékát. Kattints a Letöltés gombra a kártyán az egyetlen fájl letöltéséhez, vagy a .zip letöltése gombra, ha egyszerre több képet tömörítettél. A teljes kör gyorsabban lefut, mint egy másodperc egy ekkora képnél, és nulla sávszélességet használ, miután az oldal betöltődött.
Mi a különbség a minőségi mód és a célméret mód között?
A minőségi mód egyetlen csúszkát ad 0.1-től 1.0-ig, ami a JPEG vagy WebP kódoló kvantálási beállításához rendelődik — alacsonyabb számok kisebb fájlokat és láthatóbb műtermékeket jelentenek. A célméret mód megfordítja a problémát: megadsz egy méretet kilobájtban, és az oldal felezi a minőségi értéket, többször kódolva, amíg megtalálja a legmagasabb minőséget, ami még a kereten belül van. A célméret akkor praktikus, ha egy szigorú korlát számít (például 1 MB-os feltöltési korlát); a minőségi mód gyorsabb és jobb, ha csak kiszámítható vizuális eredményt szeretnél. A PNG veszteségmentes, így egyik mód sem alkalmazható rá.
Ez az eszközömön történik?
Igen, teljes mértékben. Az oldal a böngésző natív Canvas API-ját és a Web File API-t használja a kép dekódolásához és újrakódolásához memóriában. Semmilyen képadat nem kerül szerverre, nincs ideiglenes feltöltés, nincs felhőbeli oda-vissza út. Ellenőrizheted: nyisd meg a DevTools-t, válts a Network panelre, és futtass egy tömörítést. Az egyetlen kimenő kérés a kezdeti oldalbetöltés és a hirdetési hívások lesznek. Semmi képszerű nem hagyja el a lapot.
Miért csökken alig a PNG tömörítésekor?
A PNG veszteségmentes formátum, így a Canvas API nem dobhat el részleteket a kisebb méret érdekében — csak újracsomagolhatja ugyanazokat a pixeleket. Fényképek esetén a PNG már eleve nagy, és a veszteségmentes újrakódolás alig spórol. A valódi nyereség akkor jön, ha a kimeneti formátumot JPEG-re vagy WebP-re váltod, amelyek veszteséges tömörítést használnak, ami a fotókhoz illik, és rutinszerűen 4-10-szer kisebb méretet érnek el. Tartsd meg a PNG-t csak akkor, ha veszteségmentes minőségre vagy átlátszóságra van szükséged; egyébként válassz JPEG-et fotókhoz vagy WebP-t a legjobb méret-minőség egyensúlyhoz.
Melyik formátumot válasszam?
Fényképekhez a WebP 0.8-as minőségen adja a legjobb méret-minőség egyensúlyt, és minden 2021 óta kiadott böngésző támogatja; a JPEG a biztonságos univerzális tartalék, ha a cél régebbi vagy szigorúbb. Válassz PNG-t csak akkor, ha veszteségmentes minőségre vagy alfa csatornára van szükséged — vonalas rajzok, UI képernyőképek, logók átlátszósággal. Ha az oldalsebesség optimalizálása a cél és a közönséged modern böngészőket használ, a WebP majdnem mindig a jó választás; ha egy régi CMS-t vagy egy WebP-t elutasító nyomdai csatornát táplálsz, maradj a JPEG-nél.
Dobd be a képeidet, válassz minőségi szintet vagy célméretet, tömöríts. Minden a lapodon fut. Nincs feltöltés, nincs fiók, nincs várakozás szerver sorban.