Povežimo se



Politika Privatnosti
Uslovi Korišćenja

Često pitanje - kako da optimizujem fotografije za svoj sajt

by: Sanin Hamzagic

Fotografije, slikovni materijal, grafike i slične stvari su veoma važne kako u rangiranju tako i u OnSite optimizaciji

Kada govorimo o ovoj temi moramo imati u vidu da postoje dva razloga zbog kojih se vrši optimizacija ovog materijala: optimizacija za pretraživače (Google, Yahoo, Bing…) I optimizacija za OnSite SEO.

IME FAJLA

Optimizacija fotografija je važna kako za rangiranje na pretraživačima tako I za OnSite SEO tako I ona je važna iz nekoliko praktičnih razloga: manje zauzeće prostora na serveru, povećanje loading speed-a web sajta, lakši i sređeniji kod (code), brže otvaranje stranica, bolje rangiranje proizvoda u webshop-ovima... Ovo je vredno kako za sajtove koji imaju veliki broj galerija tako i za manje i lakše sajtove koji imaju svega nekoliko slika bilo za background ili slajder.

Optimizacija kojom obuhvatamo graficke materijale jedan je od važnijih delova OnSite SEO optimizacije kojom pokušavamo srediti sam sajt na način koji će dovesti do povećanja njegovog rejtinga u organskoj pretrazi. Google koristi veliki broj algoritama koji mereći različite aspekte funkcionisanja i kvaliteta sajta rade na rangiranju istog. Između ostalog, Google vrlo vrednuje u optimizacijskom smislu User Experience ili – iskustvo koje sajt pruža korisniku.

UX je tema za sebe, a mi ćemo se danas baviti slikama i načinom na koji one deluju na brzinu učitavanja.

Krenimo redom. Dobro poznata stvar je početno SEO sređivanje grafika. To podrazumeva da sam fajl ima naziv koji je optimizacijski prihvatljiv.

Dakle, ukoliko recimo imate sajt za prodaju cveća, fotke bi trebalo da se zovu po cveću koje je na njima, a to znači da bi fajl umesto nekog generičkog i nevažnog imena poput: image1-1.jpg trebalo da sadrži recimo: ljubicica.jpg.

cvece image1-1.jpg
ljubicica ljubicica.jpg

Ukoliko imate više fotografija istog cveća onda možete uvesti detalje: ljubicica-u-saksiji.jpg. Koristite što opisnije reči ali se držite i jednostavnih reči koje bi se mogle pojaviti u pretrazi.

Sledeći korak je postavljanje fajlova u foldere koji su relevantni za pojedinačne kategorije.

Ukoliko, uzimajući naš primer online cvećare, imate vizuelni materijal sobnog i baštenskog cveća trebalo bi da imate foldere za obe kategorije. Struktura foldera bi trebalo da izgleda otprilike ovako:

slike-nase-cvecare/sobno-cvece/ljubicica.jpg

dok bi fotografije baštenskog cveca trebalo da idu u sledecu folder strukturu:

slike-nase-cvecare/bastensko-cvece/ruza.jpg

Ovo je standardna struktura foldera i imena fajla i veoma je efektivna.

Imajte na umu upotrebu srednje crte kada dodajete reči u nazivu fajla ili foldera. NIKAKO ne koristite donju crtu! Jednostavno – gugl je ne voli.

ALT TAG

Sledeća stavka je sređivanje “alt tag-a“. Za sređivanje u optimizacijske svrhe neophodno je poznavanje html-a. Alt tag je mali tag koji se dodeljuje unutar image tag-a i služi kako bi se onim korisnicima koji iz nekog razloga ne vide sliku objasnilo šta se nalazi na njoj.

Alt tag se nalazi unutar image tag-a, a to izgleda ovako:

<img src=”./slike-nase-cvecare/sobno-cvece/ljubicica.jpg” alt=”africka-ljubicica”/>

Veoma često i veoma pogrešno su se alt tag-ovi koristili za optimizaciju samog sajta pri čemu bi se u alt tag na slici, recimo ljubicice dodavali izrazi poput ’najbolja_cvecara_u_gradu’.

