Squoosh: képtömörítés a böngészőben
A Squoosh a böngészőben tömöríti és méretezi át a képet, a feltöltés előtt, és közben a kép nem hagyja el a gépedet.
A Squoosh a Google Chrome Labs képtömörítő webalkalmazása. A squoosh.app oldalon a böngészőben csökkented a kép fájlméretét, különböző formátumok közül választva. WordPress-fejlesztésben arra jó, hogy a médiatárba kerülő képet előtte a kellő méretre és formátumra hozd, vagy hogy egy-egy kép különböző beállításait kipróbáld.
A projekt README-je szerint: „Squoosh does not send your image to a server. All image compression processes locally.” Az oldal is ezt írja: a képek nem hagyják el az eszközödet, mert a Squoosh a munkát helyben végzi. Ügyfél képét tehát nem töltöd fel idegen szerverre.
Kép betöltése
Szekció neve “Kép betöltése”- Nyisd meg a squoosh.app oldalt.
- Húzd a képet az ablakra (Drop), vagy illeszd be vágólapról (Paste).
- Kipróbálhatod egy mintaképpel is, ezek az Or try one of these: felirat alatt vannak.
Összehasonlítás és beállítás
Szekció neve “Összehasonlítás és beállítás”A betöltés után a Squoosh az eredeti és a tömörített képet is mutatja, így a változást szemmel ellenőrizheted. A beállításokat a kép két oldalán külön állíthatod, így két különböző beállítást is összevethetsz.
Mindig nézd meg a képet nagyítva is, nemcsak a fájlméretet. Az alacsony minőség foltosodást okoz, főleg sima felületeken és arcokon.
Formátum
Szekció neve “Formátum”A forráskód szerint a Squoosh ezeket a kimeneti formátumokat kínálja:
| Felületfelirat | Fájlkiterjesztés |
|---|---|
| MozJPEG | .jpg |
| WebP | .webp |
| AVIF | .avif |
| OxiPNG | .png |
| JPEG XL (beta) | .jxl |
| WebP v2 (unstable) | .wp2 |
A böngésző saját JPEG, PNG és GIF kódolója is elérhető. A béta és instabil jelölésű formátumokat ne használd éles oldalon, a böngészők nem támogatják őket.
Minőség
Szekció neve “Minőség”A Quality csúszka 0 és 100 között állítható. Alacsonyabb érték kisebb fájlt ad, de romlik a kép. Fotónál a WebP vagy a MozJPEG a jó kiindulópont, logónál és ábránál az OxiPNG vagy a WebP a Lossless kapcsolóval.
A WebP beállításai közt van az Effort (0 és 6 között): minél magasabb, annál tovább tart a tömörítés. A Lossless bejelölésével veszteségmentes módba váltasz. Az Advanced settings alatt további finomhangolás van, a Preserve transparent data az átlátszó részek adatát őrzi meg.
Átméretezés (Resize)
Szekció neve “Átméretezés (Resize)”A Resize kapcsolóval méretezheted át a képet.
- Width és Height: a méret pixelben. A Maintain aspect ratio bejelölve az arány megmarad.
- Preset: százalékos előbeállítás (például 50%) vagy Custom.
- Method: az átméretezés módja, például Lanczos3, Mitchell vagy Triangle (bilinear). Fotónál az alapértelmezés jó.
- Fit method (ha az arányt nem tartod meg): Stretch vagy Contain.
Letöltés
Szekció neve “Letöltés”A tömörített képet a felületen lévő letöltési lehetőséggel mentheted el, mindig a megfelelő oldalét. Töltsd fel a fájlt a WordPress médiatárába, és ellenőrizd az oldalon.
WordPress-specifikus tudnivalók
Szekció neve “WordPress-specifikus tudnivalók”Mekkora képet tölts fel?
Szekció neve “Mekkora képet tölts fel?”A WordPress a feltöltött képből kisebb méreteket is generál. A big_image_size_threshold szűrő a WordPress hivatalos referenciája szerint alapértelmezetten 2560 pixel: ha a kép szélessége vagy magassága ennél nagyobb, a WordPress lekicsinyíti, és a kicsinyített változat lesz a legnagyobb elérhető méret. A szűrő a WordPress 5.3.0 óta van meg.
Ebből a gyakorlatban ez következik:
- Nincs értelme 2560 pixelnél nagyobb képet feltölteni, a WordPress úgyis lekicsinyíti.
- Ha tudod, hogy a képet legfeljebb mekkora helyen jeleníti meg a téma, méretezd át előre arra (a Resize résznél), és csak utána töltsd fel.
- Az átméretezett, tömörített kép gyorsítja az oldalt, ezt a GTmetrix mérésén is látni fogod, például az LCP értéknél.
A küszöböt szükség esetén kikapcsolhatod, ha a szűrő false értéket ad vissza:
add_filter( 'big_image_size_threshold', '__return_false' );A WordPress referenciájának egy hozzászólása szerint egyes esetekben későbbi prioritás kell hozzá, például 100.
WebP a WordPressben
Szekció neve “WebP a WordPressben”A WordPress 5.8 óta a WebP képet feltöltheted és használhatod úgy, mint a JPEG-et vagy a PNG-t. Ehhez a szerver képkönyvtárának támogatnia kell a WebP-t: Imagick vagy LibGD WebP-támogatással. Ha ez nincs meg, a feltöltés hibát ad. A WordPress bejelentése szerint az animált és az átlátszó (alfa) WebP-nek az átméretezett változata nem támogatott, ilyenkor veszteséges változat készül.
Az AVIF-ről az 5.8-as bejelentés csak jövőbeli lehetőségként ír. A mai AVIF-támogatást a WordPress saját dokumentációjában ellenőrizd, mielőtt AVIF-et töltesz fel.
Ha sok kép van
Szekció neve “Ha sok kép van”A Squoosh egy kép egy lépésben dolgozik, kézi munkára való. Ha a médiatár képeit tömegesen kell optimalizálni, ahhoz a HelloIMG való: a feltöltött képeket WebP-re (vagy AVIF-re) konvertálja a WordPress-oldalon.
Mire figyelj
Szekció neve “Mire figyelj”- Az eredetit tartsd meg, a tömörített képet másik néven mentsd. A veszteséges tömörítést nem lehet visszacsinálni.
- A Squoosh a README szerint Google Analyticset használ: gyűjti a látogatói alapadatokat, a kép mérete előtte és utána, a PWA-nál pedig a telepítés típusát és idejét. A kép tartalmát nem küldi el.
- Böngészőben fut, ezért nagyon nagy képnél lassú lehet.
Hasznos linkek
Szekció neve “Hasznos linkek”Készült: