WordPress WebP: teljes útmutató

A WordPress WebP lényege, hogy a JPEG és PNG képeidet WebP formátumban szolgálod ki, ami jellemzően kisebb fájlméretet és gyorsabb oldalbetöltést ad. A WordPress az 5.8-as verzió óta fogad WebP feltöltést, a meglévő képtárat pedig bővítménnyel, szerveroldali átírással vagy CDN-nel konvertálhatod. A végén mindig mérd az eredményt, és ellenőrizd a visszaesési (fallback) logikát.

Alapfogalmak

Mielőtt bármit telepítenél, érdemes tisztázni, miről beszélünk, mert a WebP körüli félreértések nagy része abból fakad, hogy valaki összemossa a formátumot, a konvertálást és a kiszolgálást. Ez három külön réteg, és mindhárom elromolhat egymástól függetlenül.

A WebP a Google által fejlesztett képformátum, amely veszteséges és veszteségmentes tömörítést is támogat, kezeli az átlátszóságot (alfa csatornát) és az animációt. Gyakorlatilag egyszerre próbálja kiváltani a JPEG-et, a PNG-t és bizonyos esetekben a GIF-et. A modern böngészők túlnyomó többsége támogatja, a Safari a 14-es verzió óta, így ma a fallback inkább biztonsági háló, mint napi szükséglet.

Formátum, konvertálás, kiszolgálás

Formátum: maga a .webp fájl, ami a lemezen vagy a CDN-en ül.
Konvertálás: az a folyamat, amely a meglévő JPEG vagy PNG fájlból WebP változatot készít. Ezt végezheti a szerver képkezelő könyvtára (GD vagy Imagick), egy bővítmény külső API-ja vagy egy CDN.
Kiszolgálás: az a döntés, hogy a látogató böngészője melyik változatot kapja meg. Ez történhet a HTML átírásával, szerveroldali átirányítással vagy a CDN tartalomegyeztetésével.

Ha csak konvertálsz, de nem szolgálsz ki, akkor a WebP fájlok ott ülnek a tárhelyen, és senki nem kapja meg őket. Ez az egyik leggyakoribb helyzet, amikor valaki azt mondja, hogy „feltettem a bővítményt, de a PageSpeed ugyanazt mutatja”.

Veszteséges és veszteségmentes WebP

A veszteséges WebP fotókhoz való, ott a JPEG versenytársa. A veszteségmentes változat grafikákhoz, logókhoz, képernyőképekhez, ahol a PNG helyére lép. Fontos határeset: egy PNG-ként mentett fotó WebP-re konvertálva látványos méretcsökkenést mutat, de ez részben azért van, mert a PNG eleve rossz választás volt fotóhoz. Ilyenkor a megtakarítás nem csak a WebP érdeme.

Mit csinál a WordPress magától?

A WordPress magja az 5.8-as verzió óta engedi WebP fájlok feltöltését a médiatárba, és ha a szerver képkezelő könyvtára támogatja a formátumot, a köztes méreteket (thumbnail, medium, large) is WebP-ben generálja a feltöltött WebP-ből. Azt viszont alapból nem csinálja meg, hogy a feltöltött JPEG-ből automatikusan WebP-t készítsen és azt szolgálja ki. Erre a WordPress Performance csapat Performance Lab projektjéből kinőtt modul, illetve harmadik féltől származó bővítmények valók. A pontos viselkedés verzióról verzióra változhat, ezért mindig a telepített verzióval ellenőrizd.

Szótár gyors áttekintéshez

Fogalom	Jelentés
Fallback	Az eredeti JPEG vagy PNG, amelyet a WebP-t nem támogató kliens kap.
<picture> elem	HTML szerkezet, amelyben több forrást adsz meg, a böngésző választ.
Accept fejléc	A böngésző által küldött jelzés arról, milyen képformátumokat fogad el.
Vary: Accept	Válaszfejléc, amely jelzi a gyorsítótárnak, hogy a tartalom az Accept fejléctől függ.
Bulk konvertálás	A már feltöltött teljes médiatár utólagos átalakítása.

A WebP tehát nem SEO varázsszer, hanem egy teljesítményeszköz. A keresőoptimalizálásra közvetetten hat: gyorsabb oldal, jobb Largest Contentful Paint, kevesebb elpattanó mobilos látogató. Ha a teljes képet akarod látni, a WordPress SEO: teljes útmutató segít elhelyezni a képoptimalizálást a többi feladat között.

Hogyan működik?

A WordPress WebP működését érdemes egy kép útján végigkövetni: feltöltéstől a látogató képernyőjéig. Így pontosan látod, melyik ponton avatkozik be egy bővítmény, a szerver vagy a CDN.

1. Feltöltés és méretgenerálás

Amikor feltöltesz egy képet, a WordPress elmenti az eredetit, majd a regisztrált képméretek alapján több kisebb változatot készít. Egy átlagos sablon és néhány bővítmény mellett ez könnyen 6 és 12 közötti fájlt jelent képenként (szemléltető szám, a te oldaladon a regisztrált méretek határozzák meg). Ha WebP konverziót kapcsolsz be, minden méretnek lesz WebP párja is, vagyis a fájlszám akár megduplázódik. Ezzel a tárhelynél számolj.

2. Konvertálás

A konvertálás háromféleképpen történhet:

Helyben, a szerveren: a PHP GD vagy Imagick kiterjesztése készíti a WebP fájlt. Ehhez az kell, hogy a kiterjesztés WebP támogatással legyen lefordítva. Az Eszközök, Webhely állapota menüben a WordPress kiírja, melyik képkezelő aktív, és a bővítmények általában jeleznek, ha nincs WebP támogatás.
Külső API-n keresztül: több optimalizáló bővítmény a saját szerverén konvertál, és visszaküldi a kész fájlt. Ez kíméli a tárhelyedet, de kvótához vagy előfizetéshez kötött lehet.
A CDN-en, menet közben: a képet nem alakítod át a saját szervereden, a CDN generálja és tárolja a WebP változatot a kérés pillanatában.

3. Kiszolgálás: ki dönti el, mit kap a látogató?

Itt van a legtöbb technikai különbség. Három fő mechanizmus létezik:

<picture> átírás: a bővítmény a kimenő HTML-ben az img tageket picture szerkezetbe csomagolja, egy WebP source elemmel és az eredeti img fallbackkel. A böngésző maga választ. Előnye, hogy a gyorsítótárazás egyszerű marad. Hátránya, hogy a sablon CSS-e néha a picture burkoló miatt másképp viselkedik.
Szerveroldali átírás (rewrite): az URL marad .jpg, de a szerver (Apache .htaccess vagy Nginx szabály) megnézi az Accept fejlécet, és ha a böngésző fogad WebP-t, a .webp fájlt küldi. A HTML változatlan, viszont kötelező a Vary: Accept fejléc, különben egy köztes gyorsítótár rossz változatot adhat ki.
Közvetlen URL csere: a HTML-ben a kép URL-je eleve .webp-re mutat. Egyszerű, de fallback nélkül a régi kliensek nem látnak képet.

4. Gyorsítótár és CDN réteg

Ha oldalgyorsítótárat használsz, az a teljes HTML-t elmenti. A picture megoldás ezzel jól együttműködik, mert mindenki ugyanazt a HTML-t kapja. A rewrite megoldásnál a HTML azonos, de a képfájl kiszolgálása fejlécfüggő, ezért a CDN-nek tisztelnie kell a Vary fejlécet, vagy saját képoptimalizálási funkcióval kell kezelnie a formátumot.

Kidolgozott példa: egy kiemelt kép útja

Vegyünk egy blogbejegyzést, amelynek kiemelt képe tavasz.jpg, 1600 pixel széles. Szemléltető számokkal:

Lépés	Mi történik	Eredmény
Feltöltés	WordPress elkészíti a méreteket	tavasz.jpg, tavasz-1024x683.jpg, tavasz-300x200.jpg stb.
Konvertálás	Bővítmény WebP párokat készít	tavasz.jpg.webp vagy tavasz.webp (bővítményfüggő elnevezés)
Kérés	Chrome kéri az oldalt	A srcset alapján a 1024-es változatot választja
Kiszolgálás	Picture vagy rewrite	A böngésző a WebP fájlt tölti le
Fallback	WebP-t nem támogató kliens	Az eredeti JPEG érkezik

