WordPress képoptimalizálás: teljes útmutató

A WordPress képoptimalizálás azt jelenti, hogy minden feltöltött képet a megjelenítési méretre szabsz, korszerű formátumban (WebP vagy AVIF) és ésszerű tömörítéssel szolgálsz ki, megadod a méretarányt és a leíró alt szöveget, a hajtás alatti képeket késleltetve töltöd be. Így gyorsabb lesz az oldal, jobbak a Core Web Vitals értékek, és a képeid a képkeresőben is megtalálhatók.

Alapfogalmak

Mielőtt bővítményeket telepítenél vagy beállításokat kapcsolgatnál, érdemes tisztázni néhány fogalmat. A képoptimalizálás ugyanis nem egyetlen művelet, hanem több, egymásra épülő döntés sorozata. Ha ezeket összekevered, könnyen előfordul, hogy egy tömörítő bővítményt telepítesz, miközben a valódi gond az, hogy egy 4000 pixel széles fotót jelenítesz meg 800 pixeles dobozban.

A WordPress felől nézve egy kép három szinten létezik: az eredeti feltöltött fájl, a WordPress által automatikusan generált méretváltozatok (thumbnail, medium, large és a téma által regisztrált egyedi méretek), valamint az a HTML-kód, amellyel a böngésző megkapja a képet. Mindhárom szinten lehet hibázni, és mindhárom szinten lehet nyerni.

Fájlméret és képméret: nem ugyanaz

A képméret a pixelben mért szélesség és magasság (például 1200 × 800). A fájlméret a kilobájtban vagy megabájtban mért súly. A kettő összefügg, de nem azonos: egy 1200 × 800-as kép lehet 60 KB és 900 KB is, a formátumtól és a tömörítéstől függően. Az optimalizálás első lépése mindig a helyes képméret, a második a fájlméret csökkentése.

Veszteséges és veszteségmentes tömörítés

Veszteséges tömörítésnél a fájl információt dob el, amit az emberi szem jellemzően nem vesz észre. Fotóknál ez a természetes választás. Veszteségmentes tömörítésnél a képi adat változatlan marad, csak a tárolás hatékonyabb; logóknál, ikonoknál, éles szöveget tartalmazó képernyőképeknél lehet indokolt. A gyakorlatban a legtöbb oldalon a fotókra mérsékelt veszteséges tömörítés a jó kompromisszum.

Képformátumok röviden

Formátum	Mire való	Mire figyelj
JPEG	Fotók, széles kompatibilitás	Nincs átlátszóság, nagyobb, mint a WebP hasonló minőségben
PNG	Átlátszó grafika, éles vonalak	Fotónál feleslegesen nagy
WebP	Fotó és grafika egyaránt, átlátszósággal	A WordPress újabb verziói natívan kezelik a feltöltését
AVIF	Erős tömörítés fotóknál	A szerver képkezelő könyvtárának támogatnia kell a generálást
SVG	Logók, ikonok, vektoros elemek	Alapból nem engedélyezett feltöltés biztonsági okból, tisztítás nélkül kockázatos

Alt szöveg, fájlnév, felirat

Az alt szöveg a kép szöveges helyettesítője: a képernyőolvasók felolvassák, és a keresők is ebből (meg a környező szövegből) értik meg, mit ábrázol a kép. A fájlnév szintén ad egy apró jelet, ezért a dsc_0412.jpg helyett jobb a kezi-kave-orlo-acel.jpg. A felirat (caption) a látogatónak szól, és gyakran többen olvassák el, mint a körülötte lévő bekezdést.

Core Web Vitals és a képek

Három mutató kapcsolódik közvetlenül a képekhez. A Largest Contentful Paint (LCP) sok oldalon maga a hero kép vagy a kiemelt kép. A Cumulative Layout Shift (CLS) akkor romlik, ha a kép méretei nincsenek megadva, és betöltéskor szétnyomja a tartalmat. Az Interaction to Next Paint (INP) közvetetten érintett: a túl sok, nehéz képet kezelő JavaScript (például egyes slider bővítmények) lassíthatja a reakciót. Ha a tágabb összefüggéseket is látni szeretnéd, a WordPress SEO: teljes útmutató a technikai alapokat egyben mutatja be.

Hogyan működik?

