Mobilos képoptimalizálás és lazy loading, hogyan gyorsítsd fel az oldaladat?

A képek teszik ki a legtöbb weboldal adatforgalmának 50–70%-át. Mobilon, ahol a sávszélesség korlátozott, a nem optimalizált képek az egyik legnagyobb teljesítménygyilkos.

1. Szint: Megfelelő formátum

• WebP, Minden mai böngésző támogatja. Ugyanolyan minőség mellett 25–35%-kal kisebb fájlméret, mint JPEG/PNG.
• AVIF, Még újabb formátum, JPEG-hez képest akár 50%-os méretcsökkentés.

Mikor melyiket használd?
- Fotók, termékképek → WebP (JPEG helyett)
- Logók, ikonok átlátszósággal → WebP (PNG helyett)
- Ha maximális tömörítés kell → AVIF (fallback WebP-vel)

```html
<picture>
<source srcset="kep.avif" type="image/avif">
<source srcset="kep.webp" type="image/webp">
<img src="kep.jpg" alt="Leíró szöveg" width="800" height="600">
</picture>
```

Ne tölts be 2000px széles képet egy 375px széles telefonra! A srcset attribútum lehetővé teszi, hogy a böngésző a képernyőméretnek megfelelő képet töltse be.

```html
<img
src="termek-800w.jpg"
srcset="
termek-400w.jpg 400w,
termek-800w.jpg 800w,
termek-1200w.jpg 1200w
"
sizes="
(max-width: 768px) 100vw,
(max-width: 1024px) 50vw,
33vw
"
alt="Termék neve"
width="800" height="600"
>
```

Hogyan értelmezi a böngésző:
- Mobilon (max. 768px): 100vw → letölti a 400w képet
- Tableten (768–1024px): 50vw → letölti a 800w képet
- Asztali gépen: 33vw → letölti az 1200w képet

Eredmény: Mobilon akár 60–70%-kal kisebb adatforgalom!

Optimális tömörítés: JPEG esetén 75–85%, WebP esetén 80% minőség elegendő.

Ingyenes eszközök: Squoosh (squoosh.app), TinyPNG (tinypng.com), ImageOptim (Mac)

A lazy loading azt jelenti, hogy a képek csak akkor töltődnek be, amikor a látogató közel görget hozzájuk. Ez gyorsítja az oldal kezdeti betöltését, különösen mobilon.

Natív lazy loading (ajánlott):
```html
<img src="termek.jpg" alt="Termék" loading="lazy" width="400" height="300">
```

A loading="lazy" attribútum 2019 óta minden modern böngészőben támogatott. Nincs szükség JavaScript könyvtárra.

Mikor NE használj lazy loadingot?

Az LCP-képre soha ne alkalmazz lazy loadingot! Az LCP-kép az, amit a felhasználó elsőként lát, ha lazy loadingot alkalmazol rá, az LCP-érték romlani fog.

```html
<!-- Főkép (LCP): eager betöltés -->
<img src="hero.jpg" alt="Hero kép" loading="eager" fetchpriority="high">

<!-- Képernyőn kívüli képek: lazy betöltés -->
<img src="termek-5.jpg" alt="5. termék" loading="lazy">
```

A fetchpriority="high" attribútummal explicit módon megmondhatod a böngészőnek, hogy ezt a képet töltse be elsőként, akár 0,3–0,5 másodperccel csökkentheti az LCP-értéket.

Ha WordPress-t használsz, ezek a pluginek elvégzik a legtöbb optimalizálást automatikusan:

• Smush, Tömörítés, WebP konvertálás, lazy load (alapcsomag ingyenes)
• Imagify, WebP/AVIF, srcset generálás (korlátozott ingyenes)
• ShortPixel, AVIF támogatás, bulk optimalizálás (100 kép/hó ingyenes)
• Cloudflare, CDN + automatikus WebP (ingyenes alaptér)

