Kako optimizirati slike za SEO?

Pregled sadržaja

Slike kao i drugi medijski zapisi jako su značajni jer su vizualno stimulirajući i stvaraju emotivnu vezu korisnika sa predmetom koji mu se prikazuje. Vjerojatno ste čuli izreku da slika može zamijeniti tisuću riječi. Zbog toga je izrazito bitno koristiti prikladno odabrane i kvalitetne slike za fino ugođavanje sadržaja.

Međutim, slike imaju i drugu funkciju, one nisu samo vizualni čimbenik već su i snažan za bolje pozicioniranje na tražilicama.

SEO optimizacija slika

Naziv datoteke

Naziv datoteke ili filename u kratkim ključnim riječima opisuje što se nalazi na slici. Poželjno je da je naslov kratak a svaka riječ se mora odijeliti malom crticom “-“.

Primjer:

bijeli-bicikl.jpg

Ako se više slika istog naziva planira koristiti, na kraj naziva a prije ekstenzije, doda se redni broj također odijeljen malom crticom.

Primjer:

bijeli-bicikl-01.jpg
bijeli-bicikl-02.jpg

Alt atribut na slikama

Svaka slika može se označiti alt atributom što je kratak ali dovoljno deskriptivni opis same slike.

<img src="bijeli-bicikl.jpg alt="Bijeli bicikl naslonjen na zgradu."

Alt atribut ili alternativni opis kreiran je po HTML specifikaciji kako bi korisnicima dao informaciju o slici u slučaju kada se ona ne može prikazati. Značajna je informacija za digitalnu pristupačnost web stranica jer čitači ekrana izgovaraju njen opis kako bi osobe s oštećenjima vida mogle saznati što se nalazi na slici. Ovo je najbitniji razlog postojanja opisa.

Tražilice su na temelju gornjih podataka odavno počeli koristiti te informacije kao jedan od mnogobrojnih faktora za rangiranje stranica. U tome je samo njegova prednost i ne smije se zloupotrebljavati. Često je slučaj da je alt atribut siluje informacijama sa ciljem boljeg rangiranja zatomljavajući izvornu vrijednost i šteteći korisničkom iskustvu. Opis slike treba opisati ono što se nalazi na slici, uključujući prenošenje emotivnih doživljaja kako bi osoba razumijela kontekst slike unutar objave. Shodno tome, trpanje ključnih riječi je loša praksa za korisničko iskustvo i digitalnu pristupačnost svih korisnika.

Na kraju opisa potrebno je staviti točku kako bi čitač ekrana napravio pauzu koja je bitna radi razumljivosti. U protivnosti čitači često mogu prebrzo i nepovezano izgovarati naredni tekst iza slike.

Opis slike se NE piše ako se radi o slikama koje su isključivo dekorativnog karaktera na stranici.

Za duže opise slika potrebno je koristiti longdesc atribut.

<img src="bijeli-bicikl.jpg alt="Bijeli bicikl naslonjen na zgradu." longdesc="Bijeli bicikl marke Fuji, sa smeđim sjedalom i košarom punom voća naslonjen je na zid zgrade">

Caption

Caption podatak na slikama se rijetko koristi jer njegovo prikazivanje ovisi o dizajnu. Tamo gdje se prikazuje poželjno je da HTML kod pravilno implementiran.

<figure>
    <img src="bijeli-bicikl.jpg" alt="Bijeli bicikl nasloljen na zgradu.">
    <figcaption>Fig. 1 - Građani uporno naslanjaju bicikl na fasadu što nije dopušteno.</figcaption>
</figure>

Odabir formata slike

Ovisno o samoj slici možemo odabrati koji format slike je najprikladniji.

  • JPG – ako je slika velike rezolucije i punog spektra boja, kao što je slika gradske vreve, tada ćemo ju spremiti kao .jpg format.
  • PNG – ako je slika mala, transparentne pozadine i s nekoliko boja, .png format je prikladan
  • GIF – prikladan za dijagrame i slične grafičke sadržaje jer ne prikazuje dobro bogate boje i detalji se gube

Prilikom odabira načina spremanja .jpg verzije možete odabrati između obične (baseline) i progresivne verzije. Njihova razlika je ta što baseline slika ima samo jedan sloj i prilikom prikazivanja takve slike na stranici ona se učita od gore prema dolje, dok je progresivna slika sačinjena od nekoliko slojeva i prikazuje se prvo zamućena ali cijena slika koja se postupno izoštri do pune slike što ipak pruža nešto bolje korisničko iskustvo.