Ha érted, mi történik a háttérben a feltöltés pillanatától a böngészőben való megjelenésig, sokkal könnyebben eldöntöd, hol kell beavatkozni. A WordPress sok mindent automatikusan elvégez, de az alapbeállítások nem minden oldalra ideálisak.

1. Feltöltés és méretváltozatok generálása

Amikor feltöltesz egy képet a Médiatárba, a WordPress a szerveren elérhető képkezelő könyvtárral (Imagick vagy GD) több méretváltozatot készít. Az alapértelmezett méreteket a Beállítások > Média menüben látod, a téma és egyes bővítmények további méreteket regisztrálhatnak. Ha egy téma nyolc egyedi méretet regisztrál, egyetlen feltöltés akár tíznél több fájlt is létrehozhat a szerveren.

Nagyon nagy képeknél a WordPress egy küszöbérték felett (alapból 2560 pixel a hosszabb oldalon) automatikusan lekicsinyített változatot készít, és azt használja eredetiként, a fájlnévben a -scaled utótaggal. Ez véd a teljesen méretezetlen fotók ellen, de 2560 pixel a legtöbb blogtartalomhoz még mindig bőven sok.

2. A kép beillesztése a tartalomba

A blokkszerkesztőben beillesztett kép HTML-je tartalmazza a width és height attribútumot, valamint a srcset és sizes attribútumot. A srcset felsorolja az elérhető méretváltozatokat, a sizes megmondja a böngészőnek, mekkora helyen jelenik meg a kép. Ebből a böngésző maga választja ki a legkisebb elégséges fájlt az adott képernyőhöz és pixelsűrűséghez.

3. Késleltetett betöltés és prioritás

A WordPress a tartalmi képekre automatikusan loading="lazy" attribútumot tesz, vagyis a böngésző csak akkor tölti le őket, amikor a látómező közelébe érnek. Az újabb verziók igyekeznek az első, valószínűleg hajtás feletti képről ezt elhagyni, és fetchpriority="high" jelzést adni neki. Ez a logika azonban nem tévedhetetlen: egyedi témáknál, oldalépítőknél vagy háttérképként (CSS-ben) megadott hero képeknél gyakran nem működik jól, és pont az LCP-kép kap lazy loadot.

4. Kiszolgálás a böngészőnek

A böngésző a kiválasztott fájlt a szerverről vagy egy CDN-ről kéri le. Itt számít a gyorsítótárazás (cache-fejlécek), a HTTP/2 vagy HTTP/3 használata, és az, hogy a szerver földrajzilag milyen messze van a látogatótól. A legjobban tömörített kép is lassúnak érződik, ha egy túlterhelt tárhelyről, cache nélkül érkezik.

Kidolgozott példa: mi történik egy blogcikk képével?

Vegyünk egy szemléltető esetet. Feltöltesz egy telefonnal készült, 4032 × 3024-es, 3,8 MB-os JPEG-et. A WordPress létrehozza a 2560 pixeles -scaled változatot, plusz a témától függő méreteket. A cikk tartalmi szélessége 760 pixel. A srcset miatt egy átlagos laptopon a böngésző jó eséllyel a 768 vagy 1024 pixeles változatot tölti le, nagy pixelsűrűségű mobilon esetleg az 1536 pixeleset. Ha ezek a változatok nincsenek tömörítve, egyenként is lehetnek több száz kilobájtosak. Ha előtte 1600 pixelre méretezed és WebP-be konvertálod, a böngészőhöz érkező fájl tipikusan töredéke lesz ennek. A pontos arány képenként eltér, ezért a saját oldaladon mérd, ne becsüld.

Fő módszerek

Az alábbi módszereket érdemes sorrendben végiggondolni. A sorrend nem véletlen: a korábbi lépések nagyobb hatásúak és olcsóbbak, a későbbiek finomhangolások.

1. Méretezés feltöltés előtt

Határozz meg egy maximális szélességet a tartalmi képekre. Döntési szabályként jól működik: a legszélesebb megjelenési hely kétszerese, de legfeljebb 2000 pixel. Ha a cikktörzs 760 pixel széles, 1520 vagy 1600 pixel elég. Teljes szélességű hero képnél 1920 és 2400 pixel között érdemes maradni. Ezt megteheted asztali szerkesztővel, kötegelt átméretezővel, vagy olyan bővítménnyel, amely feltöltéskor automatikusan kicsinyít.

