Kako optimizirati slike za SEO?

Slike kao i drugi medijski zapisi veoma su značajni na stranicama 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 faktor za bolje pozicioniranje web stranica na tražilicama.

U nastavku pogledajmo koja su načela optimizacije slike za tražilice.

Naziv datoteke ili filename u kratkim ključnim riječima opisuje što se nalazi na slici. Poželjno je da je naslov kratak, razumljiv kada se čita i jasno opisuje predmet a svaka riječ se mora odijeliti malom crticom “-“. Upotreba drugih načina odijeljivanja riječi se ne preporuča ( primjerice, donjom 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-0izrada-web-stranice-za-plantea-3.jpg
bijeli-bicikl-0pisanje-sadrzaja-za-email-marketing-izrada-web-stranice-za-plantea-3.jpg

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. To je najbitniji razlog postojanja alternativnog 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 prednost alternativnog opisa i ona se ne smije zloupotrebljavati. Često je slučaj da se alt atribut siluje informacijama sa ciljem boljeg rangiranja na tražilicama 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 (screen reader) 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. Usput, ako se radi o malim ikonama tada je bolje koristiti SVG alternative umjesto slike. SVG ima nekoliko prednosti, ne zahtijeva dodatan request prema serveru već se može ubaciti direktno na stranicu kao element, može se animirati prema potrebi i kvaliteta je bolja jer se radi o vektorima koji su uvijek jasni.

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 podatak na slikama se rijetko koristi jer njegovo prikazivanje ovisi o dizajnu. Tamo gdje se prikazuje poželjno je da HTML kôd 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>

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. Format .jpeg se ne preporuča koristiti jer ima sigurnosni propust i u WordPress zbirku medija ga nije ni moguće uploadati zbog zabrane.

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

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 ponovno 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.

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žilicu 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.

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 automatski postavlja lijeno učitavanje slika koje su ubačene u sam sadržaj, te nisu potrebni dodatni radovi koji bi to omogućili tu funkcionalnost.

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">

XML mapa slika je popis svih glavnih slika koje se koriste na web stranici. Njezina svrha je ista kao i kod izrade XML mape stranice, u ovom slučaju korisna je da botovima tražilica kako bi ispravno skenirali i indeksirali sve slike. Također, u robots.txt datoteci je poželjno linkati na nju.

Slike imaju težinu prilikom optimizacije objava za tražilice jer ih nadopunjuju na više razina, kao što smo imali prilike vidjeti u članku. Danas su računalni botovi u stanju skužiti što se nalazi na slikama te analiziraju jesu li se slike već negdje koristile na internetu. To je poprilično veliki napredak i značajna je stvar zbog koje ne smijemo pokleknuti u nastojanjima da nekakvim trikovima pokušamo prevariti sustav već da uvijek optimiziramo sadržaj na pravim principima. Trebamo imati na umu da tehnologija uvijek ide dalje a svaka SEO optimizacija treba imati dugoročnu viziju.