Ažurirano u kolovozu 2026.: članak je usklađen s novim standardima — dodana je sekcija s često postavljanim pitanjima, ažurirani izvori, interni linkovi i napomena o izvornoj AVIF podršci u WordPressu 6.5+. Original objavljen u lipnju 2026.
U modernom digitalnom dobu, vizualni sadržaj postao je temelj svake uspješne web stranice. Slike visoke razlučivosti privlače pažnju korisnika, smanjuju stopu napuštanja stranice (bounce rate) i drastično poboljšavaju cjelokupno korisničko iskustvo (UX). Međutim, postoji i tamna strana privlačnih vizuala. Prema Web Almanacu (HTTP Archive), slike čine najveći pojedinačni dio “težine” prosječne web stranice — na mnogima više od 50%. Ako tim resursima ne upravljate pravilno, vaša će se predivno dizajnirana stranica učitavati presporo, što izravno šteti vašem poslovanju.
Kada se web stranica sporo učitava, gubite posjetitelje i prije nego što vide vašu ponudu. Google je kroz svoje Core Web Vitals metriku (posebno kroz Largest Contentful Paint ili LCP) jasno dao do znanja da je brzina učitavanja kritičan faktor za rangiranje na tražilicama — sve tri metrike i njihove pragove detaljno sam objasnio u vodiču za Core Web Vitals. Optimizacija slika stoga nije luksuz ili sporedni zadatak za programere – to je apsolutni prioritet za svakoga tko želi brzu, modernu i SEO-optimiziranu web stranicu. U ovom sveobuhvatnom vodiču detaljno ćemo proći kroz formate slika (JPEG, PNG, WebP, AVIF), tehnike kompresije i najbolje prakse koje će transformirati performanse vašeg weba.
Razumijevanje formata slika: Tradicionalni naspram modernih rješenja
Izbor pravog formata datoteke prvi je i najvažniji korak u procesu optimizacije. Korištenje pogrešnog formata može rezultirati time da slika bude i do deset puta veća nego što je potrebno, ili da izgubi na oštrini i profesionalnom izgledu. Formate općenito dijelimo na tradicionalne (raster i vektorske formate koji su s nama desetljećima) i moderne formate sljedeće generacije (next-gen formats) koje Google snažno preporučuje.
JPEG (Joint Photographic Experts Group)
JPEG je najstariji i najrašireniji format za fotografije na internetu. Njegova najveća prednost leži u činjenici da može prikazati milijune boja, što ga čini idealnim za kompleksne fotografije s mnogo detalja, sjena i prijelaza boja. JPEG koristi takozvanu kompresiju s gubitkom (lossy compression), što znači da prilikom smanjivanja veličine datoteke algoritam trajno odbacuje određene vizualne podatke koje ljudsko oko teže primjećuje.
Glavni nedostatak JPEG formata je što ne podržava prozirnost (transparentnost). Ako pokušate spremiti logotip s prozirnom pozadinom kao JPEG, on će automatski dobiti bijelu ili crnu pozadinu. Također, ako previše komprimirate JPEG sliku, pojavit će se prepoznatljivi “artefakti” i zamućenja oko oštrih rubova.
PNG (Portable Network Graphics)
Za razliku od JPEG-a, PNG je format koji koristi kompresiju bez gubitaka (lossless compression). To znači da slika zadržava savršenu kvalitetu piksela, bez obzira koliko je puta spremali. Najveća snaga PNG-a je podrška za prozirnost (putem takozvanog alfa kanala), zbog čega je ovaj format postao industrijski standard za logotipe, ikone, ilustracije i grafike s oštrim linijama i tekstom.
Međutim, zadržavanje savršene kvalitete dolazi uz visoku cijenu. PNG datoteke su izuzetno velike (“teške”). Ako na svoju web stranicu postavite klasičnu fotografiju u PNG formatu, ona može lako težiti nekoliko megabajta, što će doslovno paralizirati učitavanje na mobilnim mrežama.
WebP: Standard moderne web optimizacije
WebP je format koji je razvio Google s jasnim ciljem – stvoriti manju i bržu alternativu za JPEG i PNG, bez vidljivog gubitka kvalitete. WebP je svestran format jer podržava i kompresiju s gubitkom i kompresiju bez gubitaka, a ujedno podržava prozirnost i animacije (kao zamjena za zastarjeli GIF).
Brojne studije i testiranja pokazuju da su WebP slike u prosjeku 25% do 35% manje od ekvivalentnih JPEG ili PNG datoteka pri istoj vizualnoj kvaliteti. Danas svi moderni web preglednici (Chrome, Safari, Firefox, Edge) u potpunosti podržavaju WebP, zbog čega je ovaj format postao standard za bazičnu optimizaciju modernih web stranica.
AVIF (AV1 Image File Format): Budućnost je stigla
AVIF je najnoviji format slike sljedeće generacije, temeljen na naprednom video kodeku AV1. Smatra se tehnološkim vrhuncem kada je u pitanju kompresija slika za web. AVIF pruža nevjerojatnu efikasnost – slike mogu biti i do 50% manje od JPEG-a i oko 20% manje od WebP-a, zadržavajući pritom zapanjujuću oštrinu, bogatstvo boja i podršku za HDR (High Dynamic Range).
Iako je AVIF u početku patio od slabe podrške preglednika, situacija se dramatično promijenila i danas ga podržavaju gotovo svi moderni sustavi. Jedini stvarni izazov kod AVIF-a je činjenica da njegovo generiranje (kodiranje) zahtijeva znatno više računalne snage i vremena na serveru u usporedbi s WebP-om, no ušteda u prijenosu podataka preko mreže u potpunosti opravdava taj trud.
Dimenzioniranje slika: Zašto je “Responsive” dizajn ključan?
Jedna od najčešćih grešaka koje viđam na web stranicama je učitavanje slika koje su dimenzijama daleko veće od prostora u kojem se prikazuju. Zamislite situaciju u kojoj fotografirate proizvod najnovijim pametnim telefonom ili profesionalnim aparatom. Ta slika često ima rezoluciju od 4000x3000 piksela. Ako je takvu direktno prenesete na web kako bi se prikazala u malom okviru unutar bloga širine 800 piksela, prisiljavate preglednik posjetitelja da preuzme golemu datoteku i zatim troši resurse uređaja kako bi je smanjio na ekranu.
Pravilno dimenzioniranje podrazumijeva da sliku prije podizanja na server izrežete i smanjite na maksimalnu širinu koja je doista potrebna na dizajnu stranice. Za većinu standardnih web stranica punog zaslona (hero pozadine), širina od 1920 piksela je sasvim dovoljna. Za slike unutar tekstova, širina rijetko treba prelaziti 1000 do 1200 piksela.
Implementacija responzivnih slika pomoću srcset atributa
Kako bi riješili problem različitih veličina ekrana (od malih pametnih telefona do golemih 4K monitora), moderni web razvoj koristi responzivne slike. Pomoću HTML atributa srcset i sizes, pregledniku možete ponuditi nekoliko različitih veličina iste slike, a on će automatski preuzeti i prikazati onu koja najbolje odgovara rezoluciji ekrana korisnika.
<img src="slika-800.jpg"
srcset="slika-400.jpg 400w, slika-800.jpg 800w, slika-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
alt="Primjer responzivne slike">Korištenjem ovog pristupa, korisnik na mobilnom uređaju preko 4G mreže preuzet će sliku od 400 piksela (koja teži npr. 20 KB), dok će korisnik za stolnim računalom dobiti verziju od 1200 piksela. Rezultat je drastična ušteda u potrošnji podatkovnog prometa i trenutno učitavanje stranice na mobitelima.
Kompresija slika: Ravnoteža između težine i kvalitete
Kompresija je proces smanjivanja veličine datoteke uklanjanjem suvišnih podataka. Kao što smo već spomenuli, ona može biti lossless (bez gubitaka) i lossy (s gubitkom). Ključ uspješne optimizacije slika za web je pronaći takozvanu “sweet spot” – točku u kojoj je datoteka maksimalno smanjena, a da ljudsko oko ne primjećuje pad kvalitete.
Prilikom spremanja slika u alatima kao što su Photoshop, Lightroom ili besplatni alati poput Squoosh i TinyPNG, sustav će vas pitati za razinu kvalitete (izraženu u postocima od 0 do 100). Za web stranice, postavljanje kvalitete između 70% i 80% za JPEG i WebP formate donosi najbolji omjer. Slika će izgubiti i do 70% svoje originalne težine u kilobajtima, a vizualno će izgledati gotovo identično originalu od 100%.
Dodatno, važno je prilikom kompresije ukloniti EXIF podatke. To su metapodaci koje kamere automatski zapisuju u sliku (model kamere, GPS lokacija, datum fotografiranja, postavke ekspozicije). Ti podaci posjetitelju vaše web stranice nisu potrebni, a mogu činiti i do 10% ukupne težine manje slike. Uklanjanjem EXIF metapodataka osiguravate dodatne performanse i štitite privatnost.
Napredne tehnike: Lazy Loading i rješavanje CLS problema
Optimizacija samih datoteka samo je polovina posla. Druga polovina odnosi se na način na koji preglednik učitava te slike i kako ih renderira na ekranu. Dvije ključne tehnike ovdje igraju presudnu ulogu: Lazy Loading (odgođeno učitavanje) i definiranje dimenzija radi stabilnosti layouta.
Što je Lazy Loading i kako funkcionira?
Kada posjetitelj klikne na vaš članak koji sadrži 20 fotografija, tradicionalni pristup bi natjerao preglednik da odmah počne preuzimati svih 20 slika, čak i onih koje se nalaze na samom dnu stranice do kojih korisnik možda nikada neće skrolati. To usporava učitavanje onog početnog dijela ekrana koji korisnik odmah vidi (above the fold).
Lazy Loading rješava ovaj problem tako što nalaže pregledniku da učita samo one slike koje su trenutno vidljive na ekranu. Kako korisnik skrola prema dolje, slike se učitavaju tik prije nego što uđu u vidno polje. Danas je ova tehnika ugrađena izravno u moderne preglednike i implementira se vrlo jednostavno pomoću atributa loading="lazy".
<img src="slika.webp" loading="lazy" alt="Optimizirana slika s odgođenim učitavanjem">Važna napomena za SEO: Nikada nemojte primjenjivati lazy loading na slike koje se nalaze na samom vrhu stranice (unutar hero sekcije ili glavnog bannera). Te slike moraju se učitati odmah kako bi se postigao što bolji Largest Contentful Paint (LCP) rezultat. LCP slici dodajte i atribut fetchpriority="high" — on pregledniku govori da je preuzme s prioritetom — a WordPress 6.3 i noviji to rade automatski za prvu sadržajnu sliku.
Borba protiv Cumulative Layout Shift (CLS)
Jeste li ikada čitali tekst na nekom portalu i u trenutku kada ste htjeli kliknuti na link, cijeli tekst je “skočio” prema dolje jer se iznenada učitala slika iznad njega, pa ste greškom kliknuli na oglas? Ta pojava se naziva Cumulative Layout Shift (CLS) i Google je vrlo strogo kažnjava pri rangiranju stranica jer užasno frustrira korisnike.
CLS se najčešće događa kada u kodu stranice ne definirate širinu i visinu slike. Preglednik prilikom čitanja HTML-a prepozna da tu dolazi slika, ali ne zna kolika je ona, pa tom elementu dodijeli nultu visinu. Kada se slika konačno preuzme s mreže, preglednik naglo gura sav sadržaj ispod nje kako bi napravio mjesta. Rješenje je jednostavno – uvijek eksplicitno navedite width i height atribute u HTML-u:
<img src="slika.webp" width="800" height="600" alt="Stabilna slika">Ovi atributi ne znače da slika neće biti responzivna. Moderni CSS prepoznaje ove dimenzije kako bi izračunao omjer stranica (aspect-ratio), rezervirajući prazan prostor na ekranu prije nego što se slika uopće preuzme, sprječavajući bilo kakvo neugodno poskakivanje sadržaja.
Automatizacija procesa u WordPressu i custom sustavima
Ručna optimizacija svake pojedinačne slike kroz grafičke alate idealna je za manje web stranice ili ključne prodajne stranice (landing pages). Međutim, ako vodite portal koji svakodnevno objavljuje desetke tekstova ili web shop s tisućama proizvoda, ručni rad postaje nemoguća misija. U takvim scenarijima proces treba automatizirati.
Najbolji WordPress dodaci za optimizaciju slika
Ako vaša web stranica koristi WordPress (što je slučaj s većinom weba), na raspolaganju imate vrhunska rješenja koja automatski odrađuju dimenzioniranje, kompresiju i pretvaranje u WebP ili AVIF formate prilikom samog podizanja slika u medijsku knjižicu. Dodatna pogodnost: WordPress 6.5 i noviji podržavaju AVIF format izvorno, bez ikakvog dodatka — pod uvjetom da ga hosting server podržava (provjerite u Alatima → Zdravlje stranice). Redovito održavanje dodataka i jezgre dio je šire priče — kako taj mjesečni ritam izgleda, opisao sam u vodiču za održavanje i ažuriranje WordPress stranica:
- Converter for Media: Odličan i lagan dodatak koji stvara paralelnu strukturu slika u WebP i AVIF formatima te ih poslužuje korisnicima ovisno o podršci njihovog preglednika.
- Imagify / Smush / ShortPixel: Sveobuhvatni dodaci koji koriste vanjske servere (oblake) za kompresiju slika, čime se štede resursi vašeg vlastitog hostinga.
- FlyingPress / WP Rocket: Ovi napredni dodaci za cacheiranje imaju ugrađene opcije za automatsko generiranje kritičnih dimenzija slika, dodavanje lazy loadinga i rješavanje CLS problema na razini cijelog koda.
Rješenja za custom web stranice i CDN mreže
Ako razvijate web stranicu od nule (custom code) ili koristite moderne tehnologije poput Astro, Next.js ili Remix, optimizacija slika se obično rješava kroz same razvojne alate tijekom build procesa (npr. Astro ima vrhunsku ugrađenu <Image /> komponentu koja automatski optimizira formate i dimenzije).
Također, za velike sustave idealno je implementirati Image CDN (Content Delivery Network) servise poput Cloudflare Images, Cloudinary ili Imgix. Ovi servisi funkcioniraju tako da vaše originalne slike drže u oblaku, a korisniku ih isporučuju u realnom vremenu, potpuno optimizirane, komprimirane i u idealnom formatu prilagođenom uređaju s kojeg korisnik pristupa stranici. Ako vam pojmovi poput CDN-a, servera i hostinga zvuče nepoznato, vodič što je domena i hosting objašnjava temelje na jednostavnom primjeru.
Često postavljana pitanja o optimizaciji slika za web
Trebam li zadržati JPEG ili PNG ako koristim WebP ili AVIF? Da. WebP i AVIF kopije služe modernim preglednicima, ali originalni JPEG ili PNG ostaje rezervna verzija za starije preglednike, neke društvene mreže i alate koji ne podržavaju moderne formate. Zadržite original, a generirajte moderne kopije uz njega.
Koja je idealna kvaliteta kompresije za web? Za JPEG i WebP formate najbolji omjer veličine i kvalitete je između 70% i 80%. Za AVIF vrijede niže vrijednosti (kvaliteta 50–60% daje ekvivalentan vizualni dojam jer AVIF-ova ljestvica drukčije radi).
Što je bolje: WebP ili AVIF? AVIF je u pravilu 20–30% manji od WebP-a uz istu kvalitetu, ali se sporije kodira i zahtijeva noviji WordPress (6.5+) ili dodatak. WebP je univerzalno prihvaćen standard i sigurniji izbor ako želite jednostavnost. Najbolja praksa je generirati oba formata i pustiti preglednik da odabere.
Kako da znam jesu li slike glavni krivac za sporu stranicu? Pokrenite Google PageSpeed Insights i pogledajte dijagnostiku “Efficiently encode images” te waterfall prikaz u GTmetrixu. Ako slike čine najveći dio prenesenih podataka (a čine — obično 50–70% težine stranice), optimizacija slika je vaš najbrži dobitak.
Trebam li lazy loading na svim slikama?
Ne. Nikada na slike u hero sekciji ili na glavnu sliku članka — one su najčešće LCP element i moraju se učitati odmah, idealno s fetchpriority="high". Lazy loading koristite na svim slikama ispod vidljivog dijela ekrana.
Koliko brzo ću vidjeti učinak optimizacije slika? Laboratorijski alati (PageSpeed Insights, GTmetrix) pokazat će poboljšanje odmah nakon čišćenja cachea. Ali Google Core Web Vitals ocjene se temelje na podacima stvarnih korisnika koji se osvježavaju u 28-dnevnom prozoru — računajte do mjesec dana za punu sliku u Search Consoleu.
Zaključak: Investicija u brzinu koja se višestruko vraća
Optimizacija slika nije samo tehnički zadatak – to je izravno ulaganje u uspjeh vašeg poslovanja na internetu. Brža web stranica zadržava korisnike dulje, smanjuje frustracije, povećava povjerenje i, što je najvažnije, drastično podiže stope konverzije (prodaje i upita). Istovremeno, zadovoljavanjem Googleovih Core Web Vitals standarda kroz pravilno formatirane i responzivne slike, osiguravate si bolju startnu poziciju u SEO utrci s konkurencijom.
U svom radu performanse stavljam na prvo mjesto. Moj pristup izradi web stranica koristi najmodernija rješenja, s posebnim naglaskom na optimizaciju svakog pojedinačnog vizualnog elementa. Rezultat su munjevito brze stranice s čistim kodom koje pružaju vrhunsko korisničko iskustvo na svim uređajima.
Ako želite provjeriti jesu li slike glavni krivac za usporavanje vašeg trenutnog weba ili trebate profesionalno rješenje koje će vašu online prisutnost podići na novu razinu, javite mi se. Brzina je tek jedan element stranice koja prodaje — kako izgleda cjelina, opisao sam u vodiču za visoko-konvertirajuće landing stranice.
Izvori
- Google, Optimize Largest Contentful Paint (LCP): web.dev
- Google, Cumulative Layout Shift (CLS): web.dev
- MDN Web Docs, Image file type and format guide: developer.mozilla.org
- MDN Web Docs, Responsive images: developer.mozilla.org
- Alliance for Open Media, AV1 AVIF Specification: github.com
- WordPress, Image optimization: learn.wordpress.org
- WordPress, WordPress 6.5 adds AVIF support: make.wordpress.org
- HTTP Archive, Web Almanac: Page Weight: almanac.httparchive.org
Podijeli članak:
