Egy átlagos weboldal letöltött adatmennyiségének legnagyobb részét a képek adják, ezért a képoptimalizálás a legegyszerűbb és leghatásosabb gyorsítás. Egy telefonnal készült, 5 MB-os fotó egy blogbejegyzésben önmagában másodpercekkel lassíthatja a betöltést mobilneten, miközben egy jól előkészített, 100–200 KB-os változat a képernyőn ugyanolyan jól néz ki.

Ebben az útmutatóban végigvesszük, melyik képformátumot mikor használd, hogyan készítsd elő a képeket feltöltés előtt, mit csinál ebből a WordPress magától, milyen bővítmények segítenek, hogyan kezeld a lusta betöltést és a legfontosabb (LCP) képet, és mire figyelj a kép-SEO-nál. A tanácsok többsége bármilyen weboldalra érvényes, nem csak WordPressre.

Miért számít?

• Sebesség: a nagy képek lassítják a betöltést, különösen mobilon. A Google Core Web Vitals mutatói közül a Largest Contentful Paint (LCP), vagyis a legnagyobb látható elem megjelenési ideje az oldalak többségén egy kép, ezért a képoptimalizálás közvetlenül javítja.
• Elrendezés-stabilitás: a méret nélküli képek betöltéskor „ugráltatják” a szöveget, ezt a Cumulative Layout Shift (CLS) mutató méri.
• Tárhely és forgalom: a kisebb képek kevesebb tárterületet és adatforgalmat használnak, és a mentések is kisebbek.
• SEO: a gyorsabb oldal jobb felhasználói élményt ad, a jól elnevezett, alternatív szöveggel ellátott képek pedig a képkeresőben is megtalálhatók.

Melyik formátumot válaszd?

Formátum	Mire jó	Megjegyzés
AVIF	Fotók, a legkisebb fájlméret	Minden modern böngésző támogatja; WordPress 6.5 óta feltölthető, ha a szerver képkönyvtára kezeli
WebP	Fotók és grafikák, átlátszósággal is	Általában 25–35%-kal kisebb a JPEG-nél, minden modern böngésző támogatja
JPEG	Fotók	Univerzális, de nagyobb, mint a WebP és az AVIF
PNG	Képernyőképek, éles szélű grafikák, átlátszóság	Fotókhoz nagy; WebP-vel általában kiváltható
SVG	Logók, ikonok, egyszerű grafikák	Vektoros, bármekkora méretben éles és kicsi; feltöltése biztonsági okból csak ellenőrzött forrásból javasolt
GIF	–	Animációhoz is jobb egy rövid MP4 vagy WebM videó

A gyakorlati szabály: fotókhoz WebP (vagy AVIF), logókhoz SVG, képernyőképekhez WebP vagy PNG. Ha bizonytalan vagy, a WebP jó alapértelmezés.

Előkészítés feltöltés előtt

1. Méretezd át. Egy blogbejegyzés tartalmi része jellemzően 700–1200 pixel széles; egy teljes szélességű fejléckép 1920 pixel. Egy 6000 pixeles fényképezőgép-fotót soha ne tölts fel eredeti méretben.
2. Tömöríts. A legtöbb fotónál 75–85%-os minőség (JPEG vagy WebP esetén) szemmel nem különböztethető meg az eredetitől, a fájlméret viszont töredéke. Jó célérték egy tartalmi fotóhoz: 100–200 KB, egy nagy fejlécképhez: 200–400 KB.
3. Vágd ki, ami nem kell: a kisebb képterület kisebb fájlt is jelent.
4. Távolítsd el a metaadatokat (EXIF): a kamera adatai és a GPS-koordináták feleslegesen növelik a fájlt, és adatvédelmi kockázatot is jelentenek.
5. Adj beszédes fájlnevet: budapest-iroda-tárgyaló.webp helyett ékezet nélkül budapest-iroda-targyalo.webp, nem IMG_4567.jpg.

Eszközök: a böngészőben a Squoosh (a Google ingyenes eszköze), a TinyPNG (róla külön cikkünk szól), asztali gépen a GIMP vagy a Photoshop „exportálás webre” funkciója, sok kép kötegelt feldolgozására pedig az ImageMagick.

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

• Több méretet generál minden feltöltött képből (bélyegkép, közepes, nagy), és a srcset attribútummal a böngésző a kijelzőhöz illő méretet tölti le.
• Lekicsinyíti a túl nagy képeket: a 2560 pixelnél szélesebb képekből egy lekicsinyített változatot használ (az eredetit megtartja).
• Lusta betöltés: a látható területen kívüli képekre automatikusan loading="lazy" attribútumot tesz, így csak akkor töltődnek be, ha a látogató odagörget.
• A fő kép elsőbbsége: az első, valószínűleg legnagyobb képnél a lusta betöltést kihagyja, és fetchpriority="high" jelzéssel előre veszi.
• Méretek: a width és height attribútumokat megadja, ami csökkenti az elrendezés ugrálását.
• WebP és AVIF: a WordPress kezeli a WebP-t, a 6.5-ös verzió óta az AVIF-et is, ha a szerver képkönyvtára (Imagick vagy GD) támogatja.

Ami nem automatikus: a feltöltött képek tömörítése és az új formátumra konvertálása. Erre valók a bővítmények.

Képoptimalizáló bővítmények

Bővítmény	Jellemző
ShortPixel	Felhőalapú tömörítés, WebP/AVIF, a meglévő képek kötegelt optimalizálása; havi ingyenes kerettel
Imagify	Egyszerű kezelés, három tömörítési szint, WebP/AVIF
EWWW Image Optimizer	Helyben, a szerveren is tömöríthet, így nincs külső kvóta
Smush	Ingyenes alapváltozat veszteségmentes tömörítéssel, a fejlettebb funkciók fizetősek