Sledeći korak je dodatno sređivanje html koda pri čemu ćemo označiti veličinu fajla i time olakšati browser-ima učitavanje. Na našem primeru dimenzije su 200px sa 200px. Unošenje ove informacije u html kod izgleda ovako:

<img src=”./slike-nase-cvecare/sobno-cvece/ljubicica.jpg” width=”200px” height=”200px” alt=”africka-ljubicica”/>

Ovom informacijom smo osigurali da fotografija ne zauzme veći prostor od onog koji joj je potreban.

Ovde je bitno napomenuti da bi dimenzija trebalo da bude jednaka dimenziji u html ili css kodu koju smo odredili za taj fajl. Dakle ako se fajl nalazi u div elementu u kome je za njega predviđena dimenzija 200px sa 200px onda i naša fotografija treba da bude sređena tako. Ukoliko je dimenzija predodređena za nju manja ili veća onda bi je trebalo srediti da bude tih dimenzija.

alt-tag

SMANJIVANJE VELIČINE FAJLA

OK, sada smo obavili početno sređivanje možemo se posvetiti malo dubljoj optimizaciji. Kako bismo ovo obavili potreban nam je neki od programa za obradu.

Postoji veliki broj online editora koji su besplatni i koji odrađuju posao fantastično. Jedan od njih je i PIXLR. Ova online aplikacija za obradu fotografija poseduje neke od najupotrebljvanijih funkcija i izgled photoshopa. Ipak, ne bi bilo na odmet da imate i photoshop instaliran na vašem kompjuteru kako bismo mogli dodatno da optimizujemo.

Ako želite da opsečete fajl kako biste ga što bolje sredili potrebno je koristiti Crop Tool opciju:

photoshop-crop-alat

Koristeći opciju Crop Tool u PhotoShop-u ili u online editoru poput Pixlr selektovaćemo, a zatim i opseći onoliko od fotografije koliko nam je i potrebno. U ovom slučaju rešićemo se ivica:

fotosop-crop-alat

Nakon klika na dugme Crop grafički fajl ce biti opsečen

Ukoliko sada izvršimo proveru veličine:

photoshop-velicina-fotografija

Uvidećemo da su se dimenzije i veličina fajla promenile:

ps-velicina

Ovo efektivno znači da smo smanjili fajl kako po dimenzijama tako i po veličini izraženoj u kilobajtima. Ukoliko vam je ipak vazno da veličina ostane 200px sa 200px to možete promeniti na istoj ovoj opciji.

Takodje, na odeljku Document size (donji balon) promenite Resolution na 72!

Sledeći korak koji je ujedno i najvažniji jeste kako pravilno sačuvati fajl nakon obrade.

Najbolji način za to je korišćenje opcije Save For Web:

ps-save-for-web-opcija

Prozor koji se otvara je veoma važan, a neke opcije koje nalaze u njemu treba iskoristiti na najbolji mogući način

Krenućemo od opcije izbora tipa kompresije u kojoj želimo da sačuvamo fajl:

ps-save

  • JPEG – koristimo za fotografije koje su nam važne i čiji kvalitet želimo da što bolje očuvamo
  • GIF – koristimo za banere, male sličice, male ps animacije
  • PNG – generalno, radi se o unapređenju u kompresiji i kvalitetu u odnosu na GIF. Koristimo za vizuelni materijal sa ’providnom’ pozadinom kao i za fotografije kojima možemo dozvoliti veće rasipanje piksela


Sledeća opcija je kvalitet:

ps-kvalitet-fotografije

Opcija koja se najčešće koristi je upravo High i 60.

Ispod ove opcije obavezno izaberite i Optimized:

ps-optimizacija

Ono što će vam naročito izazvati zadovoljstvo jeste ova mala, jedva vidljiva informacija koja je nagrada za vaš uloženi trud:

ps-slike

Dakle, uspeli smo da fotografiju cveća koja je imala oko 120kb smanjimo na svega 12kb. Očigledno, što je fotografija veća – dimenzijski, rezolucijski i po količini kilobajta ili megabajta to će ušteda i optimizacija biti veća. Ako imate dosta fajlova na sajtu onda bi vam ovo moglo uštedeti ogroman prostor, poboljšati rejting i prodaju određenih proizvoda, povećati brzinu učitavanja sajta i samim tim olakšati sajt.