# 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](https://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

1. Nyisd meg a [squoosh.app](https://squoosh.app/) oldalt.
2. Húzd a képet az ablakra (**Drop**), vagy illeszd be vágólapról (**Paste**).
3. 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

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

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

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)

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

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

### 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](https://hub.hellowp.io/hu/knowledge-base/useful-tools/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:

```php title="functions.php"
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

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

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](https://hub.hellowp.io/hu/docs/hellotools/helloimg/) való: a feltöltött képeket WebP-re (vagy AVIF-re) konvertálja a WordPress-oldalon.

## 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

- [Squoosh](https://squoosh.app/)
- [Squoosh a GitHubon](https://github.com/GoogleChromeLabs/squoosh)
- [big_image_size_threshold (WordPress referencia)](https://developer.wordpress.org/reference/hooks/big_image_size_threshold/)
- [WebP-támogatás a WordPress 5.8-ban](https://make.wordpress.org/core/2021/06/07/wordpress-5-8-adds-webp-support/)