Kako optimizirati slike za web stranicu

Slike su neizbježan dio svake web stranice i doprinose da posjetitelji imaju bolje korisničko iskustvo. No, treba imati na umu da s većom rezolucijom fotografije dolaze i veće veličine datoteka što vodi do sporijeg učitavanja web stranice. Svrha dodavanja slika je s njima dobijete bolje iskustvo za vaše posjetitelje, no ako se stranica sporo učitava to sigurno neće u tome pomoći jer mnogi će je napustiti i prije nego što se sadržaj učita.

Čini se da živimo u vremenu gdje svi žele sve odmah. Nitko ne želi provesti vrijeme čekajući web stranicu da se vrti i opterećuje vlastitim tempom.

Kako bi se riješio ovaj problem prilikom izrade web stranice potrebno je svaku sliku koja se postavlja optimizirati. Optimizacija slika zapravo znači smanjivanje veličine datoteke bez da izgubimo na njenoj kvaliteti.

Prednosti nakon optimizacije slika

• Poboljšat će se brzina učitavanja stranice
• Web stranica će bolje rangirati u pretraživačima zbog bržeg učitavanja
• Manja veličina datoteke će uštedjeti prostor i bandwidth na serveru

Uobičajeno se slike obrađuju prije nego što se postave na server putem nekog programa za obradu fotografija. 

Odabir formata fotografije

Pozornost treba obratiti na format slike i količinu kompresije. U praksi se najčešće koristi:

• PNG format koji ima vrlo dobru kvalitetu ali i veću veličinu datoteke. On se koristi kada je potrebna prozirna pozadina npr. kod logotipa
• JPEG je najčešći format fotografija jer omogućava odličnu optimizacija bez gubitaka na kvaliteti

Popularan je  WebP format slike koji omogućuje odličnu kompresiju bez gubitaka (26% u odnosu na PNG i 25-34% u odnosu na JPEG). 

Smanjite veličinu fotografije prije učitavanja

Moderni pametni telefoni snimaju fotografije u visokoj rezoluciji. Ali, za web stranicu nije potrebno postavljati slike u punoj rezoluciji već je potrebno odabrati rezoluciju koja je potrebna. Tako za galerije se mogu koristiti rezolucije 800 x 533 px ili 1200 x 800 px. 

Za slidove koji idu od ruba do ruba zaslona je preporučeno koristiti fotografije širine 1920 px. Kod izrade slidera dobro je ograničiti broj slideova i ne postavljati više od 3 do 4 fotografije.

Smanjite veličinu datoteke koristeći kompresiju

Nakon odabira željenog formata zapisa i željene veličine potrebno je fotografije komprimirati kako bi smanjili veličinu datoteke.

Alat koji će vam sigurno u tome pomoći je TinyPNG web servis putem kojeg možete dodatno komprimirati veličinu PNG i JPEG slika. Dobro je što se s ovim servisom može odjednom optimizirati do 20 slika.

Lazy loading

Dodatna metoda za ubrzavanje učitavanja slika je tzv. lazy loading. Ova tehnika služi da se optimizira sadržaj koji je prvo vidljiv posjetitelju, a preuzimanje i prikaz dodatnih slika i videa je odgođen dok posjetitelj ne scrolla i ne pogleda taj dio stranice.

Postoje brojni dodaci za WordPress koji omogućavaju lazy loading pa isprobajte onaj koji vam se čini najboljim za vašu web stranicu.

Odabir brzog hosting providera

Odabir hostinga je OSNOVNI segment koji utječe na brzinu učitavanja stranice. Moja preporuka je FanelHost – ultra brzi cloud hosting koji koristi LiteSpeed™ Web servere. FanelHost platforma se nalazi na ekstremno brzim SSD diskovima. Vaš će se sadržaj prikazivati i do 20 puta brže nego kod hosting tvrtki koje koriste zastarjelu HDD tehnologiju.

Time će vaša stranica biti brza, a to će se pozitivno odraziti i na SEO optimizaciju jer je brzina učitavanja bitan faktor koji Google gleda kada vašu stranicu rankira na tražilici.