Slike su neizostavan dio gotovo svake web stranice i pridonose da posjetitelji imaju bolje korisničko iskustvo. Danas su u modi velike fotografije, no s većom rezolucijom dolaze i veće veličine datoteka što je vodi do sporijeg učitavanja web stranice. Svrha dodavanja slika je s njima dobijete bolje iskustvo za vaše korisnike, 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.
Kako bi se riješio ovaj problem prilikom razvoja web stranice potrebno je svaku sliku koja se postavlja optimizirati. Pod optimizacijom slika podrazumijevamo smanjivanje veličine datoteke bez da izgubimo na njenoj kvaliteti.
Prednosti nakon optimizacije slika
- Poboljšati će se brzina učitavanja stranice
- Web stranica će bolje rangirati u pretraživačima zbog brže izvedbe
- Manja veličina datoteke će uštedjeti i prostor i bandwidth na serveru
- Brži backup web lokacije
Primarni cilj optimizacije fotografija je da se pronađe odgovarajući balans između što manje veličine datoteke i zadovoljavajuće kvalitete. Uobičajeno se slike obrađuju prije nego što se postave na server putem nekog programa za obradu fotografija. Neke stvari se mogu i naknadno optimizirati putem WordPress dodataka.
Odabir pravog formata fotografije
Na dvije stvari treba obratiti pozornost a to su format slikovne datoteke i količina 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 vrlo popularan format fotografija jer omogućava odličnu optimizacija bez gubitaka na kvaliteti
- GIF koristi samo 256 boja i koristi se kod za animacije
Osim navedenih, u posljednje vrijeme sve popularniji je WebP format slike koji omogućuje superiornu kompresiju bez gubitaka (26% u odnosu na PNG i 25-34% u odnosu na JPEG). No ovaj format nije kompatibilan s svim web preglednicima.
Reducirajte veličinu fotografije prije učitavanja
Moderni foto aparati i pametni telefoni snimaju fotografije u visokoj rezoluciji. No za web stranicu nije potrebno postavljati slike u punoj rezoluciji već je potrebno odabrati rezoluciju koja je potrebna. Tako za galerije je se mogu koristiti rezolucije 800 x 533 px ili 1200 x 800 px.
Za slidove koji se protežu 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 4 do 5 fotografija.Za ovu namjenu možete koristiti i besplatan softver za uređivanje slika npr. FastStone Viewer.
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.
Važno je znati i koji način kompresije koristiti – Lossy ili Lossless. Lossy agresivnije uklanja dio podataka koji i nisu vidljivi baš svakom oku, ali zato se veličina datoteke može značajno smanjiti. S druge strane Lossless je filter koji komprimira podatke bez gubljenja na kvaliteti no i ušteda na veličini datoteke je manja.
Najbolje je napraviti testove s svakom za svaki od formata i koristiti „Save for web“ opciju koju imaju neki programi za obradu fotografija kao primjerice Adobe Photoshop. Možete eksperimentirati kako bi naši pravi omjer između gubitka kvalitete i veličine datoteke.
Ukoliko se neka slika na vašoj web stranici sporo učitava to je znak da ju je potrebno ili reducirati rezoluciju ili koristiti kompresiju, a možda i oboje. Još jedan alat koji bi vam mogao 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.