Ha bármelyik lépés kimarad, a lánc megszakad. A legtöbb hibakeresés ezért abból áll, hogy megnézed, melyik láncszemnél akad el a folyamat.

Fő módszerek

A WordPress WebP bevezetésére négy fő út létezik. Nincs univerzálisan legjobb, a választás a tárhelyedtől, a gyorsítótárazási rétegtől és attól függ, mennyire akarsz kézzel beavatkozni.

1. módszer: eleve WebP-ben töltesz fel

A legegyszerűbb, bővítmény nélküli megoldás: a képet már a gépeden WebP-re alakítod (képszerkesztővel vagy parancssori eszközzel), és így töltöd fel. A WordPress mag kezeli, a méreteket is WebP-ben készíti el, ha a szerver tudja.

Előny: nincs plusz bővítmény, nincs duplikált fájl.
Hátrány: a meglévő médiatárat nem oldja meg, és minden szerzőnek fegyelmezetten kell dolgoznia.
Kinek: új oldalakhoz, kis csapatnak, ahol a feltöltést kevés ember végzi.

2. módszer: képoptimalizáló bővítmény

Ide tartoznak az ismert képtömörítő és konvertáló bővítmények (például EWWW Image Optimizer, ShortPixel, Imagify, Converter for Media, WebP Express). Ezek általában tudnak bulk konvertálást, és felajánlják a kiszolgálás módját: picture átírás vagy rewrite szabályok. A pontos funkciókészlet és az ingyenes keret bővítményenként és verziónként eltér, ezért döntés előtt a bővítmény aktuális leírását nézd meg.

Előny: a meglévő képtárat is kezeli, beállítható tömörítési szint.
Hátrány: újabb bővítmény, esetleges kvóta, és a kiszolgálási mód ütközhet a gyorsítótár bővítménnyel.

3. módszer: a Performance Lab modul

A WordPress Performance csapat modulja (a korábbi WebP Uploads, ma Modern Image Formats néven fut) a feltöltött JPEG-ekből automatikusan modern formátumú változatot készít, a WordPress saját képkezelőjét használva. Ez közel áll ahhoz, ahogyan a mag a jövőben működhet, de a meglévő képtárra visszamenőleg nem feltétlenül alkalmazza magát, ezért ellenőrizd, mit csinál a régi képekkel.

4. módszer: CDN alapú konvertálás

Ha CDN-t használsz, sok szolgáltató kínál képoptimalizálást, amely a kérés Accept fejléce alapján WebP-t (vagy akár AVIF-et) ad vissza. A WordPress oldalon ilyenkor szinte semmit nem kell állítanod. Cserébe ez a szolgáltatás gyakran fizetős csomaghoz kötött, és a kontroll a CDN-nél van.

Döntési szabály: melyiket válaszd?

Helyzet	Javasolt módszer	Miért
Új oldal, kevés kép, egy szerző	WebP feltöltés	Nincs plusz réteg, nincs duplikáció
Több ezer régi JPEG, osztott tárhely	Bővítmény külső API-val	Nem terheli a szerver CPU-ját
Saját VPS, GD/Imagick WebP-vel	Bővítmény helyi konverzióval vagy Performance Lab	Nincs kvóta, teljes kontroll
Már fizetett CDN képoptimalizálással	CDN konvertálás	Felesleges dupla munka a szerveren
Agresszív oldalgyorsítótár, nem állítható Vary	Picture átírás	A HTML minden kliensnek azonos

Bevezetési workflow lépésről lépésre

Készíts teljes mentést (fájlok és adatbázis).
Mérj alapállapotot 3 vagy 4 jellemző oldalon (főoldal, kategória, bejegyzés, termékoldal).
Ellenőrizd az Eszközök, Webhely állapota oldalon a képkezelő könyvtárat.
Válassz egyetlen módszert a döntési táblázat alapján. Ne futtass párhuzamosan két konvertálót.
Konvertálj először egy tesztoldalt vagy néhány képet, és nézd meg a minőséget nagy felbontású kijelzőn.
Állítsd be a kiszolgálást, majd ürítsd az oldal- és a CDN-gyorsítótárat.
Futtasd a bulk konvertálást csúcsidőn kívül.
Mérj újra ugyanazokon az oldalakon, ugyanazzal az eszközzel.

