Optimizacija slika za web

Kako odabrati format, dimenzije, srcset, lazy loading, prioritet hero slike i kvalitetu bez vidljivog gubitka.

Oriphiel stručni tim Ažurirano 23. 7. 2026. 3 min čitanja

Odgovor ukratko

Najveća ušteda dolazi iz ispravnih dimenzija i modernog formata; lazy loading se ne smije koristiti na ključnoj slici prvog ekrana.

Ključne odluke

Koja slika je LCP
Koje širine layout stvarno prikazuje
Treba li prozirnost
Koje slike trebaju biti indeksabilne

Provedba korak po korak

Cilj ove lekcije je Kako odabrati format, dimenzije, srcset, lazy loading, prioritet hero slike i kvalitetu bez vidljivog gubitka. Korake treba provoditi redom i svaki potvrditi prije širenja opsega.

Preporučeni redoslijed

Izvesti AVIF ili WebP uz fallback po potrebi
Generirati responsive varijante
Postaviti width i height
Lazy-loadati samo sadržaj ispod prvog ekrana

Praktičan primjer

Primjer primjene: tim najprije provodi „Izvesti AVIF ili WebP uz fallback po potrebi”, zatim potvrđuje „Browser ne preuzima preveliku datoteku” i rezultat procjenjuje kroz „Preneseni bajtovi slika”. Tek nakon te provjere širi opseg.

Kontrolna lista prije nastavka

Ova provjera odvaja završenu implementaciju od postavke koja samo izgleda dovršeno.

Provjerite

Browser ne preuzima preveliku datoteku
Hero slika nije odgođena
Layout ima rezerviran prostor
Alt tekst opisuje relevantnu sliku

Najčešće pogreške i rizici

Rizike treba provjeriti prije povećanja prometa, automatizacije ili ovlasti sustava.

Na što treba paziti

Original od 8 MB ide izravno na web
Sve slike koriste isti crop
CSS background skriva važnu sadržajnu sliku
Automatska kompresija uništi tekst na grafici

Mjerenje rezultata

Učinak se procjenjuje kroz mali skup metrika koje su povezane s ciljem lekcije i stvarnim poslovnim ishodom.

Metrike koje imaju smisla

Preneseni bajtovi slika
LCP
CLS
Image impressions

Česta pitanja

Koji je prvi korak za temu „Optimizacija slika za web”?

Izvesti AVIF ili WebP uz fallback po potrebi Prije nastavka potvrdite odluku: Koja slika je LCP

Kako provjeriti da je provedba uspješna?

Browser ne preuzima preveliku datoteku Nakon toga pratite metriku: Preneseni bajtovi slika.

Koju pogrešku treba prvo spriječiti?

Original od 8 MB ide izravno na web Problem ispravite prije automatizacije ili povećanja budžeta.

Službeni i stručni izvori

Sučelja, pravila i preporuke mogu se mijenjati. Prije produkcijske izmjene provjerite aktualnu dokumentaciju.

Povezani vodiči za poslovni web

Fotografije za poslovnu web stranicuKako odabrati i pripremiti stvarne fotografije tima, prostora, proizvoda i procesa te izbjeći generički stock dojam. Brzina poslovne web straniceKako slike, fontovi, JavaScript, hosting, cache i treće strane utječu na stvarno mobilno iskustvo i konverzije. Image SEO za poslovne straniceKako koristiti opisne nazive, alt tekst, okolni sadržaj, dimenzije, moderne formate i image sitemap samo gdje slike imaju stvarnu vrijednost. Core Web Vitals za poslovni webKako razumjeti LCP, INP i CLS, razlikovati field i lab podatke te prioritetizirati popravke po predlošku.

Povežite ovu temu s ostatkom sustava

SEO za izradu web stranicaPovežite prodajnu ponudu, vodiče, interne linkove i organske upite bez kanibalizacije. Google alati i mjerenjePostavite Search Console, GA4, Tag Manager i konverzije nakon tehnički spremnog weba. Kontakt forma i CRMNastavite proces od slanja obrasca prema leadu, statusu i sljedećoj aktivnosti.

Primijenite lekciju na stvarni projekt

Pošaljite postojeću konfiguraciju, cilj i problem koji želite riješiti. Dobit ćete prijedlog sljedećeg tehničkog ili operativnog koraka.

Pošaljite upit Pregledajte sve vodiče