Optimizacija Slik za Hitrost Spletnega Mesta: Popoln Vodič

Slike predstavljajo ~50% teže strani. Njihova optimizacija prinaša največji dobiček pri zmogljivosti.

---

Zakaj Je To Pomembno

• 53% mobilnih uporabnikov zapusti stran po 3 sekundah (Google)
• 1 sekunda zamude = 7% manj konverzij
• LCP + CLS vplivata na uvrstitev v Googlu

---

Korak 1: Format Datoteke

• WebP — najboljša izbira (25–35% manjši od JPEG)
• PNG — prosojnost, logotipi
• JPEG — fotografije
• SVG — ikone
• AVIF — naslednja generacija s fallbackom

---

Korak 2: Stiskanje

TinyImg — brezplačno, zasebno, takojšnje.

---

Korak 3: Odzivne Slike

<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>

---

Korak 4: Lazy Loading

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

Nikoli ne uporabljajte lazy loadinga za slike, vidne brez drsenja. Vedno nastavite širino/višino.

---

Korak 5: Dimenzije

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

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

---

Korak 6: CDN

Cloudflare, Cloudinary, imgix, Vercel.

---

Korak 7: Merjenje

• LCP: < 2,5s | CLS: < 0,1 | Slike: < 500KB
• Orodja: PageSpeed Insights, Lighthouse, WebPageTest

---

Kontrolni Seznam

• Format WebP
• Stiskanje z TinyImg
• srcset + sizes
• Lazy load (samo pod foldom)
• width + height
• CDN
• PageSpeed revizija

TinyImg — začnite tukaj.