Képoptimalizálás a Weboldal Sebességéért: Teljes Útmutató

A képek az oldalak súlyának ~50%-át teszik ki. Az optimalizálásuk a legnagyobb teljesítménynövekedést hozza.

---

Miért Fontos

• A mobilfelhasználók 53%-a elhagyja az oldalt 3 másodperc után (Google)
• 1 másodperces késés = 7%-kal kevesebb konverzió
• Az LCP + CLS befolyásolja a Google-rangsorolást

---

1. lépés: Formátum

• WebP — a legjobb választás (25–35%-kal kisebb, mint JPEG)
• PNG — átlátszóság, logók
• JPEG — fényképek
• SVG — ikonok
• AVIF — következő generáció fallbackkel

---

2. lépés: Tömörítés

TinyImg — ingyenes, privát, azonnali.

---

3. lépés: Reszponzív Képek

<img src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Alt" width="800" height="600" />

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Alt" width="800" height="600" />
</picture>

---

4. lépés: Lazy Loading

<img src="image.webp" loading="lazy" alt="Leírás" width="800" height="600" />

Soha ne alkalmazz lazy loadingot az oldal tetején látható képeknél. Mindig add meg a szélességet/magasságot.

---

5. lépés: Méretek

<img src="photo.webp" alt="Fotó" width="800" height="600" />

img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }

---

6. lépés: CDN

Cloudflare, Cloudinary, imgix, Vercel.

---

7. lépés: Mérés

• LCP: < 2,5s | CLS: < 0,1 | Képek: < 500KB
• Eszközök: PageSpeed Insights, Lighthouse, WebPageTest

---

Ellenőrzőlista

• WebP formátum
• Tömörítés a TinyImg eszközzel
• srcset + sizes
• Lazy load (csak a fold alatt)
• width + height
• CDN
• PageSpeed audit

TinyImg — kezdd itt.