Optimizacija slika za web — Formati, kompresija, lazy loading

Kompletni vodic: kako smanjiti velicinu slika za 50-80% bez vidljivog gubitka kvaliteta

1. Zasto su slike najveci problem za performanse

Prema HTTP Archive, slike cine prosecno 50% ukupne velicine web stranice. Na mnogim sajtovima to je i vise — e-commerce sa velikim fotografijama proizvoda moze imati 70-80% tezine u slikama.

• Prosecna web stranica: ~2.5 MB ukupno, od cega ~1.2 MB su slike
• Neoptimizovana hero slika: 2-5 MB sama — vise od cele stranice
• LCP uticaj: hero slika je najcesci LCP element — ako je velika, LCP je los
• Bandwidth: mobilni korisnici na 4G ucitavaju 1MB za ~0.8s. Svaki nepotreban MB = skoro sekunda kasnjenja

2. Formati: JPEG, PNG, WebP, AVIF

Format	Tip	Transparentnost	Animacija	Kompresija	Podrska
JPEG	Lossy	Ne	Ne	Dobra	100%
PNG	Lossless	Da	Ne (APNG da)	Slaba	100%
WebP	Oba	Da	Da	25-35% bolja od JPEG	97%+
AVIF	Oba	Da	Da	50% bolja od JPEG	93%
GIF	Lossless	Da (1-bit)	Da	Losa	100%
SVG	Vektor	Da	Da (CSS/JS)	N/A (tekst)	100%

Kada koristiti koji format

• Fotografije: AVIF > WebP > JPEG. Koristite <picture> sa fallback-om.
• Ikone, logotipi, ilustracije: SVG (vektorski, beskonacno skalabilan, mali).
• Transparentne slike: WebP ili AVIF (zamena za PNG). PNG samo kao fallback.
• Animacije: Video (MP4/WebM) umesto GIF-a. GIF od 5MB = MP4 od 500KB.
• Screenshot-ovi: WebP lossless ili PNG (ostar tekst).

3. Kompresija: lossy vs lossless

Lossy kompresija

Uklanja podatke koje ljudsko oko tesko primecuje. Svaka konverzija gubi kvalitet — ne kompresujte vec kompresovanu sliku ponovo.

• JPEG kvalitet 80% — optimalan balans velicine i kvaliteta. 80% je vizuelno identicno 100% za vecinu fotografija.
• WebP kvalitet 75-80% — ekvivalentan JPEG 85-90% po vizuelnom kvalitetu.
• AVIF kvalitet 60-70% — ekvivalentan JPEG 85% ali dramaticno manji fajl.

Lossless kompresija

Smanjuje velicinu bez gubitka podataka. Za PNG, alati kao TinyPNG smanjuju velicinu za 40-70% lossless optimizacijom (uklanjanje metapodataka, bolja kompresija).

<!-- Primer velicina za istu fotografiju 1200x630 -->
Original PNG:      2.4 MB  (100%)
PNG optimizovan:   1.1 MB  (46%)
JPEG 80%:          180 KB  (7.5%)
WebP 80%:          130 KB  (5.4%)
AVIF 65%:           85 KB  (3.5%)

4. Responsive images: srcset i sizes

Ne servirajte istu 1200px sliku mobilnom korisniku na 400px ekranu. srcset i sizes dozvoljavaju browseru da izabere optimalnu velicinu.

<img
  src="photo-800.webp"
  srcset="photo-400.webp 400w,
         photo-800.webp 800w,
         photo-1200.webp 1200w,
         photo-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1000px) 80vw,
         1200px"
  alt="Opis fotografije"
  width="1200" height="630"
  loading="lazy"
>

Kako radi

• srcset — lista slika sa njihovom sirinom (400w = slika od 400px)
• sizes — koliko prostora slika zauzima na razlicitim ekranima
• Browser bira — na osnovu ekrana, DPI-ja i konekcije, browser sam izabere optimalnu sliku
• src — fallback za stare browsere koji ne podrzavaju srcset

5. Art direction: picture element

<picture> element vam daje potpunu kontrolu — razlicit crop, format ili cak potpuno razlicita slika za razlicite ekrane:

<picture>
  <!-- AVIF za browsere koji podrzavaju -->
  <source type="image/avif"
    srcset="photo-400.avif 400w, photo-800.avif 800w, photo-1200.avif 1200w"
    sizes="(max-width:600px) 100vw, 1200px">

  <!-- WebP fallback -->
  <source type="image/webp"
    srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
    sizes="(max-width:600px) 100vw, 1200px">

  <!-- JPEG za stare browsere -->
  <img src="photo-800.jpg" alt="Opis" width="1200" height="630" loading="lazy">
</picture>

<!-- Art direction: razlicit crop za mobile -->
<picture>
  <source media="(max-width: 600px)" srcset="photo-mobile-crop.webp">
  <source media="(max-width: 1000px)" srcset="photo-tablet.webp">
  <img src="photo-desktop.webp" alt="Opis" width="1200" height="630">
</picture>

6. Lazy loading

Lazy loading odlaze ucitavanje slika dok korisnik ne skroluje do njih. Dramaticno smanjuje inicijalni page load.

Native lazy loading (preporuceno)

<!-- Jednostavno — samo dodajte atribut -->
<img src="photo.webp" alt="Opis" width="800" height="450" loading="lazy">

<!-- Iframe takodje -->
<iframe src="https://youtube.com/embed/..." loading="lazy"></iframe>