2. Formátumválasztás és konverzió

Fotókhoz WebP vagy AVIF, átlátszó grafikához WebP vagy PNG, logóhoz tisztított SVG. Ha nem akarsz minden képet kézzel konvertálni, egy optimalizáló bővítmény létrehozhatja a WebP vagy AVIF változatot, és vagy a HTML-ben (picture elemmel), vagy szerveroldali átírással szolgálja ki. Mindkét megoldás működhet, de ellenőrizd, hogy a cache bővítményed és a CDN is a megfelelő változatot adja-e vissza.

3. Tömörítés

A tömörítés történhet helyben (a saját szerveren, Imagick vagy GD segítségével) vagy külső szolgáltatásnál (a bővítmény feltölti, tömöríti és visszaküldi a képet). A külső szolgáltatások jellemzően kvótához vagy előfizetéshez kötöttek, a helyi tömörítés a szerver erőforrásait terheli. Fotóknál a 75 és 85 közötti minőségi tartomány sok esetben jó kiindulópont, de ez szemléltető érték, nem szabály: nézd meg a kimenetet nagyítva, különösen arcoknál és színátmeneteknél.

4. Felesleges méretváltozatok kikapcsolása

Ha a téma vagy egy bővítmény olyan méreteket regisztrál, amelyeket sehol nem használsz, azok csak a tárhelyet és a mentési időt növelik. Fejlesztői szinten ezek kódból letilthatók, egyes optimalizáló bővítmények felületről is engedik. Óvatosan: előbb nézd meg, melyik méretet használja a téma archívuma, a kapcsolódó bejegyzések blokkja vagy a webáruház termékoldala.

5. Méretarány és CLS-védelem

Minden képnek legyen width és height attribútuma, vagy CSS-ben megadott aspect-ratio értéke. Oldalépítőknél és egyedi blokkoknál ez gyakran elmarad. A cél, hogy a böngésző a kép letöltése előtt tudja, mekkora helyet kell kihagynia.

6. LCP-kép kezelése

A hajtás feletti fő kép ne kapjon lazy loadot.
Kapjon fetchpriority="high" jelzést, ha a téma nem adja meg magától.
Ha CSS háttérkép, fontold meg, hogy rendes img elemmé alakítod, vagy előtöltést (preload) adsz neki.
Ne tegyél elé slidert, amely JavaScriptből tölti be az első képet.

7. Alt szöveg és képes SEO

Az alt szöveg írásához egyszerű döntési szabály: írd le, mit látna valaki, aki nem látja a képet, és ami a mondanivalóhoz kell. Díszítő képnek üres alt értéket adj (alt=""), ne töltsd ki kulcsszóval. A SEO bővítmények ebben is segíthetnek, például hiányzó alt szövegek jelzésével vagy sablonos kitöltéssel; a részletes beállításokat a Yoast SEO: teljes útmutató, a Rank Math: teljes útmutató és az All in One SEO: teljes útmutató tárgyalja. Az automatikusan generált alt szöveg kiindulópontnak jó, de a fontos képeknél írd át kézzel.

8. CDN és gyorsítótár

Ha a látogatóid nagy része Magyarországról jön, egy jó hazai tárhely önmagában is elég lehet. Nemzetközi közönségnél vagy nagy képforgalomnál a CDN érezhetően javíthat. Egyes CDN-ek menet közben átméretezik és konvertálják a képet; ilyenkor ne végezd el kétszer ugyanazt a munkát bővítménnyel is.

Saját workflow új kép feltöltésére

Döntsd el, hol jelenik meg a kép (cikktörzs, hero, termékkép, kiskép).
Méretezd a fenti szabály szerint.
Nevezd át leíró, ékezet nélküli, kötőjeles fájlnévre.
Exportáld WebP-be, vagy hagyd, hogy a bővítmény konvertáljon.
Töltsd fel, írd meg az alt szöveget, ha kell, a feliratot.
Ha ez az oldal első képe, ellenőrizd, hogy nem kapott-e lazy loadot.
Közzététel után futtass egy gyors mérést az oldalra.

Gyakori hibák

A legtöbb lassú WordPress-oldalon ugyanazok a képes hibák ismétlődnek. Ezek jó része nem technikai tudáshiány, hanem rossz alapértelmezés vagy kényelmi döntés következménye.

