субота, 02. новембар 2019.

Optimizacija slika za web - Ultimativni vodič 2020

Slika ume da kaže ono što rečima ponekad nedostaje. Ili slika koja govori, pa slika vredi više nego hiljadu reči. 

Do ovih modernih poštapalica optimizacija slika, prilagođavanje slika za web, pa prilagođavanje slika za mobilne platforme, pa  prilagođavanje slika za 4K, 8K, 16K, 1024K, ..., rezulucije.

Sigurni smo da ste čuli barem za jednu od ovih fraza, klišea, već pomalo i požutelih. Pogotovo ovih modernih jer slike na webu su podrazumevana pojava, mainstream rekli bi.

Mada...

Internet je slike postavio na pravo mesto. Sećate se kada je Google omogućio i pretragu slika prema ključnim rečima? 

Ni ja. Davno to beše a godine se tako lako i brzo zaborave.

Zaboravih da vas pitam. 

Imate li sajt?

Imate. Super. Znamo da to i nije neka privilegija. Imaju ga mnogi i skoro svi oni kojima je stalo da budu tamo.

A imate li slike na sajtu? Imate! Bravo, sjajno. A sada pitanje za 10 rsd. 

Da li vas sajt pronalaze i preko Google pretrage slika i koliko se to često događa? Ili procentualno.

Minut ili dva ćutanja. Znamo da se niste bavili ovim segmentom. To je posao za agencije koje se bave digitalnim marketingom ili SEO.

Eto pitamo da vam nisu davali savete i po tom pitanju. Jer saveti su jedno a najbolje prakse za optimizaciju slika za web su neka druga stvar. Trendovi po pitanju slika za web su neka treća tema.

A da. Jeste li saznali koliko prometa na vaš sajt dolazi od pretraga slika?

Ili, znate li uopšte koliko slika imate na svom sajtu, blogu, na Internetu a koje vode ka vašem sajtu? 

Dakle, postoji značajan broj pretraga slika preko Google. 


Kako se prilagoditi, odnosno kako da baš vaše slike budu među prvim rezulatima pretrage na Google?

Krenimo redom. Prvo mali podsetnik u pogledu formata i dimenzija slika za web. 


Jer nije svejedno kojeg su formata i kojih su dimenzija slike koje se postavljaju na web stranice.


Formati slika za web



BMP format nećemo koristiti, ali ćemo ga zbog istorije weba samo pomenuti. Zaboravite ga za korišćenje.


GIF format slika


Dobro stari gif, nekada nezamenljiv. Stariji dizajneri će se možda sa setom setiti ovog formata kada su pravili logoe, ikonice, crteže, nekada i slike. Ipak, nije bio dovoljan za kvalitetnije slike, popularno slike sa prelivima i mnogo boja, jer je podržavao samo 256 boja. 

Ovaj format poseduje providnost i na taj način se slke mogu lakše uklapati u dizajn stranice, ali ne podržava alfa providnost kao na primer png format koji je jednostavno bolje rešenje za providnost slika.

Da li je treba koristiti ovaj format i dalje? Mislim da ne. Jer prosto je zastareo. Možda još poneko kreira jednostavniju gif animaciju ali ipak bi ovaj format trebao ići u arhivu.


JPEG format slika


Ili popularnije jpg (u slengu džej-peg) je verovatno najpopularniji format slika za web. To je u suštini metod za kompresiju slika koji mogu da koriste drugi formati. JPEG može da sadrži skoro neograničen broj boja. 

Njegova popularnost je posledica činjenice da je algoritam kompresije koji koristi ekstremno efikasan za fotografije i prikazivanje na webu. Pogotovo ako se uporedi sa kompresijom koju daju drugi formati npr. gif ili png.


Kako da kompresujete sliku za web?


Ako kompresiju slika, ili njihov prilagođavanje za web želite da radite sami i ne koristite neki profesionalni alat za obradu fotografija nije sve izgubljeno. 


Postoji niz veoma solidnih besplatnih online alata za tu namenu. Guglajte i naći ćete ih.

Napomena: slike kompresovane u jpeg format imaju određene gubitke, ali to je prihvatljiva cena da bi se stranica brže učitavala. Nije preporučljiv i ređe se koristi za slike logoa, crteža i slova.


PNG format slika


Format PNG  je na neki način evolucija gif formata slika. Ovaj format je veoma popularan jer se skoro savršeno uklapa u dizajn stranica sajta. Poseduje providnost. 

Ipak, zbog optimizacije stranica ovaj format treba koristiti za jednostavnije slike. U suprotnom rizikujete loš skor kod onpage rangiranja stranica.


SVG format slika


Jedan novi format lagano krči put slave. To je SVG format. Bez previše stručnih termina to je grafički format napravljen za web  koji se koristi za dodavanje vektorskih slika stranicama. 

Glavna prednost vektorskih slika je što se mogu prikazivati umenjen odnosno uvećane na stranici a da se ne izgubi kvalitet.
To logično favorizuje ovaj format za sve dominantniji prilagodljivi web dizajn (responsive web design).

