Optimizacija slika za sajt: WebP, dimenzije i lazy load

Optimizacija slika za sajt je najbrži način da ubrzate većinu sajtova bez menjanja dizajna. Na tipičnoj stranici slike čine najveći deo ukupne težine, pa je pravilo jednostavno: koristite moderne formate (WebP ili AVIF), smanjite dimenzije na onoliko koliko se slika zaista prikazuje, kompresujte je, uključite lazy loading za slike ispod prvog ekrana i uvek navedite širinu i visinu. Tako dobijate brže učitavanje, stabilniji prikaz i bolje pozicije na Google-u.

U nastavku objašnjavamo svaki korak redom, sa konkretnim preporukama koje možete primeniti i ako sajt nije pravljen po meri, već na WordPress-u ili nekoj drugoj platformi.

Zašto je optimizacija slika za sajt prvi korak ka brzini

Fotografija direktno sa telefona ili fotoaparata često ima nekoliko megabajta i dimenzije od preko 4000 piksela po širini. Kada se takva slika postavi na sajt i prikaže u okviru širokom 800 piksela, posetilac i dalje preuzima celu originalnu datoteku. Na mobilnoj mreži to znači sekunde čekanja, a svaka sekunda povećava verovatnoću da će čovek odustati i vratiti se na rezultate pretrage.

Google brzinu meri kroz Core Web Vitals metrike. Najveći element na ekranu (LCP) je vrlo često upravo slika, naslovna fotografija ili baner. Ako je ona teška, LCP je loš, bez obzira na to koliko je ostatak koda uredan. Zato je optimizacija slika gotovo uvek prvi korak kada radimo SEO optimizaciju i ubrzavanje postojećeg sajta.

WebP i AVIF: koji format slike izabrati

Stari formati JPEG i PNG i dalje rade, ali noviji formati daju znatno manju datoteku uz isti vizuelni kvalitet. Svi moderni pregledači podržavaju WebP, a AVIF je podržan u velikoj većini aktuelnih verzija.

Praktična preporuka: fotografije objavljujte u WebP formatu, logo i ikonice kao SVG, a AVIF uvedite ako vam je važna maksimalna ušteda. Ako želite sigurnost za retke starije pregledače, HTML element picture omogućava da pregledač sam izabere AVIF, WebP ili JPEG, u zavisnosti od toga šta podržava.

Dimenzije i kompresija: ne šaljite veću sliku nego što treba

Najveća ušteda često ne dolazi od formata, nego od pravilnih dimenzija. Ako se slika u tekstu prikazuje u širini od 800 piksela, nema razloga da originalna datoteka ima 5000 piksela. Za ekrane visoke rezolucije dovoljno je pripremiti verziju otprilike dvostruke širine.

Responzivne slike uz srcset

Atribut srcset omogućava da ponudite istu sliku u nekoliko širina, na primer 480, 800 i 1600 piksela. Telefon tada preuzima manju verziju, a veliki monitor veću. Ovo je posebno važno jer većina posetilaca sajtova malih firmi dolazi sa mobilnih uređaja, o čemu smo pisali u tekstu o tome zašto je mobilna verzija najvažnija. WordPress automatski pravi više veličina svake otpremljene slike i dodaje srcset, pa je dovoljno da ne otpremate ogromne originale.

Okvirne dimenzije po tipu slike

• Naslovna slika preko cele širine: oko 1920 piksela širine, uz manje verzije za mobilni.
• Slika u tekstu bloga: 1200 do 1600 piksela širine je sasvim dovoljno.
• Slika proizvoda u web shopu: kvadrat od oko 1000 do 1200 piksela, da bi zum ostao oštar.
• Sličice u listama i karticama: 400 do 600 piksela.

Kompresija bez vidljivog gubitka kvaliteta

Kompresija sa gubitkom (lossy) uklanja detalje koje ljudsko oko uglavnom ne primećuje. Za fotografije na sajtu kvalitet od oko 75 do 85 procenata u WebP-u najčešće izgleda isto kao original, a datoteka je višestruko manja. Cilj za većinu slika u tekstu je da budu ispod 150 do 200 KB, a za sličice znatno manje.

Alati koje možete koristiti:

• Squoosh – besplatan alat u pregledaču, odličan za poređenje kvaliteta pre i posle.
• Dodaci za WordPress – automatski kompresuju i konvertuju slike u WebP prilikom otpremanja.
• Programi za obradu fotografija – izvoz za veb sa podešavanjem kvaliteta i dimenzija.
• Automatizacija na serveru ili CDN-u – konverzija i promena veličine u letu, za sajtove sa mnogo slika.

Uz kompresiju, uklonite i EXIF metapodatke (model aparata, GPS lokacija). Oni dodaju težinu, a lokacija može biti i pitanje privatnosti.

Lazy loading i width/height protiv pomeranja sadržaja

Lazy loading

Lazy loading znači da pregledač preuzima sliku tek kada se posetilac približi tom delu stranice. Danas je dovoljno dodati atribut loading="lazy" na element slike, bez dodatnih skripti. Rezultat je brže prvo učitavanje i manje potrošenog mobilnog interneta.

Važan izuzetak: slike koje su vidljive odmah po otvaranju stranice, naročito glavna naslovna slika, ne treba odlagati. Ako lazy loading primenite na LCP sliku, zapravo usporavate sajt. Za tu jednu sliku je bolje dodati fetchpriority="high", kako bi je pregledač preuzeo među prvima.

Širina i visina protiv CLS-a

Kada slika nema navedene atribute width i height, pregledač ne zna koliko prostora da joj rezerviše. Tekst se prvo prikaže, a onda ga učitana slika gurne naniže. To je pomeranje rasporeda koje Google meri kao CLS i koje korisnike nervira, posebno kada kliknu na pogrešno dugme. Rešenje je jednostavno: uvek upišite stvarne dimenzije slike, a CSS će je i dalje prilagoditi širini ekrana, uz zadržan odnos stranica.

Alt tekst i nazivi datoteka za SEO

Optimizacija slika nije samo brzina. Google ne vidi sliku onako kako je vidi čovek, pa se oslanja na alt tekst, naziv datoteke i okolni sadržaj. Dobar alt tekst istovremeno pomaže slabovidim korisnicima koji koriste čitače ekrana.

• Opišite šta je na slici, kratko i konkretno: „Kuhinja po meri od hrastovine u stanu u Nišu“ umesto „slika1“.
• Ključnu reč koristite samo kada prirodno odgovara sadržaju slike, bez nabrajanja pojmova.
• Dekorativne slike (pozadine, ukrasi) mogu imati prazan alt, da čitači ekrana ne bi čitali nebitne informacije.
• Nazivi datoteka neka budu opisni, malim slovima, sa crticama i bez naših dijakritika: kuhinja-po-meri-hrast.webp.

Za lokalne firme dobro opisane fotografije mogu doneti posete i iz Google pretrage slika, a iste fotografije vredi postaviti i na Google biznis profil.

Kratka ček-lista pre objave slike

1. Da li je format WebP (ili AVIF), a logo SVG?
2. Da li su dimenzije prilagođene mestu gde se slika prikazuje?
3. Da li je datoteka kompresovana i razumne veličine?
4. Da li slika ima atribute width i height?
5. Da li je lazy loading uključen za slike ispod prvog ekrana, a isključen za naslovnu?
6. Da li postoji smislen alt tekst i opisan naziv datoteke?

Proverite rezultat alatom PageSpeed Insights: preporuke kao što su „Properly size images“ ili „Serve images in next-gen formats“ direktno ukazuju na slike koje treba srediti. Ostale tehničke stavke pronaći ćete u našoj tehničkoj SEO ček-listi.

Zaključak

Optimizacija slika za sajt ne traži redizajn niti skupe alate. Pravi format, razumne dimenzije, kompresija, lazy loading na pravim mestima i navedene dimenzije rešavaju veliki deo problema sa brzinom, a dobar alt tekst donosi dodatnu SEO vrednost. Na sajtovima koje izrađujemo ovo je deo standardnog posla, jer je SEO optimizacija uključena u svaki sajt. Ako vaš postojeći sajt sporo radi, pošaljite nam adresu kroz formu za besplatnu analizu i ponudu, pa ćemo vam reći šta konkretno usporava stranice.