Tömörítő bővítmény méretezés nélkül

A leggyakoribb tévhit, hogy egy tömörítő bővítmény mindent megold. Ha egy 2560 pixeles képet tömörítesz, akkor egy kisebb 2560 pixeles képed lesz. Ha a megjelenítés 760 pixeles, a nagy változat a srcset miatt ugyan nem mindig töltődik le, de oldalépítőknél, galériáknál és rosszul beállított sizes attribútumnál igen. Előbb a méret, aztán a tömörítés.

Lazy load a hero képen

Egyes optimalizáló vagy cache bővítmények minden képre lazy loadot tesznek, a fejlécben lévőre is. Ilyenkor az LCP-kép csak azután kezd töltődni, hogy a böngésző a JavaScriptet és a layoutot feldolgozta. Ha két bővítmény is lazy loadot kezel (például a WordPress natív megoldása és egy cache bővítmény), az ütközés furcsa, villódzó betöltést is okozhat. Egyet hagyj meg.

Kulcsszóhalmozás az alt szövegben

Az „alt="wordpress képoptimalizálás wordpress kép seo képtömörítés"" típusú megoldás nem segít, és akadálymentességi szempontból kifejezetten rossz. A képernyőolvasót használó látogató ezt hallja. Írd le, mi van a képen.

PNG fotókhoz

Képernyőkép-eszközök és tervezőprogramok gyakran PNG-be mentenek. Egy fotószerű PNG nagyságrendekkel nagyobb lehet, mint ugyanaz WebP-ben. Ellenőrizd a Médiatárat formátum szerint: a nagyméretű PNG-k általában a legkönnyebb nyerési pontok.

Elhanyagolt régi tartalom

Új képeknél sokan már ügyelnek a méretre, de a több évvel ezelőtt feltöltött több ezer kép érintetlen marad. A legtöbb optimalizáló bővítmény tud kötegelt (bulk) feldolgozást. Előtte készíts teljes mentést, és nézd meg, hogy a bővítmény megőrzi-e az eredetit, mert egy rossz minőségbeállítás visszafordíthatatlan lehet.

Túl sok bővítmény ugyanarra

Tipikus kép: egy tömörítő bővítmény, egy WebP-konverter, egy cache bővítmény saját képoptimalizálással és egy CDN, amely szintén konvertál. Ilyenkor a képek többször újratömörödnek, a minőség romlik, és nehéz kideríteni, melyik réteg mit csinál. Döntsd el, melyik eszköz felel melyik lépésért.

Határeset: a webáruház termékképei

WooCommerce-nél a termékképeknél a nagyítás (zoom) funkció miatt nagyobb felbontás kell, mint egy blogcikknél. Itt a túlzott kicsinyítés is hiba: a vásárló nem látja a részleteket. A megoldás általában az, hogy a nagy változat csak nagyításkor töltődjön be, a listaoldalakon és a termékoldal alapnézetében pedig a kisebb méretek menjenek.

Gyors hibakereső ellenőrzőlista

Van 500 KB-nál nagyobb kép a kezdőlapon?
A hajtás feletti fő kép kap lazy loadot?
Minden képnek van width és height attribútuma?
A fotók WebP vagy AVIF formátumban érkeznek?
Hány bővítmény foglalkozik képekkel?
A tartalmi képek alt szövege leíró, a díszítőké üres?

Mérés

Mérés nélkül a képoptimalizálás vakrepülés. Könnyű beállítani valamit, ami a bővítmény felületén szépen mutat („42% megtakarítás”), miközben az oldal valós betöltése alig változik, mert a nagy kép éppen nem azon az úton érkezik, amit a bővítmény kezel.

Laboradat és terepadat

A laboradat egy szimulált betöltés eredménye, például a PageSpeed Insights vagy a Lighthouse futtatásából. Gyors visszajelzést ad, de egyetlen eszköz és hálózat szimulációja. A terepadat valós felhasználóktól származik (a Chrome felhasználói adataiból), és a Search Console Core Web Vitals jelentésében, illetve a PageSpeed Insights felső részében látod, ha az oldaladnak van elég forgalma. A keresési rangsorolás szempontjából a terepadat a mérvadó, a hibakereséshez a laboradat a kényelmesebb.

Mit nézz a PageSpeed Insightsban?

