A képek helyes feltöltése és optimalizálása
Az egyik leggyakoribb oka annak, hogy egy weboldal vagy webshop lassan tölt be, az a nem megfelelően feltöltött képekben keresendő. Nagyszerű érzés, amikor a profi fotóstól megkapod az új termékképeket, vagy letöltesz egy gyönyörű, tűéles fotót egy stock oldalról.
Azonban ha ezeket az 5-10 megabájtos, nyomdai minőségű (sokszor 4000-5000 pixel széles) képeket egyből, módosítás nélkül töltöd fel a weboldaladra, azzal drasztikusan lelassítod a betöltési sebességet. A lassú oldalt pedig sem a látogatóid, sem a Google keresőmotorja nem fogja szeretni. Mutatjuk, hogyan használd a Médiatárat úgy, hogy az oldalad villámgyors maradjon!
Lépésről lépésre: A képek előkészítése és feltöltése
- A kép átméretezése (Feltöltés előtt!) Mielőtt bármit feltöltenél a WordPress-be, a képet kisebbre kell venni. Erre használhatsz bármilyen egyszerű képszerkesztőt (Paint, Mac Preview, Canva). Alapszabály: Egy weboldalon szinte soha nincs szükség 1920 pixel (Full HD) szélességnél nagyobb képre. Ha a kép csak egy blogcikkbe vagy termékfotóként kerül, elég, ha 800 és 1200 pixel közötti szélességű.
- A fájlméret optimalizálása (Tömörítés) Az átméretezés után a fájlméretet (hány megabájt a kép) is csökkenteni kell. Egy webre szánt kép ideális esetben nem nagyobb 200-300 Kilobájtnál (KB). Használhatsz online, ingyenes képoptimalizáló eszközöket, mint például a TinyPNG vagy a Squoosh, amik úgy csökkentik a fájlméretet, hogy az a szabad szem számára észrevehetetlen marad.
- Kép feltöltése a Médiatárba Ha a kép már megfelelő méretű, a WordPress admin felületén a bal oldali menüben válaszd a Média > Új hozzáadása menüpontot. Egyszerűen húzd be az előkészített fájlt a szaggatott vonallal jelölt dobozba, vagy kattints a Fájlok kiválasztása gombra. [Képernyőkép helye: A Média -> Új hozzáadása felület a “Húzz ide fájlokat” dobozzal]
- Az ALT címke (Alternatív szöveg) kitöltése – SEO és akadálymentesítés Miután feltöltötted a képet, kattints rá a Médiatárban. A jobb oldali oszlopban látni fogsz egy Alternatív szöveg (ALT tag) mezőt. Ide írd le röviden (1-2 mondatban), hogy mi látható a képen. Ez elengedhetetlen a Google képkeresője miatt (SEO), és a képernyőolvasókat használó látogatók számára is. [Képernyőkép helye: A Médiatárban egy megnyitott kép részletei, piros nyíllal kiemelve az “Alternatív szöveg” mezőt]
- A kép beillesztése a bejegyzésbe/oldalra Ha a képet egy blogbejegyzésben akarod használni, a szövegszerkesztőben kattints a + ikonra, válaszd a Kép blokkot, majd a Médiatár lehetőséget. Itt csak ki kell választanod a már feltöltött képedet. [Képernyőkép helye: A Gutenberg szerkesztőben a Kép blokk kiválasztása]
💡 Gyakori hiba: Képek a szövegszerkesztőben
Soha ne illeszd be (másolás-beillesztés) a képeket közvetlenül a Word dokumentumból a WordPress szerkesztőjébe! Bár sokszor működik, a háttérben hibás formázást és hatalmas kód-szemetet generál, ami később problémákat okozhat. A képeket mindig fájlként (JPG, PNG, WebP) mentsd le a gépedre, és a fent leírt módon töltsd fel a Médiatáron keresztül.
Automatikus megoldást szeretnél?
Ha sok képpel dolgozol, és nincs időd egyesével optimalizálni őket, kérheted egy professzionális, szerverszintű képoptimalizáló bővítmény telepítését (pl. ShortPixel vagy Smush). Ez feltöltéskor automatikusan átméretezi és tömöríti a fájlokat, ráadásul a modern és villámgyors WebP formátumba konvertálja őket.
Nyiss egy jegyet a peterteszary.com Support Genix felületén, és beállítok egy ilyen automata rendszert a weboldaladon!
