WebP képek használata WordPress oldalakon

Ha valaki WordPress alapon építi fel céges weboldalát, blogját, vagy online magazinját, előbb-utóbb szembetalálja magát a problémával, hogy egy összetett weboldal megfelelő sebességű működéséhez nem árt egy kicsit megbütykölni a motorház tető alatti részt. Viszont a WordPress lényege éppen az, hogy nem feltétlenül kell programozónak lenni ahhoz, hogy összerakjunk vele egy honlapot. Ami hiányzik belőle alapból, azt könnyedén kipótolhatjuk különféle beépülő modulokkal. A sebesség fokozásának egyik módja például egy jó minőségű cache plug-in telepítése, amely létrehozza a gyorsan letölthető változatát WordPress site-unk egyes aloldalainak: tömöríti a kódot, összevonja a szkripteket, CSS stílusokat, megoldja az előtöltést és még seregnyi más fontos beállítást elvégez, hogy az oldal a lehető leggyorsabban töltődhessen be a látogatóknál. De van még egy fontos lépés, amit meg kell tennünk a gyorsítás érdekében: optimalizálni kell a képek méretét. Ehhez pedig mostantól kiváló választás lehet a WebP képek használata WordPress oldalakon, igaz, azért egyelőre még körültekintően alkalmazva azokat.

Képek tömörítése WordPress oldalakon

A WordPress a képek feltöltésekor igyekszik valamennyire optimalizálni a dolgokat: az oldalon használt sablonnak megfelelően több variációt hoz létre a feltöltött képből, hogy például egy 200×200-as nézőképet ne kelljen minden alkalommal az eredeti, nagyobb felbontású változatból generálnia. Így egy feltöltött kép a szerveren valójában akár 10-15 változatban is pihenhet. Ez így rendben is lenne, azonban a WordPress alapból nem különösebben törődik a képek fájlméretének csökkentésével, ezért erről nekünk kell gondoskodnunk. Sajnos nem elég a feltöltésre kerülő képet optimalizálni (például ezzel az ingyenes szolgáltatással, vagy egy képszerkesztő programmal), hiszen ettől még a feltöltés után létrejövő képekkel ez nem történik meg automatikusan. A megoldást egy képoptimalizáló plug-in telepítése jelenti. Ilyen több is van, de maradva a cache példánknál, mi a Swift Performace kiegészítőt ajánljuk. 

Hasonlóan kategóriája többi megoldásához, ez a plug-in is alkalmas az összes létrejövő képváltozat automatikus optimalizálására, méghozzá több variációban: a JPG képek újratömörítéséhez több szint közül választhatunk, így beáldozhatjuk a képminőséget a brutál kicsi fájlméret végett, vagy maradhatunk mondjuk a mérsékelt tömörítésénél, ami nem rontja feltűnően a látványt, de a fájlméretet már érezhetően visszaveszi. Sőt, ami még ennél is jobb: létrehozhatunk WebP formátumú képeket a JPG képek helyett vagy mellett, amely sokkal hatékonyabban csökkenti a fájlméretet, miközben kevésbé rontja a képminőséget. Eddig ez a megoldás necces volt, mert nem minden böngésző volt alkalmas a WebP formátumú képek megjelenítésére. Mostantól viszont változik a helyzet.

Itt az idő: a WebP formátum támogatottsága

Maga a WebP formátum egyáltalán nem új, a Google még 2010-ben hívta életre. A cél az volt, hogy minél kisebb fájlméretet érjenek el, a képminőség romlása nélkül (lossless), vagy csak minimális minőségromlással (lossy). Ezt a WebP a kezdetektől fogva tökéletesen megvalósítja, csak éppen ott bukott el a dolog, hogy a böngészők meglehetősen lassan kezdték el támogatni. Márpedig ki a fene akar egy olyan formátumot használni, amelyik megjelenik a Chrome-ban és az Operában, de aztán se az Edge, se a Safari, se a Firefox nem tud vele mit kezdeni. Márpedig ez igen sokáig így volt.

Áthidaló megoldásként régóta rendelkezésre áll a lehetőség, hogy a WebP és a JPG/PNG formátumokat párhuzamosan használjuk egy-egy oldalon és a formátumot támogató böngésző a WebP, a többi pedig a régi JPG/PNG képeket hívja le. De még így sem volt vonzó sokáig az új képformátum a webfejlesztők számára. Mostanra viszont változott a helyzet, a Safari 14 megjelenésével (macOS Mojave és Catalina rendszerekre már telepíthető, az iOS 14 is tartalmazza, s a Big Surban is ez érkezik) az utolsó ellenálló is megadta magát, így az Edge, Firefox, Chrome, Opera, Safari böngészők aktuális verziói immár kivétel nélkül képesek a WebP képek megjelenítésére. Ez pedig hatalmas fegyvertény lehet a formátumnak, hiszen a Google is előnyben részesíti a WebP-t használó oldalakat (na jó, hivatalosan csak javasolja a használatát), a modern böngészők pedig mostantól nem jelentenek akadályt az átálláshoz. 

WebP képek használata WordPress oldalakon

Természetesen azokra sem árt gondolni egyelőre, akik még régebbi böngészőket használnak, így az átállásnál érdemes meghagyni a JPG/PNG képeket is, de immár jobban járunk, ha a WebP változatokat is létrehozzuk belőlük. Igaz, ezzel egyelőre plusz helyet vesztünk a szerveren, de épp a fájlméretek csökkentése végett ez nem olyan hatalmas, ráadásul nyerünk vele annyit, hogy megérjen akár egy minimális tárhely bővítést is.

Technikailag nem bonyolult, például a kepem.jpg kép mellé odapakoljuk szerverre a kepem.jpg.webp verziót (lehet máshogy, de így talán a leglogikusabb), majd vagy egy rewrite hivatkozással a .htaccess fájlban, vagy a <picture> elem megfelelő módosításával rávesszük a formátumot megemésztő böngészőket, hogy a WebP képet válasszák a JPG vagy PNG helyett az oldal letöltésekor. Ha viszont nincs programozói vénánk, érdemesebb erre a célra is segítségül hívni a Swift Performance plug-int, már csak azért is, mert a két fenti módszer beüzemelésén túl ez a képek konvertálását is elvégzi helyettünk.

Ezzel a képlet végképp leegyszerűsödik, a plug-in telepítése és konfigurálása után ugyanis egy kép feltöltésekor automatikusan létrejön a beállításunk mértékének megfelelően tömörített JPG vagy PNG, illetve mellette az optimális tömörítést használó WebP formátumú kép is. A böngésző pedig választhat ha erre felkészítették, ha pedig nem, akkor eleve csak a JPG és PNG képekhez nyúl majd. 

A beállítás nagyon egyszerű, s egy kis trükkel az utólagos átállás is könnyedén megoldható: a Swift Performance képes a képek utólagos optimalizálására is. 

Ha eddig nem használtunk semmilyen képoptimalizálót az oldalon, egyszerűen futtassuk le a plug-in sajátját, amely az általunk választott mértékben újratömöríti a JPG és PNG képeket, s ha bekapcsoltuk az opciót, létrehozza a WebP fájlokat is. Ha korábban már alkalmaztunk tömörítést, akkor az újratömörítésnél a JPG és PNG képekhez válasszuk a Veszteségmentes opciót, így azokat a plug-in nem fogja újratömöríteni, viszont létrehozza belőlük a WebP verziót. Utána az automatikus tömörítéshez már állítsunk be azért valamilyen mértékű JPG/PNG tömörítést is (legalább a Mérsékelt opciót). A WebP képek létrehozásához és használatához mindössze két opciót kell módosítanunk: a Generáljon WebP-t kapcsolót aktiválni, illetve a WebP használata opcióban az általunk preferált megjelenítési módot beállítani (rewrites vagy <picture> elem).

Mi is áttértünk ennek a cache plug-innek a használatára, s a fenti módszerrel a régi képekből is létrehoztunk WebP formátumot, illetve az új cikkek képei is automatikusan két változatban állnak rendelkezésre immár. Ennek köszönhetően az új képek JPG változatait is jobb minőségben élvezhetik olvasóink, a WebP-t támogató böngészőkben pedig már nálunk is a WebP formátumúak töltődnek le.

WebP formátum a webfejlesztők és üzemeltetők szempontjából

WebP formátumra való részleges vagy teljes átállás kétség kívül remek lehetőség arra, hogy jobb minőségű képeket jelenthessünk meg egy weboldalon, miközben a letöltési sebesség jobb lesz, hála a kisebb fájlmértnek. Egyelőre hátrány, hogy a képeket duplán kell tárolni a szerveren: nem kötelező persze, de szerintünk most még túl bátor lépés, hogy valaki teljesen elhagyja a JPG/PNG formátumokat és csak WebP-t használjon, hiszen nem minden felhasználó áll át azonnal a friss böngészőkre, rendszerekre. De mivel ezek tömörített képek, a helyfoglalás nem olyan mértékű, hogy ne érné meg a WebP támogatás beüzemelése.

Manuálisan biztosan extra macera, hogy meg kell oldanunk egy plusz konvertálást és figyelni a megjelenítés szabályozására, de WordPress esetén a Swift Performance vagy egy hasonló plug-in használatával ez a feladat teljes mértékben átruházható a rendszerre. Nem nekünk kell vele vacakolni, hanem megoldódik minden a háttérben.

A Firefox egyébként ellenőrzésre is jó választás, ugyanis a WebP formátumú képeket ajánlja fel képletöltésre, ha az oldalon az jelent meg. De a Chrome Developer Tools nézetében is ellenőrizhetjük, hogy a letöltés során tényleg a WebP formátumú képeink töltődnek-e be (fájltípus szerint rendezve a listát ez azonnal látható).

WebP formátum a látogatók szempontjából

A weboldalak látogatói számára a WebP átállás nem feltűnő lépés. A megoldást támogató böngészők mindenről gondoskodnak alapértelmezésben, így a felhasználó pont úgy látja majd az oldalt, ahogy addig, jó esetben legfeljebb a letöltés sebességének növekedését könyvelheti el.

Egyetlen bökkenő lehet: míg bizonyos böngészők megoldják egy kép letöltésekor WebP formátum helyett a JPG automatikus felajánlását, addig a akad olyan, amelyik letöltéshez is a WebP-t fogja felajánlani. Szerencsére a legutóbbi rendszerfrissítésekkel mind a Windows 10, mint a macOS képes már a WebP képek megnyitására, de ha valakinek mégis konvertálnia kell, támaszkodhat szinte bármelyik modern képszerkesztőre (például Adobe vagy Affinity termékek), vagy akár pár mozdulattal, extra program telepítése nélkül is konvertálhatja a WebP képeket JPG vagy PNG formátumba, a linkelt online konvertálóval.

Ne maradjon le erről sem!

Mint a legtöbb weboldal, mi is használunk sütiket az oldalon. Elfogadom Adatkezelési tájékoztató