Pravila za lazy loading

• NE stavljajte na hero sliku! Hero/LCP slika mora se ucitati odmah. loading="lazy" bi usporilo LCP.
• NE stavljajte na above-the-fold slike — slike vidljive bez skrolovanja trebaju loading="eager" (default).
• Koristite na svim ostalim slikama — galerije, clanci, footer slike.
• fetchpriority="high" na hero slici za eksplicitno visok prioritet.

<!-- Hero slika — NE lazy, visok prioritet -->
<img src="hero.webp" alt="Hero" width="1200" height="630"
     fetchpriority="high" decoding="async">

<!-- Slike u clanku — lazy -->
<img src="diagram.webp" alt="Dijagram" width="800" height="450" loading="lazy">
<img src="screenshot.webp" alt="Screenshot" width="800" height="450" loading="lazy">

7. Width i height — sprecavanje CLS

Bez width i height atributa, browser ne zna koliko prostora da rezervise. Kad slika stigne, sadrzaj se pomeri — to je layout shift (CLS). Detaljnije u Core Web Vitals vodicu.

<!-- LOSE — uzrokuje CLS -->
<img src="photo.webp" alt="Opis">

<!-- DOBRO — rezervise prostor, responsive -->
<img src="photo.webp" alt="Opis" width="1200" height="630"
     style="max-width:100%; height:auto;">

<!-- TAKODJE DOBRO — CSS aspect-ratio -->
<img src="photo.webp" alt="Opis" style="aspect-ratio:16/9; width:100%;">

8. CDN za slike

Image CDN automatski optimizuje, resizuje i konvertuje slike na letu. Ne morate rucno praviti 4 velicine u 3 formata.

Servis	Besplatan tier	Auto-format	Resize	Napomena
Cloudinary	25 kredita/mesec	Da (f_auto)	Da	Najpopularniji, odlican API
imgix	Ne (trial)	Da	Da	Enterprise fokus, brz
Cloudflare Images	Ne ($5/100K)	Da	Da	Integrisan sa Cloudflare CDN
Bunny Optimizer	500 besplatno	Da	Da	Najjeftiniji za volume
Vercel Image	1000/mesec	Da	Da	Automatski za Next.js

<!-- Cloudinary primer — automatski format i resize -->
<img src="https://res.cloudinary.com/vasnalog/image/upload/w_800,f_auto,q_auto/photo.jpg"
     alt="Opis" width="800" height="450" loading="lazy">

<!-- URL parametri: w_800 = sirina, f_auto = format, q_auto = kvalitet -->

9. Alati za optimizaciju

• Squoosh — besplatan, radi u browseru. Vizuelno poredjenje pre/posle sa slider-om. Podrzava WebP, AVIF, MozJPEG. Najbolji za pojedinacne slike.
• TinyPNG/TinyJPG — besplatan za do 20 slika odjednom. Odlican za batch PNG/JPEG optimizaciju. API za automatizaciju.
• ImageOptim — macOS desktop app. Lossless optimizacija, batch processing, drag-and-drop.
• Sharp — Node.js biblioteka za programsku konverziju. Najbrzi za build pipeline. sharp('input.jpg').webp({quality:80}).toFile('output.webp')
• cwebp / avifenc — command-line alati za batch konverziju u WebP/AVIF.
• Web Security Scanner — proverava da li slike na sajtu imaju alt tekst, lazy loading i optimalne dimenzije.

10. Najcesce greske

• 4000px slike za 800px kontejner — #1 greska. Koristite srcset sa vise velicina.
• PNG za fotografije — PNG je za ikone/ilustracije sa transparentnoscu. Za foto: WebP ili JPEG.
• GIF za animacije — GIF od 5MB = MP4 od 500KB. Koristite <video autoplay loop muted>.
• Lazy loading na hero slici — usporava LCP. Hero slika mora biti eager + fetchpriority="high".
• Bez width/height — uzrokuje CLS. SVAKA slika mora imati dimenzije.
• Bez alt teksta — lose za SEO i pristupacnost. Svaka slika treba opisni alt.
• Jedan format za sve — koristite <picture> sa AVIF + WebP + JPEG fallback.
• Re-kompresija — ucitavanje JPEG, editovanje, cuvanje kao JPEG ponovo. Svaka konverzija gubi kvalitet. Cuvajte originale.
• Inline base64 slike — za sitne ikone OK (<1KB), ali za vece slike base64 je 33% veci od binarnog i ne kesira se zasebno.

11. Reference i resursi

• web.dev — Choose the Right Image Format
• web.dev — Browser-Level Lazy Loading
• MDN — <picture> element
• MDN — Responsive Images
• Squoosh — Image Optimizer
• HTTP Archive — Page Weight
• Can I Use — WebP Support
• Can I Use — AVIF Support

Proverite optimizaciju slika na vasem sajtu →

<!-- Same 1200x630 photo, different formats -->
PNG original:    2.4 MB (100%)
PNG optimized:   1.1 MB (46%)
JPEG 80%:        180 KB (7.5%)
WebP 80%:        130 KB (5.4%)
AVIF 65%:         85 KB (3.5%)

<img src="photo-800.webp"
  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
  sizes="(max-width:600px) 100vw, (max-width:1000px) 80vw, 1200px"
  alt="Description" width="1200" height="630" loading="lazy">

<!-- Simply add the attribute -->
<img src="photo.webp" alt="Desc" width="800" height="450" loading="lazy">