Vaizdų Optimizavimas Svetainės Greičiui: Išsamus Vadovas

Vaizdai sudaro ~50% puslapio svorio. Jų optimizavimas suteikia didžiausią našumo prieaugį.

---

Kodėl Tai Svarbu

• 53% mobiliųjų vartotojų palieka puslapį po 3 sekundžių (Google)
• 1 sekundės vėlavimas = 7% mažiau konversijų
• LCP + CLS veikia Google reitingavimą

---

1 Žingsnis: Failo Formatas

• WebP — geriausias pasirinkimas (25–35% mažesnis už JPEG)
• PNG — permatomumas, logotipai
• JPEG — nuotraukos
• SVG — piktogramos
• AVIF — naujos kartos su atsarginiu variantu

---

2 Žingsnis: Glaudinimas

TinyImg — nemokamas, privatus, momentinis.

---

3 Žingsnis: Adaptyviuosius Vaizdai

<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 Žingsnis: Tingus Įkėlimas

<img src="image.webp" loading="lazy" alt="Aprašymas" width="800" height="600" />

Niekada nenaudokite tingumo įkėlimo vaizdams, matomsms be slinkties. Visada nustatykite plotį/aukštį.

---

5 Žingsnis: Matmenys

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

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

---

6 Žingsnis: CDN

Cloudflare, Cloudinary, imgix, Vercel.

---

7 Žingsnis: Matavimas

• LCP: < 2,5s | CLS: < 0,1 | Vaizdai: < 500KB
• Įrankiai: PageSpeed Insights, Lighthouse, WebPageTest

---

Kontrolinis Sąrašas

• WebP formatas
• Glaudinimas su TinyImg
• srcset + sizes
• Tingus įkėlimas (tik žemiau peržiūros srities)
• width + height
• CDN
• PageSpeed auditas

TinyImg — pradėkite čia.