Mindegyik képes a már feltöltött képeket is utólag optimalizálni (kötegelt feldolgozás). Néhány tanács:

• Egy bővítményt használj, és ha a gyorsítótárazó bővítményed is optimalizál képeket, ott kapcsold ki.
• Tartsd meg az eredetit (a legtöbb bővítmény felajánlja), hogy később visszaállíthasd.
• Megosztott tárhelyen a helyi feldolgozás sok kép esetén elérheti a fiók CPU-limitjét; a felhőalapú bővítmények ezt elkerülik, vagy futtasd a kötegelt feldolgozást kisebb adagokban, alacsony forgalmú időszakban.
• A WebP/AVIF kiszolgálása történhet <picture> elemmel vagy a szerver .htaccess szabályaival; ha CDN-t használsz, nézd meg, melyik módot támogatja.

Videó: Image optimization (WordPress, angol nyelvű)

Lusta betöltés és az LCP-kép

A lusta betöltés (lazy loading) a görgetés alatti képeknél gyorsít, de a fő képet (hero, kiemelt kép) soha ne töltsd lustán: annak minél előbb meg kell jelennie, különben az LCP romlik. A WordPress ezt alapból jól kezeli, de egyes sablonok, oldalépítők vagy bővítmények minden képre ráteszik a lusta betöltést. Ellenőrizd a PageSpeed Insights jelentésében: ha a „Largest Contentful Paint image was lazily loaded” figyelmeztetést látod, kapcsold ki a lusta betöltést az első képre.

További tippek az LCP-képhez:

• legyen a lehető legkisebb (WebP vagy AVIF, megfelelő méret),
• ne háttérképként, CSS-ből töltődjön be, hanem <img> elemként,
• egy lassú slider helyett használj egyetlen statikus képet.

CDN

Egy tartalomkézbesítő hálózat (CDN) a képeket a látogatóhoz közeli szerverről szolgálja ki, és sok CDN képes a képeket menet közben átméretezni és WebP/AVIF formátumra alakítani. Akkor hasznos, ha sok látogatód érkezik távolabbról, vagy sok képet töltesz be. A beállításáról CDN útmutatónk szól.

Kép-SEO és akadálymentesség

• Alternatív szöveg (alt): röviden írd le, mi látható a képen. A képernyőolvasót használó látogatóknak ez a kép tartalma, a keresőknek pedig a legfontosabb jel. A tisztán díszítő képeknél üresen hagyható.
• Fájlnév: beszédes, ékezet nélküli, kötőjelekkel tagolt.
• Felirat és környező szöveg: a kép mellett lévő szöveg is segít a keresőknek megérteni a képet.
• Képtérkép: a SEO-bővítmények általában a képeket is felveszik az oldaltérképbe.

Ellenőrzés

• PageSpeed Insights és Lighthouse: megmutatják a túl nagy, rossz formátumú vagy lustán betöltött LCP-képeket. A mérésről weboldalsebesség-mérési útmutatónk szól.
• A böngésző fejlesztői eszközei (F12 › Hálózat, „Img” szűrővel): itt látod, mekkora képek töltődnek le valójában.

Összefoglalás

Méretezd át és tömörítsd a képeket feltöltés előtt, használj WebP-t (vagy AVIF-et) a fotókhoz és SVG-t a logókhoz, egy képoptimalizáló bővítménnyel dolgozd fel a meglévő képeket, a fő képet ne töltsd lustán, és adj minden tartalmi képnek alternatív szöveget. Ezekkel a lépésekkel a legtöbb weboldal betöltési ideje jelentősen csökken.

Az aWh WordPress tárhelyei NVMe SSD-n, HTTP/2-vel futnak, napi mentéssel, így a gyors képekhez gyors kiszolgálás is társul.

Gyakori kérdések

Melyik a legjobb képformátum WordPresshez?

Fotókhoz a WebP vagy az AVIF, logókhoz és ikonokhoz az SVG, képernyőképekhez a WebP vagy a PNG.

Rontja a tömörítés a képek minőségét?

A veszteséges tömörítés elvileg igen, de 75–85%-os minőségnél a különbség szemmel jellemzően nem látható, a fájlméret viszont töredéke lesz. Ha a minőség kritikus (például fotós portfóliónál), válassz enyhébb tömörítést.

Mekkora legyen egy kép?

Egy tartalmi fotó 100–200 KB, egy teljes szélességű fejléckép 200–400 KB körül jó cél, a megjelenítési méretnek megfelelő pixelmérettel.

Hogyan optimalizálom a már feltöltött képeket?

Egy képoptimalizáló bővítmény kötegelt feldolgozásával (Bulk Optimization). Előtte készíts mentést, és nagy médiatárnál futtasd alacsony forgalmú időszakban.

Kell minden képhez alternatív szöveg?

Minden tartalmi képhez igen; a tisztán díszítő képeknél üresen hagyható, hogy a képernyőolvasó átugorja.

Miért írja a PageSpeed, hogy használjak modern képformátumot?

Mert a képeid JPEG vagy PNG formátumúak, és WebP-ben vagy AVIF-ben jóval kisebbek lennének. Egy képoptimalizáló bővítmény ezt automatikusan elvégzi.

Lassíthatja az oldalt egy képoptimalizáló bővítmény?

A kiszolgálást nem, de a tömörítés futása megosztott tárhelyen terhelheti a fiókot, különösen helyi feldolgozásnál. Ilyenkor válassz felhőalapú tömörítést, vagy futtasd a feldolgozást kisebb adagokban.

• képoptimalizálás
• wordpress
• weboldal sebesség
• core web vitals
• útmutató