Képoptimalizálás alapjai, WebP és tárhelymegtakarítás

Mi a képoptimalizálás?

A képoptimalizálás a kép fájlméretének csökkentése úgy, hogy a megjelenése alig változik. A kisebb képek gyorsabban betöltődnek, ezért az oldal is gyorsabb lesz. A WP Compress három módon dolgozik, és a látogatónak mindig a megfelelő változatot szolgálja ki:

1. Tömörítés: a felesleges adatok elhagyásával kisebb lesz a fájl.
2. Átméretezés: a kép mérete igazodik ahhoz a mérethez, amelyen az oldalon ténylegesen megjelenik.
3. Megfelelő képformátum: a JPEG fényképekhez, a PNG átlátszó hátterű vagy kevés színű ábrákhoz való. A WebP ugyanazt a minőséget kisebb fájlmérettel adja.

Mi a WebP?

A WebP a Google által fejlesztett képformátum. A hasonló JPEG- vagy PNG-képeknél jellemzően 25-34%-kal kisebb, miközben a minőség nem romlik látványosan. Előnyei:

• gyorsabb betöltés, mert kevesebb adatot kell letölteni,
• jobb felhasználói élmény, mert a gyors oldalon a látogatók tovább maradnak,
• jobb keresőoptimalizálási esélyek, mert a keresők figyelembe veszik az oldal sebességét,
• kisebb sávszélesség-használat, ami főleg mobilon és korlátozott adatcsomagnál számít.

Miért nem WebP a háttérkép?

A háttérképek általában CSS-fájlokban vannak megadva, és a böngészők nem mindenhol támogatják bennük egységesen a WebP-t. Ilyenkor gyorsabb és kompatibilisebb a nem WebP képet betölteni, mint menet közben átírni a CSS- vagy JavaScript-fájlokat. Az átírás ráadásul nem mindenhol működne (például háttérkép-csúszkában). Miután a kép bekerült a CDN gyorsítótárába, a sebességkülönbség gyakorlatilag elhanyagolható.

Ha a háttérképek mobilon homályosak, lásd: Homályos háttérképek javítása mobilon.

Tárhelymegtakarítás

A WP Compress a képek helyfoglalását is csökkenti. A beállítás:

1. Telepítsd a WP Compress bővítményt a webhelyre.
2. Nyisd meg a WP Compress felületét, és válaszd az Image Optimization (képoptimalizálás) lapot.
3. Válaszd ki a tömörítési beállításokat aszerint, mennyi helyet szeretnél megtakarítani.
4. Indítsd el az optimalizálást.

Egy átlagos feltöltési mappán mért eredmények:

Tömörítés	Eredeti méret	Tömörített méret	Megtakarított hely
Nincs tömörítés	67 MB	67 MB	0%
Tömörítve, WebP-vel	67 MB	45 MB	32,8%
Tömörítve, WebP nélkül	67 MB	25 MB	62,7%

Melyiket válaszd?

• WebP-vel: kisebb a tárhelymegtakarítás (32,8%), de az oldal gyorsabban töltődik a modern böngészőkben. Jó egyensúly a sebesség és a hely között.
• WebP nélkül: a legnagyobb a megtakarítás (akár 62,7%), de nem ad akkora sebességnövekedést. Akkor válaszd, ha elsősorban a tárhelyet akarod kímélni.

Ha csak a sebesség a fontos, használj WebP-t. Ha csak a helyfoglalás, kapcsold ki.