Napomena: činjenica da se unapred definisana veličina slike prikazuje skoro savršeno jednako na svim uređajima je fantastična!

Ovo je prosto idealan format za narastajući trend flat dizajn. Za programere i web dizajnere odlična prilika da zabriljiraju i pokažu kreativnost. Moraće malo da se upute u xml jer je svg na njemu zasnovan ali kada ga nauče, uz css i js, neće imati granice u svom poslu.

Kako se kreira ovaj format? To je već druga priča. Pravi alati za grafičare, odnosno vektorski grafički programi poput Adobe Illustrator, Corel-a imaju mogućnost eksporta u format svg.

Ako izuzmemo mogućnost da vam se slike u svg formatu mogu lako otuđivati (a da ih nije baš jednostavno kreirati), kao i činjenicu da neki stariji browseri ne mogu da ih prikazuju, ostaje pitanje zašto ovaj format već nije neuporedivo dominantniji? Možda to bude u 2020. godini.


WEBP format slika


Kada Google nešto uvede u igru to je retko promašaj. Najčešće je to sve ili ništa. Još 2010, Google je uveo otvoreni format slike poznatiji kao WebP. 

Njegova primena danas raste. Ovaj format se nameće kao zamena za glavne konkurentske formate, a to su slike u jpg i png formati. Činjenica da je stepen kompresije kod webp skoro za četvrtinu bolji od jpg i png favorizuju ovaj format kod velikih igrača koji znaju šta ti procenti čine u odnosu na konkurenciju.

Nedostatak ovog formata je što nije u potpunosti podržan od svih pretraživača ali se i po tom pitanju vide određeni pomaci.

Napomena: ako pravilno koristite ovaj format slike na vašoj stranici će se ipak videti u png ili ekvivalentnom formatu.

Mali zaključak u pogledu izbora formata slika za web

Svaki format ima svoje prednosti i nedostatke. Pokušajte da sagledavate slike iz ugla mašina za pretragu i kroz prizmu posetioca sajta. Kroz raspoložive uređaje preko kojih se gledaju stranice sa posebnim osvrtom na mobilne platforme. I shvatićete o čemu pričamo.

Nema lakih odgovora. Ipak, ako budete pratili trendove i savete eksperata za digitalni marketing, dobićete povratne reakcije u pogledu prometa na sajtu i broja ciljnih korisnika koji će vas prijatno iznenaditi.


Dimenzije slika za web 


Veoma osetljiva tema. Jer postoji ne mali broj onih koji će vam reći što veće slike i sa što boljim kvalitetom. Jer 4G gazi a 5G samo što nije pred vratima. Pa 5G još nije a kad će da preovlada nije baš sasvim izvesno. A 6G se već krčka u laboratorijama.


Dok se to ne dogodi veličina slika treba da se prilagođava dizajnu sajta, platformama na kojima se prikazuje i algoritmima za rangiranje stranica. 

Sve pomenuto primenjujte ukoliko vam je uopšte stalo da vaše stranice budu dobro rangirane na glavnim pretraživačima.

Veličina, odnosno dimenzije slike visoko koreliraju sa prethodnim delom vezanim za odabir formata slika. Njihova pametna sinergija i pomalo vizionarstva učiniće da vaše slike dovode neuporedivo više posetilaca na sajt.


Nazivi slika za web i njihova optimizacija


Taman se nauči kako se odabira pametan naziv domena, pa onda kako se pravi pametna adresa svake stranice a već ušeta i novi trend da se pravilno imenuju slike. 

Optimizacija slika za web je odlično ulaganje u sajt.

E to nije novi trend.  Mašine za pretragu i rangiranje, a posebno one google-ove, već odavno rangiraju slike i prema njihovim nazivima.

Kad se setim koliko vremena sam utrošio da ubedim vlasnika da zahteva od programera njegovog sajta da uvedu pametne nazive slika pomislim, možda je moj način predstavljanja nečega pogrešan?

U stvari kada malo bolje razmislim čini mi se da je i vlasnik uvideo značaj slika i njihovog pravilnog imenovanja onog trenutka kada je i sam postao korisnik google servisa za pretragu slika. 


Google pretraga slika

Jer njegovih slika u rezultatima pretrage slika nije bilo ili je to bilo sporadično, a daleko od toga da su bile lošeg kvaliteta ili da nisu bile zanimljive posetiocima.

Gde smo sada sa nazivima slika? 

Ako malo budete vredni i proguglate termin kako se pravilno imenuju slike za web u nebrojeno tekstova dobićete instrukcije da naziv slike, njen opis i posebno alt tag slike treba da sadrže ključne reči sadržaja, ili da prate naslove odnosno podnaslove teksta.


Da li je to dovoljno?


Nekada bi bilo jer su nekada i algoritmi za rangiranje bili relativno ograničeni. 

Više nije. 

AI (veštačka inteligencija) koja sve više preuzima primat u SERP (rezultatima pretrage) je postala pametnija i hardverski moćnija. 

