A felhasználói élmény, a betöltési sebesség és a keresőoptimalizálás miatt is kulcsfontosságú, hogy a képek a megfelelő formátumban, méretben és minőségben kerüljenek fel a honlapokra. Korábban már ajánlottunk ehhez pár képtömörítőt, illetve a WebP, PNG és JPEG közötti különbségeket is tisztáztuk, de most ezeken felül is körüljárjuk a témát a Blogging Wizard segítségével. Cikksorozatunkat az első rész után folytatjuk.
Hogyan válasszuk ki a megfelelő képformátumot?
A WebP-ről, PNG-ről és JPEG-ről szóló cikkünkben részletesen elmagyarázzuk a három legnépszerűbb képformátum közötti különbséget, illetve azt is, hogy melyik mikor előnyösebb. Annyival még kiegészítenénk, hogy létezik még egy negyedik, szintén népszerű és különleges formátum, a GIF is, de honlapok esetében inkább a WebP támogatja a mozgóképes megjelenést is.
Szintén hozzátennénk, hogy az előző cikkben megnevezett WordPress-bővítmények többnyire arra is alkalmasak, hogy a webtárhely szempontjából leginkább optimális WebP-re konvertálják a képfájlokat.
Mi az optimális képméret?
A WordPress és az ott elérhető témák mindegyike a kép feltöltésekor a saját igényei szerint optimalizálja a képet, hogy annak megjelenése reszponzív legyen, tehát mindenféle eszközön (számítógép, laptop, tablet) jól mutasson.
A feltöltésnél tehát legfeljebb csak az jelent komoly akadályt, ha a kép mérete nagyobb a WordPress – vagy az ott választott téma – által megengedettnél.
A profi WordPress-témák esetében elérhető egy dokumentáció arról, hogy különféle elhelyezések esetében (pl.: banner, blogbejegyzés, galéria, főoldal, termékoldal, stb.) milyen képméret javasolt. Érdemes átnézni ezt a leírást, hogy már a feltöltés előtt is a megfelelő méretet kapják a képek, ezzel bebiztosítva azok tökéletes megjelenését.
Az általános cél az lehet, hogy pont akkora, vagy csak egy kicsit nagyobb képek legyenek, mint amekkora a honlap adott helyén javasolt.
Mire jó a “lusta”, vagyis késleltetett betöltés?
Sok képoptimalizáló WordPress-bővítmény esetében elérhető egy “lazy loading”, vagyis lusta betöltés elnevezésű funkció, amit késleltetésként érdemes emlegetni. Ezzel a beállítással a honlap minden olyan elem betöltését elhalasztja, amelyek azonnali megjelenése nem kritikus a felhasználás szempontjából.
Például ha egy főoldalon egy tucat kép helyezkedik el, de az oda kattintáskor, a főoldal tetején csak két képnek kell gyorsan megjelennie, akkor a honlap az első másodpercekben erre a célra összpontosítja az erőforrásait, majd – lényegében a felhasználó számára láthatatlanul – betölti azokat a vizuális elemeket is, amelyekkel csak később találkozik a látogató.
Sőt, olyan késleltetés is lehetséges, hogy a képek csak akkor töltődjenek be, amikor a görgetés miatt a látogató már nagyon közel jár hozzájuk.
Ehhez a funkcióhoz a már korábban emlegetett NitroPack mellett a WP Rocket is remek választás.
Cikksorozatunk következő részében újabb hasznos tippekkel gazdagodhat.