Optimizacija Slika za Brzinu Web Stranice: Potpuni Vodič

Slike čine ~50% težine stranice. Njihova optimizacija donosi najveći skok u performansama.

---

Zašto Je To Važno

• 53% korisnika mobitela napušta stranicu nakon 3 sekunde (Google)
• Kašnjenje od 1 sekunde = 7% manje konverzija
• LCP + CLS utječu na rang u Google pretraživanju

---

Korak 1: Format Datoteke

• WebP — najbolji izbor (25–35% manji od JPEG-a)
• PNG — prozirnost, logotipi
• JPEG — fotografije
• SVG — ikone
• AVIF — nova generacija s fallbackom

---

Korak 2: Kompresija

TinyImg — besplatno, privatno, trenutačno.

---

Korak 3: Responzivne 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" />

Nikada ne koristite lazy loading za slike vidljive bez skrolanja. Uvijek postavite širinu/visinu.

---

Korak 5: Dimenzije

<img src="photo.webp" alt="Foto" 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: Mjerenje

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

---

Kontrolna Lista

• WebP format
• Kompresija s TinyImg
• srcset + sizes
• Lazy load (samo ispod folda)
• width + height
• CDN
• PageSpeed provjera

TinyImg — počnite ovdje.