Prethodne decenije mogli ste pročitati kako su guglovi roboti shvatali sliku na način da pročitaju naziv slike i posebno onaj čuveni alternativni opis (neizbežni alt tag) u samom tagu slike.

Vremena se menjaju. Mašine napreduju. Naziv slike, iako pravlno imenovan, pa još i alternativni opis slike, školski imenovan, nisu dovoljni da favorizuju vaše slike u rezultatima pretrage slika.

Šta je još potrebno da uradite da vaše slike budu favorizovane u rezultatima pretrage slika?


  1. Nazivi slika treba da budu prilagođeni upitima posetilaca. Slično kao i tekstovi na internetu.
  2. Sadržaj slike treba da odgovara nazivu i opisu odnosno alt tagu.
  3. Sadržaj stranice gde se nalazi slika treba da bude u visokoj korelaciji sa sadržajem slike.


Primer 

Upit posetioca: Kako smanjiti potrošnju goriva u vožnji?


Kako smanjti potrošnju goriva u vožnji

Zašto je ovo dobar primer?


Naziv slike je: kako-smanjiti-potrosnju-goriva-u-voznji.jpg 
Alt tag: kako smanjiti potrošnju goriva u vožnji

Ako sledite ovaj upit na google dobićete ovu sliku na drugom mestu u rezulatima pretrage. Ali gle čuda. I treća slika je povezana sa sajtom rentacarmms na kojem je ovaj blog. 

Bingo!

Pun pogodak. Slike su relevantne za google i sajt će dobijati promet i na ovaj način. 


Google pretraga prikaz

Prikazuje se vozač za upravljačem a slika treba da predstavi kako uštedeti gorivo u vožnji. Google algoritmi su to sve lepo povezali i verovatno i zato favorizovali ovu sliku u odnosu na ostale slične slike.

Gde je jedan tu je i drugi dobar primer.

Upit: preciscivac vazduha i duvanski dim. Ako kliknite ne ovaj link i potražite pretragu slika dobićete nekoliko odličnih slika, infografiku i relevantne slike iste firme ambilife.


Prečišćivać vazduha i duvanski dim


Opet dobro promišljanje i pun pogodak za autore slika! Slike imaju pametne nazive, optimizovane su za web po formatu i dimenzijama i što je posebno važno, njihova sadržina prati naziv slike.

Vlasnici ovih sajtova očigledno ulažu u digitalni marketing jer ovako kreirane slike i njihova povezanost sa stranicama nisu slučajnost.

Savet: optimizacija slika za web, a posebno optimizacija alt tag opisa je pametna investicija koja brzo pokazuje rezultate.

Šta smo danas naučili?


Jedan od veoma važnih faktora za rangiranje sajtova je brzina njegovog učitavanja. Pogotovo na mobilnim platformama. 

Velike i neoptimizovane slike se sporije učitavaju a to stvara negativan efekat kod posetioca sajta ali i kod mašina koje rangiraju stranice. A ni gugle ne voli stranice koje se sporije učitavaju.

Prilagodite slike na stranicama po formatu, dimenzijama i sadržaju sa tekstom na sajtu.

Očekujemo vaše komentare, vaša iskustva sa slikama koja su se pokazala dobro kroz vašu praksu i konkretne projekte. 



5 коментара:

  1. Pre desetak godina, kada sam radio jedan web shop, a tada kod nas internet prodavnicu su bile baš retke, a online kupovina mislim da nije ni postojala, već se naručivalo, pa plaćalo uplatnicom u pošti, vlasnik donese odštampane kataloge sportske opreme. Svaki artikl sam skenirao, obradio, optimizovao, uneo opis i kada sam završio shop malo radio i čovek ga ugasi sajt. Ne možete da zamislite koliko sam truda i rada uložio, a da on nije bio svestan da mu je svaki artikl moguće naći u pretrazi slika.

    ОдговориИзбриши
  2. Test sam sa uživanjem pročitala jer se bavim izradom sajtova, pa razumem o čemu pišete. I potpisujem od reči do reči.

    ОдговориИзбриши
  3. Nekada smo imali zadatu širinu 800px, a visina kolika bude. To je bio zakon, a ako uleti 800x600 prava lepota. A danas dimenzija i formata slika koliko hoćete. A najviše me nervira forsiranje visine slike 533px. Ne razumem šta nedostaje visini od 600px.

    ОдговориИзбриши
  4. Ovo vezano za slike je stvarno jako bitno. Najjači su mi ovi što imaju sajt u WP-u i kukaju kako ih nema u pretrazi po slikama, a sve su uradili po upustvima Yoasta. Pa da je Yoast svemogući programer, onda ne bi firme angažovale programere za ozbiljne poslove optimizacije sajtova.

    ОдговориИзбриши
  5. puno toga mi je poznato ali me je fascinirao primer za ruski ambilife preciscivac vazduha koliko su pametno kreirali slike i povezali ih sa stranicama .. definitivno tekst koji ima primere me uvek odusevi

    ОдговориИзбриши