Gyakori hibák

A WebP bevezetése ritkán bukik el a konvertáláson. Sokkal gyakrabban a kiszolgálás, a gyorsítótár vagy egy elhamarkodott beállítás okoz gondot. Az alábbi hibák mind valós, jól ismert mintázatok.

A WebP fájl létezik, de senki nem kapja meg

A bővítmény lefutott, a médiatárban ott vannak a .webp fájlok, de a böngésző Hálózat paneljén továbbra is image/jpeg tartalomtípus látszik. Ennek oka jellemzően az, hogy a kiszolgálási mód nincs bekapcsolva, a rewrite szabály nem fut (Nginx alatt például a .htaccess nem érvényes), vagy a gyorsítótár a régi HTML-t adja. Megoldás: kapcsold be a kiszolgálást, Nginx esetén vedd fel a szabályt a szerverkonfigurációba, és ürítsd minden szinten a gyorsítótárat.

Hiányzó Vary: Accept fejléc

Rewrite alapú kiszolgálásnál, ha a válaszban nincs Vary: Accept, egy köztes gyorsítótár elmentheti a WebP változatot, és azt adhatja egy olyan kliensnek is, amely nem kérte. Fordított esetben pedig mindenki a JPEG-et kapja. Ha a CDN-ed nem kezeli a Vary fejlécet, válts picture átírásra.

Két konvertáló egyszerre

Gyakori, hogy a gyorsítótár bővítmény is kínál WebP opciót, és mellette fut egy képoptimalizáló is. Az eredmény duplikált picture burkolók, kétszeres konvertálás, ütköző rewrite szabályok. Szabály: egy feladatra egy eszköz.

Túl agresszív tömörítés

A legkisebb fájlméret csábító, de a túlzott veszteséges tömörítés elmosott éleket, sávosodást okoz a színátmeneteknél, és a termékfotóknál ez konverziót ronthat. Termékképnél és portfólióban óvatosabb beállítás kell, mint egy blog dekorképénél.

Elfelejtett CSS háttérképek

A picture átírás csak a HTML img tagjeire hat. A sablon CSS-ében megadott háttérképek (például hero szekció) JPEG-ek maradnak. Ezekre rewrite szabály vagy kézi csere kell. Pont a hero kép szokott az LCP elem lenni, így ez a legdrágább kihagyás.

Tévhit: a WebP mindig kisebb

Nem mindig. Egy már erősen optimalizált, kis JPEG vagy egy egyszerű, kevés színű PNG WebP-ben akár nagyobb is lehet. A jó bővítmények ilyenkor megtartják az eredetit. Ha kézzel konvertálsz, ezt magadnak kell ellenőrizned.

Tévhit: a WebP közvetlen rangsorolási tényező

A Google nem a fájlformátumot jutalmazza, hanem a felhasználói élményt, amelyre a betöltési sebesség hat. A WebP egy eszköz a gyorsabb LCP felé, nem önálló SEO jel. A helyes alt szövegek, fájlnevek és a képek indexelhetősége ugyanúgy számít. Ezeket a SEO bővítményed beállításaiban is érdemes rendezni, akár Yoast, akár Rank Math fut az oldaladon.

Hibakereső ellenőrzőlista

A Hálózat panelen a kép tartalomtípusa image/webp?
A válaszfejlécek között rewrite esetén ott a Vary: Accept?
Csak egy eszköz konvertál és szolgál ki?
A CSS háttérképek is WebP-ben jönnek?
A gyorsítótárak (oldal, objektum, CDN, böngésző) ürítve lettek?
A képminőség elfogadható nagy felbontású kijelzőn?
A sitemap képbejegyzései működő URL-ekre mutatnak?
Kikapcsolás után is megjelennek a képek (nem töröltél eredetit)?

Mérés

A WebP bevezetése csak akkor sikeres, ha számokkal igazolod. A mérésnek két rétege van: technikai ellenőrzés (tényleg WebP érkezik-e) és hatásmérés (gyorsult-e az oldal és javult-e a felhasználói élmény).

Technikai ellenőrzés a böngészőben

