Slike na prosječnoj web stranici čine najveći dio ukupne težine sadržaja, često više od polovine svih bajtova koji se preuzimaju. To znači da način na koji pripremate i isporučujete slike direktno utiče na brzinu učitavanja, korisničko iskustvo i, posljedično, na poziciju u pretraživačima. Optimizacija slika za SEO nije samo kompresija fajla. Radi se o cijelom lancu odluka: koji format koristiti, koje dimenzije isporučiti, kako slici dati semantičko značenje i kako spriječiti da slike blokiraju prikaz stranice. U nastavku prolazimo kroz svaki od tih koraka na način koji možete odmah primijeniti.
Zašto su slike toliko važne za SEO
Google već godinama koristi brzinu i stabilnost prikaza kao faktore rangiranja kroz Core Web Vitals. Tri metrike su posebno osjetljive na slike: LCP (Largest Contentful Paint), koji najčešće mjeri upravo vrijeme do prikaza najveće slike, CLS (Cumulative Layout Shift), na koji utiču slike bez definisanih dimenzija, i ukupno vrijeme učitavanja. Loše pripremljena hero slika može sama po sebi pokvariti LCP rezultat i povući cijelu stranicu naniže.
Pored tehničkih metrika, slike su i samostalan kanal posjeta. Google Images donosi značajan dio organskog prometa za određene niše, a dobro opisane slike pojavljuju se i u rich rezultatima. Dakle, optimizacija radi dvije stvari istovremeno: ubrzava sajt i otvara dodatni izvor posjetilaca.
Izbor pravog formata
Format je prva i najuticajnija odluka. Klasični JPEG i PNG još uvijek funkcionišu, ali moderni formati nude znatno bolju kompresiju uz isti vizuelni kvalitet.
- WebP – odličan balans kvaliteta i veličine, podržan u svim relevantnim pretraživačima. Za većinu fotografija i grafika trebao bi biti podrazumijevani izbor.
- AVIF – još bolja kompresija od WebP-a, posebno za fotografije s puno detalja. Podrška je danas široka, ali se preporučuje isporuka uz rezervni format.
- SVG – za logotipe, ikone i ilustracije. Vektorski je, skalira se bez gubitka kvaliteta i obično je vrlo lagan.
- JPEG/PNG – koristite ih kao rezervu (fallback) za starije klijente ili kada specifičan slučaj to zahtijeva.
Praktično rješenje je element <picture> koji nudi AVIF, pa WebP, pa JPEG kao rezervu. Pretraživač sam bira prvi format koji podržava, pa korisnici dobijaju najmanju moguću datoteku bez rizika da nešto ne radi.
Kompresija i dimenzije
Najčešća greška koju vidimo na sajtovima je isporuka ogromnih slika koje se zatim CSS-om smanjuju u prikazu. Slika od 4000 piksela širine prikazana u kontejneru od 800 piksela troši propusni opseg bez ikakvog vizuelnog dobitka. Pravilo je jednostavno: isporučite sliku u dimenzijama koje su približne stvarnom prostoru prikaza, uz rezervu za ekrane visoke gustine.
Za responzivni prikaz koristite atribute srcset i sizes kako bi pretraživač odabrao odgovarajuću varijantu za dati ekran. Tako mobilni korisnik ne preuzima verziju namijenjenu desktopu.
Kod kompresije, cilj je pronaći prag na kojem ljudsko oko ne primjećuje gubitak kvaliteta. Za fotografije je to obično kvalitet između 75 i 85 posto. Vrijednosti ispod toga počinju stvarati vidljive artefakte, dok vrijednosti iznad daju marginalno bolju sliku uz nesrazmjerno veći fajl.
| Tip sadržaja | Preporučeni format | Napomena |
|---|---|---|
| Fotografije | AVIF ili WebP | Kvalitet 75-85%, JPEG kao rezerva |
| Logotipi i ikone | SVG | Minifikovati, ukloniti suvišne metapodatke |
| Grafike s providnošću | WebP ili PNG | WebP daje manju datoteku od PNG-a |
| Hero sekcija | WebP/AVIF | Prioritetno učitavanje za bolji LCP |
Alt tekstovi i semantika slike
Atribut alt je most između vizuelnog sadržaja i mašine koja ga ne vidi. On služi čitačima ekrana za pristupačnost, prikazuje se kada se slika ne učita i daje pretraživaču kontekst o tome šta slika prikazuje. Dobar alt tekst je kratak, opisuje stvarni sadržaj slike i prirodno uklapa relevantne pojmove bez nabacivanja ključnih riječi.
Nekoliko smjernica:
- Opisujte ono što se zaista vidi, a ne ono što biste željeli da pretraživač pročita.
- Izbjegavajte fraze poput “slika” ili “fotografija” na početku, pretraživač već zna da je riječ o slici.
- Za čisto dekorativne slike ostavite prazan alt atribut (
alt="") kako ih čitači ekrana ne bi nepotrebno čitali. - Smisleno imenujte i samu datoteku, jer i naziv fajla nosi blagi signal o sadržaju.
Lazy loading i prioritet učitavanja
Sve slike ne moraju se učitati istovremeno. Slike koje su izvan vidljivog dijela ekrana mogu se odgoditi pomoću atributa loading="lazy", čime se ubrzava početni prikaz. S druge strane, glavna slika u vidljivom dijelu stranice ne smije biti lijeno učitana, jer ona obično definiše LCP. Nju je bolje označiti kao prioritetnu.
Dodatno, definisanje atributa width i height na svakoj slici sprječava pomjeranje rasporeda dok se slika učitava, što direktno popravlja CLS. Pretraživač unaprijed rezerviše prostor i sadržaj ne poskakuje.
Strukturirani podaci i mapa sajta za slike
Da bi pretraživač lakše razumio i indeksirao vaše slike, dodajte ih u XML mapu sajta ili kreirajte posebnu mapu za slike. Za sadržaje poput proizvoda, recepata ili članaka, strukturirani podaci (schema.org) omogućavaju da se slike pojave u bogatijim rezultatima pretrage. To je posebno vrijedno za web shop projekte gdje kvalitetan prikaz proizvoda u rezultatima direktno utiče na klikove.
Ne zaboravite ni na CDN i pravilno keširanje. Isporuka slika preko mreže servera bliskih korisniku i dugi rokovi keširanja smanjuju vrijeme učitavanja kod ponovnih posjeta.
Kontrolna lista za primjenu
- Konvertujte slike u WebP ili AVIF uz rezervni format.
- Smanjite dimenzije na stvarnu veličinu prikaza i pripremite responzivne varijante.
- Kompresujte na kvalitet 75-85% i provjerite vizuelni rezultat.
- Napišite smislene alt tekstove i imenujte datoteke opisno.
- Uključite lazy loading za slike izvan ekrana, a hero sliku označite prioritetnom.
- Definišite dimenzije svake slike radi stabilnog rasporeda.
- Dodajte slike u mapu sajta i, gdje ima smisla, strukturirane podatke.
Optimizacija slika je jedan od onih zadataka gdje relativno mali napor donosi mjerljiv rezultat na brzini i vidljivosti. Ako želite da se ovaj proces ugradi u sam temelj vašeg sajta, pogledajte naše usluge SEO optimizacije i javite nam se da zajedno postavimo tehničke osnove koje rade za vas.