Weboldalad készen áll, hogy a legmodernebb képformátumot használja? Útmutató lépésről-lépésre.
Manapság a weboldal betöltésének sebessége kritikus tényezővé vált. Ha 2-3 másodpercen belül nem tölt be az oldal, a felhasználó elhagyja az oldalt és keres egy olyan konkurens weboldalt, ahol a bűvös időkorláton belül találja meg a keresett megoldást.
Számos módszer létezik a websebesség javítására, illetve az úgynevezett webes vitalitás növelésére. Holott ez utóbbi már elsősorban a keresőoptimalizálás része, most inkább a weboldalépítés és a honlapkészítés szempontjából közelítem meg a témát, és a képekre, mint fájltípusokra helyezem a hangsúlyt jelen blogbejegyzésemben.
Az egyik ilyen módszer – különösen, ha sok kép van a weboldaladon – a megfelelő képformátum kiválasztása. De melyik is legyen ez? Hiszen számos képformátum létezik, a két legelterjedtebb, amit talán még az is ismer, aki kevésbé mozog otthonosan a grafikai vagy weboldalkészítési feladatokban, a JPG és a PNG. És akkor jöjjön az a bizonyos harmadik, ami számunkra most a megoldást kínálja, ez pedig a WebP-képek.
Miben különbözik az egyik a másiktól? És miért előnyös, ha weboldalunkon WebP-képeket használunk? Lássuk őket külön-külön is!
A JPG fájlok olyan tömörített fájlok, amelyek esetén a tömörítés során alapvető információk kerülnek végleges eltávolításra. Ez eredményezi azt, hogy a folyamat végén ugyan kisebb fájlt kapunk, de annak minősége is gyengébb lesz.
A PNG fájlok általában veszteségmentes fájlok. A veszteségmentes tömörítés eredményeként a képek nem, vagy alig veszítenek minőségükből, kicsomagolhatók és visszaállíthatók eredeti állapotukba. Ha nagyon bele akarnék menni a részletekbe, akkor ez azért lehetséges, mert a veszteségmentes tömörítés esetén csak a képekbe kódolt irreleváns bitek kerülnek eltávolításra. Talán ennyi elég is…! 🙂
A WebP képek egy viszonylag új és modern képformátumnak számítanak, amelyet a Google vezetett be éppen az említett és sokat hangoztatott betöltési sebesség növelése érdekében. Viszonylag „könnyű” képformátum, egy Google tanulmány szerint például a veszteségmentes WebP-képek akár 26%-kal is kisebbek lehetnek, mint a tömörített PNG-fájlok, és a vesztes WebP képek 25-34%-kal kisebbek, mint a JPG fájlok.
A Facebook és a YouTube is már használja. Sőt! Jó hír azoknak, akik WordPress weboldalt használnak, hogy a közelgő WordPress 5.8 frissítés is natív támogatást nyújt majd a WebP-képekhez. (Megjegyzés: a cikk írásakor használatban lévő aktuális WP verzió szám: 5.7.2)
Miért nem használjuk akkor ezt, adódik a kérdés, hiszen kézenfekvő megoldás lenne. A válasz a WebP-képek előnyében és hátrányában keresendő.
Alapvető előny a már említett kisebb fájlméret, amelynek köszönhetően gyorsabban töltődnek be a JPG vagy PNG fájlokhoz képest.
A WebP fájlok hátránya viszont, hogy nem minden böngésző támogatja őket. A legtöbb nagy böngésző, például a Chrome, a Firefox, az Edge és az Opera alapértelmezett támogatást nyújt a WebP-képekhez, más böngészők, például a Safari, nem. Ez komoly probléma is lehet, hiszen a Safari iOS-en natív böngésző, és már csak az eszközhasználatból adódóan is sokan használják.
A megoldást az adja, hogy olyan technikai megoldást választunk, amely egyszerre fenntartja az egyes képformátumokat, miközben böngészőhasználattól függően a megfelelő típust jeleníti meg.
És itt jön az előny a WordPress oldalt használók számára, mert léteznek olyan pluginok azaz bővítmények, amelyek képesek a képeket WebP formátumban megmutatni annak, aki az adott támogatott böngészőt használja, és JPG/PNG formátumban annak, akik a másik típusút.
Azt azért tudni kell, hogy jelenleg alapértelmezetten a WordPress nem támogatja a WebP fájlokat, ami azt jelenti a gyakorlatban, hogy automatikusan nem fogod tudni feltölteni a Médiatárban az ilyen típusú képeket. (hacsak nem nyúlsz bele a function.php. fájlba és módosítod annak kódkészletét kisebb kiegészítéssel, de ez azért valljuk be nem egy alapképesség…., kivéve, ha informatikus vagy fejlesztő vagy. 🙂 A fent említett új verzióval ez azonban már megoldható lesz!
De addig is létezik számos módszer, amivel a fenti „trükk” kivitelezhető:
1. Használj CDN-!
A CDN, azaz Content Distribution Network egyfajta szerverhálózat, ami abban segít neked, hogy a weboldalszerveréről érkező tartalmat elosztja más egyéb szerverhálózatokon, ezzel tehermentesítve azt, és segítve a gyorsabb betöltést. Képek tekintetében a CDN képes a JPG/PNG képeket WebP-képekké konvertálni és ezzel biztosítani, hogy a megfelelő képtípus jelenjen meg a különböző böngészőből érkező felhasználók számára. Az egyik legkedveltebb CDN a Cloudflare, amely sok-sok előnye mellett ingyenes verzióval is rendelkezik, szóval már csak ezért is érdemes kihasználni.
2. Használj képoptimalizáló bővítményeket!
Létezik számos olyan képoptimalizáló WordPress-bővítmény, amely az alapfunkcióján túl képes a már feltöltött JPG/PNG képeket WebP formátumúvá konvertálni. Ilyen például a Imagify, a Smush, az Optimole, a ShortPixel. Bármelyik jó lehet, hogy végül melyiket használod, azt csakis az dönti el, melyik illeszkedik legjobban az igényeidhez, lehetőségeidhez. Mit enged a WP sablonod, nem akad-e össze másik pluginnal, összetett funkciót szeretnél, vagy csak képoptimalizálás+WebP kép konvertálás, stb.
Röviden mindegyikről pár szóban:
Az Imagify egy ingyenes képoptimalizáló bővítmény havi 20MB-os határig. Alapértelmezés szerint a legtöbb szükséges opció már be van állítva, de éppen a WebP konvertálást külön be kell kapcsolni és kiválasztani a lehetséges 2 módszer közül, azt, ami a felhasználónak a legjobban megfelel. Az 1. opció, hogy átírási szabályokat használunk, a második – ez a támogatottabb -, hogy <picture> taget használunk az <img> címkék helyett.
A Smush már egy összetettebb, többfunkciós WP plugint, sajnos épp a WebP konvertálási funkció csak PRO verzióban érhető el, holott a bővítmény maga ingyenes. Havi 6 USD-ért már előfizethető, ezt mindenkinek magának kell eldöntenie, hogy így is megéri-e az amúgy hasznos és tényleg sokoldalú bővítmény.
Az Optimole egy képtömörítő plugin, amely WebP konvertálási lehetőséget is kínál, továbbá képes optimalizálni a felhasználói élményt azáltal, hogy átméretezi a képeket attól függően, hogy a felhasználó mekkora képernyőn nézi azokat. Tehát web-vitalitás szempontjából is igen hasznos eszköz. Az ingyenes verzió havi 5000 látogatóig engedélyezett. A telepítés után a folyamat többi része alapértelmezés szerint zajlik, így nagyon egyszerű a használata is. Én személy szerint ezt támogatom és javaslom. A LAVENDER Design által készített weboldalak között is található számos, amelyeken ez a plugin fut a hatékonyabb websebesség és az optimális képformátum elérése érdekében.
A ShortPixel sokban hasonlít az előző Optimole-ra, itt 100+100 konvertálási lehetőségig engedélyezve az ingyenesség. A kettő bővítmény közötti választást tehát leginkább az dönti el, hogy a Google Analyticsben mekkora havi forgalmat, látogatószámot látsz (<5000), vagy a Médiatárban mennyi kép van felöltve a weboldaladhoz (<200).
3. A WebP képeket manuálisan vidd fel a WordPress admin felületére!
Ahhoz hogy ezt meg tudd tenni, persze WebP képekre van szükséged, amit ezúttal nem egy plugin vagy bővítmény segítségével a WordPress fog átkonvertálni, hanem előzetesen neked kell átalakítani. Erre kínál megoldást az Online-Converter, ahol gyakorlatilag mindent (is), és mindenfélére át lehet alakítani. Vagy másik lehetőség az Adobe Photoshop, ahol – alapértelmelmeztetten ugyan nem, de – egy képkonvertáló plugin segítségével lehetőség van a képeket már eleve WebP fájlként menteni.
Ha mindez megvan, akkor pedig nem szabad megfeledkezni, hogy amíg a WordPress 5.8 verziója nem jön ki, addig az így elkészült WebP fájlokat csak abban az esetben tudod feltölteni, ha egy kicsit belenyúlsz a kódkészletbe. De ez már egy másik téma…. 🙂
Ha további témák érdekelnek weboldalkészítés kapcsán, vagy szeretnél új weboldalt készíteni, keress bátran!
Addig is tekintsd meg eddigi munkáimat weboldalkészítés témában!