Képoptimalizálás ellenőrző lista:
- Képek WebP formátumban mentve?
- srcset attribútum beállítva különböző méretekhez?
- width és height attribútum minden képnél megadva (CLS-megelőzés)?
- LCP-képen loading="eager" és fetchpriority="high"?
- Képernyőn kívüli képeken loading="lazy"?
- Mobilon max. 400px széles képek?
- PageSpeed Insights nem jelez "Képek megfelelő méretezése" hibát?

Egy kecskeméti virágüzlet webshopja 2026 elején átlagosan 4,1 másodperces mobilos LCP értékkel rendelkezett — a PageSpeed Insights "Piros" minősítéssel jelezte a Core Web Vitals problémát. A legnagyobb tételek: 18 termékoldal volt, ahol a főkép 1–2,8 MB méretű JPEG volt, mobilra optimalizálás nélkül.

Az elvégzett lépések:
- Minden termékkép WebP formátumba konvertálva (Squoosh eszközzel): átlagos fájlméret 1,4 MB-ról 180 KB-ra csökkent
- srcset attribútum hozzáadva: mobilon 400px, tableten 800px, asztali gépen 1200px széles kép töltődik be
- A főtermékkép (LCP-kép) fetchpriority="high" attribútumot kapott, a loading="lazy" eltávolítva
- Minden képhez width és height attribútum hozzáadva a CLS-megelőzés érdekében
- A Lazy loading (késleltetett betöltés) csak a képernyőn kívüli termékképeken maradt
- AMP (Accelerated Mobile Pages) technológia megvizsgálva, de a webshop komplexitása miatt nem lett bevezetve

Eredmény 4 hét után: Mobilos LCP 4,1 s → 1,7 s (zöld). Az oldalsebesség (page speed) PageSpeed Insights pontszáma mobilon 34-ről 78-ra emelkedett. A mobilos kosárba-helyezési arány 1,2%-ról 2,3%-ra nőtt — ezt a javulást a gyorsabb betöltési idő okozta.

• Hiba: Lazy loading az LCP-képen. Ha a főkép (hero banner, első termékfotó) loading="lazy" attribútumot kap, a böngésző késlelteti a betöltését. Ez az egyetlen leggyakoribb ok, amiért a mobilos LCP 3–6 másodperc fölé ugrik. Az LCP-kép mindig loading="eager" és fetchpriority="high" legyen.
• Hiba: srcset nélküli, nagy képek. Ha a termékoldalon 1800px széles képet töltest be egy 375px széles telefonra, a böngésző az adatmennyiség 95%-át pazarolja el. Az srcset attribútum hozzáadása mobilon 60–70%-kal csökkentheti a képforgalmat — ez az egyik legolcsóbb és legjobb megtérülésű optimalizálás.
• Hiba: width/height attribútum hiánya. Ha a képeknél nincs megadva a width és height attribútum, a böngésző nem tudja lefoglalni a helyet betöltés előtt. Ez layout shifteket okoz, növelve a CLS értéket mobilon. Minden képnél add meg a pontos méreteket — akár a CSS aspect-ratio tulajdonsággal is megoldható.

A mobilos képoptimalizálás és a lazy loading a mobilos oldalsebesség két legerősebb optimalizálási eszköze. 2026-ban a WebP formátum, a srcset attribútum és a fetchpriority helyes alkalmazása önmagában akár 2–3 másodperccel csökkentheti a mobilos LCP-értéket. A legfontosabb szabály: az LCP-képen soha ne legyen lazy loading, és minden képre adj meg width/height attribútumot.

A képoptimalizálás elvégzése után a következő lépés a JavaScript-optimalizálás: a third-party szkriptek késleltetése és a code splitting bevezetése tovább csökkenti a mobilos INP és LCP értékeket.

1. Futtasd le a PageSpeed Insights Mobil fülét és azonosítsd a "Képek megfelelő méretezése" hibákat.
2. Konvertáld az összes termékkép fájlt WebP formátumba (ingyenes: squoosh.app).
3. Addsz srcset attribútumot a legfontosabb képekhez, és ellenőrizd az LCP-képet.

Ha a képoptimalizálást és a teljes mobilos SEO-t automatizáltan szeretnéd kezelni, a Publicator AI segíthet a folyamatos teljesítménykarbantartásban. 👉 Csomag megismerése