Slike su važan dio skoro svake web stranice i pomažu posjetiteljima da imaju bolje iskustvo. Danas su popularne velike fotografije, ali veća rezolucija znači i veće datoteke, što može usporiti učitavanje stranice. Cilj dodavanja slika je poboljšati iskustvo korisnika, ali ako se stranica učitava sporo, to neće pomoći jer će mnogi napustiti stranicu prije nego što se sadržaj prikaže.

Da bismo riješili ovaj problem tijekom razvoja web stranice, važno je optimizirati svaku sliku koju postavljamo. Optimiranje slika znači smanjiti veličinu datoteke, a da pritom ne izgubimo kvalitetu slike.

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

Glavni cilj optimizacije fotografija je pronaći dobar omjer između male veličine datoteke i dobre kvalitete slike. Obično se slike obrađuju prije nego što se postave na server koristeći neki program za uređivanje fotografija. Također, neke stvari se mogu poboljšati kasnije uz pomoć dodataka za WordPress.

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

Moderne kamere i pametni telefoni snimaju slike visoke kvalitete. Međutim, za web stranice nije potrebno koristiti slike u punoj rezoluciji, već je bolje odabrati odgovarajuću rezoluciju. Na primjer, za galerije se mogu koristiti rezolucije od 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.