Nyisd meg az oldalt Chrome-ban, majd a Fejlesztői eszközök Hálózat fülét.
Szűrj a képekre (Img), és frissíts gyorsítótár nélkül.
Nézd meg a Type oszlopot: webp értéket kell látnod.
Kattints egy képre, és a Headers fülön ellenőrizd a content-type és rewrite esetén a vary fejlécet.
Hasonlítsd össze az átvitt méretet a korábbi állapottal.

Rewrite módszernél ne lepődj meg, ha az URL .jpg végződésű, mégis webp a típus. Ez a várt működés.

Laboratóriumi mérés

A PageSpeed Insights és a Lighthouse jelzi, ha vannak modern formátumra cserélhető képek, és mutatja a becsült megtakarítást. Mérj ugyanazon az oldalon, ugyanazzal az eszközbeállítással (mobil), többször, mert az egyes futások között szórás van. A labor adat jó a változás irányának megállapítására, de nem azonos a valós felhasználói élménnyel.

Terepi adatok

A Search Console Alapvető webes vitals jelentése és a PageSpeed Insights terepi része a valós Chrome felhasználók adatait mutatja. Ezek késleltetve frissülnek, egy változtatás hatása jellemzően csak hetek alatt látszik. Az LCP-re figyelj leginkább, mert ott hat a képoptimalizálás a legközvetlenebbül.

Saját mérési sablon

Az alábbi táblázat egy kitalált, szemléltető kiinduló és célállapotot mutat. A saját oldaladon ezeket a mezőket töltsd ki valós mérésből:

Mutató	Előtte (szemléltető)	Utána (szemléltető)	Forrás
Képek összmérete a főoldalon	2,4 MB	1,3 MB	Hálózat panel
LCP mobilon (labor)	3,8 s	2,9 s	PageSpeed Insights
Képekre vonatkozó javaslatok száma	14	2	Lighthouse
Jó URL-ek aránya (terepi)	rögzítsd	rögzítsd 28 nap múlva	Search Console

Mikor ne várj javulást?

Ha az LCP elemed szöveg, nem kép, a WebP keveset fog javítani rajta. Ugyanígy, ha a lassúság oka a szerver válaszideje vagy egy blokkoló szkript, a képek kisebbítése nem oldja meg. Ilyenkor a mérés éppen azt mutatja meg, hogy a szűk keresztmetszet máshol van, és ez is értékes eredmény.

Mérési ritmus

Bevezetés napján: technikai ellenőrzés és labor mérés.
Egy hét múlva: újabb labor mérés, hibajelzések átnézése a Search Console-ban.
Négy hét múlva: terepi adatok összevetése az alapállapottal.
Negyedévente: új sablon vagy bővítmény után ismételt ellenőrzés, mert egy frissítés csendben kikapcsolhatja a kiszolgálást.

Kapcsolódó részletes útmutatók

A WebP csak egy szelete a WordPress keresőoptimalizálásnak. Ha a képek rendben vannak, a következő lépés az, hogy a technikai alapokat, a meta adatokat és az indexelést is egységes rendszerbe tedd. Az alábbi útmutatók ebben segítenek, attól függően, melyik SEO bővítményt használod, vagy honnan indulnál.

Ha még nem döntöttél bővítményről, a teljes útmutatóval kezdj, mert ott látod, hol helyezkedik el a képoptimalizálás a tartalmi és technikai feladatok között. Ha már van SEO bővítményed, a hozzá tartozó útmutatóban nézd meg, hogyan kezeli a képeket a sitemapben, és hogyan állíthatod be a közösségi megosztási képeket, mert ezek a WebP váltás után is helyes URL-ekre kell mutassanak.

Ajánlott olvasnivaló

Merre tovább a WebP után?

A képformátum rendezése után a leggyakoribb következő lépések: a képméretek (srcset) ellenőrzése, a lusta betöltés helyes beállítása úgy, hogy az LCP kép ne legyen lusta, és a fájlnevek, alt szövegek egységesítése. Ezek együtt adják azt a képkezelést, amely egyszerre szolgálja a sebességet és a képkeresési láthatóságot. Ha az All in One SEO fut nálad, ott is érdemes átnézni a képekre vonatkozó beállításokat a váltás után.