Ovo su najčešći formati za slika, premda ima velik broj drugih. .jpeg format se ne preporuča koristiti jer ima sigurnosni propust.

Novi tipovi formata slika kao WEBP su nam dostupni a njih je potrebno generirati na samim web stranicama.

Veličina slika i kompresija

Slike se mogu optimizirati prije postavljanja na server ili kasnije. Ako fizičkog prostora na poslužitelju ne manjka, bolje je uploadati slike izvorne rezolucije jer će vam možda kasnije zatrebati.

Slike su po prosjeku odgovorne za oko 60% bandwidtha prosječne stranice te ih poželjno optimizirati kako bi težile čim manje. Ovo je moguće na nekoliko razina, ali većina toga može se raditi automatski i ne trebate brinuti o tome. Upload slika većih dimenzija automatski se može smanjiti na manje dimenzije a ovisno o samoj web stranici isto tako automatski se slike režu na različite omjere kako bi zadovoljile potrebe dizajna i optimalno se ukomponirale u layout.

Svaku sliku moguće je dodatno korigirati nekim parametrima koji bi mogli smanjiti njezinu težinu. Primjerice, kod .jpeg datoteke moguće je podesiti visinu kvalitete, ako je ona manja (a ipak dovoljno oštra da nitko ne primijeti razliku u padu kvalitete) tada smo je dobro optimizirali. Ako generiramo WEBP format tada je težina slika uvelike smanjena.

Autorska prava

Postoji bezbroj slika na internetu koje su nam dostupni međutim slike su zaštićene autorskim pravima te ih nije moguće koristiti bez pitanja autora. Dobar dio njih se može slobodno koristiti ako je pušten s takvom licencom za slobodnu upotrebu. Ali korištenjem tuđih slika preskačemo dio potpune optimizacije.

Danas računalima nije nikakav problem pronaći varijantu slike koja se već koristi. Pokušajte samo pronaći neku sliku na webu i potom koristiti Google tražilica slika za pronalazak njezinih duplikata. Velika je šansa da ćete tu sliku pronaći na desetke drugih web stranica.

Ako želite maksimalno ići na optimiziranje slika nužno je imati vlastite autorske fotografije. One također trebaju biti pravilno obilježene informacije unutar meta tagova koje korisnici ne mogu vidjeti na slici, međutim botovi koji ih analiziraju mogu ih pročitati. Meta podaci mogu sadržavati ime vlasnika slike, geolokaciju, podatke o kameri i drugo.

Lijeno učitavanje slika

Dodatna optimizacija je lijeno učitavanje slika (eng. lazy load). Kada korisnik otvara web stranicu preglednik obično preuzme sa poslužitelja sve datoteke potrebne za rad stranica, od skripta koji su potrebni za funkcionalnost, od kozmetičkih stilova potrebnih za generiranje dizajna, fontova za prikaz slova itd. Isto tako preuzimaju se i sve slike.

Pomoću JavaScript kodiranja može se podesiti lijeno učitavanje slika što znači da kada korisnik otvori stranicu, preglednik ne preuzima slike sve dok korisnik ne skrola do razine tek nešto iznad pozicije slike. U tom trenutku preglednik tek krene preuzimati sliku. Ovo je vrlo korisno kod prilagodbe stranica mobilnim uređajima jer su oni ograničeni brzinom internet veze i u tom slučaju se neće resursi nepotrebno trošiti ako korisnik neće ni skrolati do te točke.

Ako su web stranice izrađene na WordPressu, korisna je informacija da od verzije 5.4 WordPress postavlja automatski lijeno učitavanje slika koje su ubačene u sam sadržaj, te nisu potrebni dodatni radovi koji bi to omogućili tu funkcionalnost.

Postavljanje dužine i visine slike

Kada preglednik učitava sliku istodobno uzima stilove koji mu dirigiraju izgled stranice. Kako prikazuje različite elemente, preglednik ponovno prepozicionira pojedine elemente do finog uštimavanja točnih pozicija međusobnog rasporeda svih elemenata. Ovo se sve događa u milisekundama no to samo zato što su nam danas računala poprilična moćna. Kako bi im olakšali posao možemo definirati dužinu i visine svake pojedine slike. Na manjim ekranima time takvom praksom pomažemo štedjeti bateriju mobitelima.

<img src = "bijeli-bicikl.jpg" loading="lazy" alt="Bijeli bicikl nasloljen na zgradu." width="600" height="400">