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.
Automatsko optimiziranje slika putem dodataka za WordPress
Za WordPress CMS postoje razni dodaci koji automatski optimiziraju fotografije prilikom učitavanja na server. Najpopularniji dodaci za ovu namjenu su:
Prije odabira željenog dodatka preporučujemo da pročitate njegovu dokumentaciju kako bi znali kako djeluju jer neki od njih mogu uzrokovati probleme. Bilo bi dobro da se napravi backup WordPress instalacije prije tako da ukoliko dođe do određenih problema možete vratiti site na točku gdje tih problema nije bilo.
Lazy loading
Kako još jedna od metoda za ubrzavanje učitavanja slika je tzv. lazy loading. Ova tehnika služi da se optimizira sadržaj koji je prvo vidljiv posjetitelju, dok se odgađa preuzimanje i prikazivanje sadržaja ispod donjeg ruba ekrana.
Lazy load radi na slijedećem principu – web preglednik učita sadržaj bez slika ili video zapisa, zatim se putem JavaScripta utvrdi koji je sadržaj vidljiv posjetitelju prilikom učitavanja i taj sadržaj se odmah predučitava. Preuzimanje i prikaz dodatnih slika i videa je odgođen dok posjetitelj ne scrolla i ne pogleda taj dio stranice.
I u ovom slučaju postoje brojni dodatci za WordPress koji omogućavaju lazy loading pa isprobajte onaj koji vam se čini najboljim za vašu web stranicu.
Uključite slike u sitemap
Mapa web lokacije ili sitemap pomaže web pretraživačima u pronalasku novog sadržaja pa je dobro uvrstiti i slike u mapu web lokacije. Ovime će se slike brže pojaviti u Googleovim rezultatima pretrage slika s koje dolazi oko 10% ukupnog prometa pretraživanja.
Jednom kada odaberete pravi format i optimizirate slike za najbolju izvedbu web stranica će se brže učitavati, a to će se svidjeti i posjetiteljima i web pretraživačima koji će vas radi toga i nagraditi.