Az LCP-elem azonosítása: melyik elem az LCP, és kép-e.
Képekhez kapcsolódó javaslatok: megfelelő méretezés, korszerű formátum, hatékony kódolás.
A lazy loaddal betöltött LCP-kép figyelmeztetése.
Méret nélküli képek, amelyek layout-eltolódást okoznak.

Az eszköz pontos szövegezése és a javaslatok csoportosítása idővel változik, ezért a megnevezéseket ne vedd szó szerint, a lényeg a kategória.

Böngésző fejlesztői eszközei

A Chrome DevTools Hálózat (Network) lapján a szűrőt „Img”-re állítva látod, mely képek töltődnek le, mekkorák, milyen formátumúak és mikor indulnak. Ha a Content-Type „image/webp” vagy „image/avif”, a konverzió működik. Ha egy 760 pixeles helyre 2560 pixeles fájl jön, a srcset vagy a sizes hibás. Érdemes mobil emulációval és lassított hálózattal is megnézni.

Kidolgozott mérési eljárás

Válassz ki 5 reprezentatív URL-t: kezdőlap, egy hosszú blogcikk, egy kategóriaoldal, egy termékoldal (ha van) és egy képekben gazdag oldal.
Mindegyiken futtasd le a PageSpeed Insights mobil mérését háromszor, és jegyezd fel az LCP és CLS mediánját, valamint az oldal teljes képsúlyát a DevToolsból.
Végezd el a változtatásokat (méretezés, formátum, LCP-kép javítása).
Ürítsd a cache-t és a CDN-t, majd ismételd meg a méréseket ugyanígy.
A terepadatot a Search Console-ban 4 hét múlva nézd meg, mert a valós adat gördülő időablakban frissül.

Mintatáblázat a dokumentáláshoz

Az alábbi táblázat szemléltető kitöltés, nem mért eredmény; a saját számaidat írd be.

URL	Képsúly előtte	Képsúly utána	LCP előtte	LCP utána	CLS utána
Kezdőlap	2,4 MB	0,7 MB	4,1 s	2,3 s	0,02
Blogcikk	1,8 MB	0,5 MB	3,2 s	2,0 s	0,01
Termékoldal	3,1 MB	1,2 MB	3,8 s	2,6 s	0,05

Képkeresési forgalom

A Search Console Teljesítmény jelentésében a keresés típusát „Kép”-re állítva láthatod, hány megjelenést és kattintást hoz a képkeresés. Ez lassan reagáló mutató, de ha alt szövegeket, fájlneveket és képes sitemapot rendeztél, itt látod meg hosszabb távon a hatást.

Kapcsolódó részletes útmutatók

A képoptimalizálás a WordPress SEO egyik eleme, és több ponton találkozik a SEO bővítmények beállításaival, például a képek sitemapba kerülésénél, az alt szövegek kezelésénél és a közösségi megosztási képeknél. Az alábbi útmutatók ezeket a területeket részletesen bemutatják.

Ha az alapoktól építkezel, kezdd az átfogó WordPress SEO anyaggal, utána válaszd azt a bővítményes útmutatót, amelyik az oldaladon fut. Egyszerre csak egy SEO bővítményt használj, mert a párhuzamos sitemap- és metaadat-kezelés ütközést okozhat.

Hol érdemes folytatni?

WordPress SEO: a témakör összes anyaga egy helyen.
WordPress SEO: teljes útmutató: technikai alapok, indexelés, oldalsebesség, tartalomszerkezet.
Yoast SEO: teljes útmutató: beállítások, sitemap, közösségi képek Yoasttal.
Rank Math: teljes útmutató: modulok, képes SEO beállítások, sémák.
All in One SEO: teljes útmutató: konfiguráció és képekhez kapcsolódó funkciók.

Rövid döntési segédlet

Ha az oldalad lassú, és a mérés szerint az LCP-elem egy kép, a fenti „Fő módszerek” részben lévő LCP-lépésekkel kezdd. Ha a sebesség rendben van, de a képek nem hoznak forgalmat a képkeresőből, az alt szövegek, fájlnevek és a SEO bővítmény sitemap-beállításai a következő terület. Ha mindkettővel elégedett vagy, havonta egyszer futtasd le a hibakereső ellenőrzőlistát az új tartalmakra, mert a képes problémák szinte mindig az új feltöltésekkel térnek vissza.