Optimizacija slika za sajt: kako ubrzati učitavanje

Slike su najčešći razlog zbog kog se sajtovi sporo učitavaju. Tekst i kod zauzimaju malo prostora, ali jedna neoptimizovana fotografija od 5 MB može da uspori stranicu više nego sav ostali sadržaj zajedno. Optimizacija slika za sajt nije kozmetička sitnica – direktno utiče na brzinu učitavanja, poziciju na Google-u i na to da li će posetilac ostati na stranici ili je zatvoriti posle tri sekunde čekanja.

Zašto je ovo pitanje brzine, a ne estetike

Google od 2021. godine zvanično koristi Core Web Vitals kao faktor rangiranja, a najveći deo ovih metrika – posebno Largest Contentful Paint (LCP) – najčešće zavisi upravo od slika. Ako je glavna fotografija na naslovnoj stranici teška i neoptimizovana, ona će usporiti ceo prikaz stranice, bez obzira koliko je hosting brz ili koliko je kod čist.

Dodatni problem je mobilni saobraćaj. Korisnici sa sporijim internetom ili ograničenim podacima jednostavno napuste stranicu koja predugo učitava slike. To znači izgubljen posetilac, a često i izgubljena prodaja.

Format slike – prvi korak koji se najčešće preskoči

Većina sajtova i dalje koristi JPEG i PNG za sve, iako postoje bolje opcije:

• WebP – do 30% manja veličina fajla u odnosu na JPEG, uz sličan kvalitet. Podržan u svim savremenim pregledačima.
• AVIF – još noviji format, često i manji od WebP-a, ali podrška u starijim sistemima je ograničenija.
• JPEG – i dalje dobar izbor za fotografije kada WebP/AVIF nije moguć.
• PNG – koristite samo za slike sa providnošću ili grafiku sa oštrim ivicama (logotipi, ikonice), ne za fotografije.
• SVG – idealan za logotipe i ikonice jer se skalira bez gubitka kvaliteta i po pravilu je vrlo mali fajl.

Kompresija – razlika koja se ne vidi okom, ali se oseti u brzini

Svaka slika pre postavljanja na sajt treba da prođe kroz kompresiju. Postoje dva pristupa:

• Lossy kompresija – smanjuje veličinu fajla uz minimalan gubitak kvaliteta koji je ljudskom oku teško primetljiv. Za većinu fotografija na sajtu ovo je dovoljno.
• Lossless kompresija – smanjuje veličinu bez ikakvog gubitka kvaliteta, ali je i ušteda manja. Koristi se kada je slika kritična za kvalitet prikaza (npr. proizvod u online prodavnici).

U praksi, kombinacija konverzije u WebP i lossy kompresije obično smanji veličinu fajla za 60-80% bez vidljive razlike u kvalitetu.

Dimenzije – ne šaljite pregledaču veću sliku nego što je potrebno

Česta greška je postavljanje slike rezolucije 4000×3000 piksela za prostor na sajtu koji je širok 800 piksela. Pregledač i dalje mora da preuzme ceo fajl, a zatim ga smanji – što znači nepotrebno trošenje vremena i podataka.

Rešenje je pripremiti sliku u rezoluciji koja realno odgovara prostoru gde će biti prikazana, uz korišćenje srcset i sizes atributa kako bi pregledač sam birao odgovarajuću verziju slike za desktop, tablet ili mobilni telefon.

Lazy loading – učitavajte samo ono što je vidljivo

Slike koje se nalaze niže na stranici, van vidnog polja pri prvom učitavanju, ne moraju da se preuzmu odmah. Atribut loading=“lazy“ omogućava pregledaču da ih učita tek kada korisnik dođe do njih skrolovanjem. Ovo posebno pomaže na stranicama sa galerijama, blogovima ili katalozima proizvoda gde ima puno slika.

Imenovanje fajlova i alt tekst – ne zaboravite SEO deo

Optimizacija slika za sajt ne odnosi se samo na brzinu, već i na to kako Google razume sadržaj slike:

• Imenujte fajl opisno, na primer izrada-sajtova-beograd.jpg umesto IMG_2934.jpg.
• Popunite alt atribut kratkim, konkretnim opisom slike – ovo pomaže i pristupačnosti sajta za korisnike sa oštećenim vidom.
• Izbegavajte gomilanje ključnih reči u alt tekstu – dovoljan je jasan opis.

Automatizacija – da ne radite ovo ručno za svaku sliku

Ručna obrada svake slike pre postavljanja je neodrživa na duže staze, posebno kod sajtova sa čestim ažuriranjem sadržaja. Rešenje je automatizacija procesa: alati koji automatski konvertuju format, kompresuju fajl i generišu više veličina slike odmah pri otpremanju na sajt. Ovo je nešto što se podešava jednom, u okviru sistema za upravljanje sajtom ili build procesa, i dalje radi u pozadini bez dodatnog angažovanja.

Kod većih sajtova i online prodavnica ovo je gotovo obavezno, jer broj slika brzo raste i ručna kontrola postaje neizvodljiva.

QA testiranje – proverite da li optimizacija zaista radi

Nije dovoljno pretpostaviti da su slike optimizovane – potrebno je proveriti rezultat. U okviru QA testiranja sajta, ovo uključuje:

• Merenje vremena učitavanja stranice pre i posle optimizacije.
• Proveru da li se prava rezolucija slike učitava na mobilnim uređajima.
• Testiranje da li lazy loading radi ispravno i da slike ne „iskaču“ tek kada korisnik dođe do njih.
• Proveru da li su svi alt tekstovi popunjeni.

Ovi koraci se lako mogu uključiti u redovan proces testiranja sajta, umesto da se rade jednokratno.

Kratak vodič pre postavljanja slike na sajt

• Izaberite format – WebP ili AVIF kad god je moguće, SVG za logotipe.
• Smanjite dimenzije na realnu veličinu prikaza.
• Kompresujte fajl pre otpremanja.
• Dodajte lazy loading za slike van vidnog polja.
• Popunite alt tekst i imenujte fajl opisno.
• Proverite rezultat merenjem brzine učitavanja.

Ako želite da ovaj proces bude automatizovan i proveren kroz redovno testiranje, pogledajte kako to radimo u okviru izrade sajtova u agenciji Web majstor.