Kako optimizirati fotografije za hitrejšo spletno stran

Kako optimizirati fotografije za hitrejšo spletno stran

Za bolj učinkovito spletno stran je pomembno poiskati načine s katerimi se skrajša čas nalaganje spletne strani. Pogosti vzrok počasnih spletnih strani so lahko tudi prevelike fotografije oz. grafike. In ker je nalaganje fotografij dandanes možno kar v nespremenjeni obliki iz npr. fotoaparata, se pogosto zgodi, da se pred nalaganjem na spletno stran ali blog pozabi na optimizacijo fotografij.

 

V tej objavi bom skušala pojasniti osnovne korake, kako lahko optimiziraš fotografije za svojo spletno stran ali blog. To je pa pomemben korak, ki ga je vredno vpeljati v postopek kreiranja novih vsebin in je ena boljših metod za takojšnje izboljšave spletne strani in s tem uporabniške izkušnje.

 

Najprej pa nekaj osnovnih pojmov…

 

Rastrska in vektorska grafika
Rastrske oz. bitne grafike (fotografije) so sestavljene iz točk, pikic t. i. “Pixels” (to je najmanjša posamezna enota, prikazana na monitorju). Vektorska grafika je sestavljena iz vektorjev, ki nato kreirajo geometrijske like. Če želiš ugotoviti, ali je tvoja grafika rastrska ali vektorska jo lahko zelo povečaš in če vidiš grafiko “pikčasto oz. kvadratke” gre za rastrsko (leva spodaj), če se kljub povečavi nič ne spremeni, gre za vektorsko grafiko (desna spodaj).

 

How to Optimize Images for faster Website

 

Vrste datotek:
Rastrska: .jpg, .gif, .png, .tif
Vektorska: .ai, .eps, .pdf, .svg (pazi, pdf je lahko tudi rastrska grafika)

 

Dimenzija in resolucija oz. ločljivost
Dimenzija oz. velikost grafike (ali fotografije) je merjena v številu pik v višino in širino. Resolucija oz. ločljivost pa na drugi strani nosi informacije o kakovosti grafike oz. kolikšno je število pik na palec (ppi). (vir)

 

Na kratko:
Dimenzija: gre za velikost grafike oz. fotografije v pikah (Pixels)
Ločljivost: pa je kakovost grafike oz. fotografije. Večje je število pik na palec, bolj kakovostna je fotografija.

 

Kaj potrebuješ ti?
Dimenzija: več v naslednjem poglavju.
Ločljivost: za web običajno zadostuje 72dpi, za tisk je potrebnih 300dpi (dpi=dots per inch).

 

Še proces…

 

1. Uredi fotografijo in zmanjšaj velikost

Običajno so velikosti fotografij, posnete tudi le npr. z iPhonom prevelike za večino potreb spletnih strani. Zato jih je treba zmanjšati v primerne velikosti. Preden pa jo zmanjšaš, jo lahko še urediš in po potrebi obrežeš.

Dimenzija: Najprej je treba ugotoviti, kakšna je primerna velikost fotografij za tvojo spletno stran ali blog. To narediš tako, da poiščeš največjo fotografijo, ki se prikazuje na tvoji spletni strani in pogledaš v kakšni velikosti se prikazuje kot največja. Pazi tudi na tiste “pop up” fotografije (če jih imaš).

 

Za zmanjševanje slik lahko uporabiš:

 

V Photoshopu: “File >> Save for web” določiš velikost fotografije, kakovost in shraniš.

How to Optimize Images for faster Website

 

2. Kompresija oz. stiskanje fotografij

Sedaj je čas, da fotografijo še stisneš. Kompresija oz. stiskanje je proces, v katerem se odstranijo informacije o fotografiji, ki jih ne vidimo s prostim očesom in lahko precej zmanjšajo velikost fotografije. Pri tem pa je potrebno biti pazljiv, saj lahko s kompresijo vplivamo tudi na kakovost fotografije (različna orodja namreč ponujajo različne možnosti stiskanja). Pomembno je najti ravnovesje med najmanjšo velikostjo in največjo kakovostjo fotografije. Za stiskanje pa obstaja kar nekaj orodij, moje najljubše je ImageOptim.

Za več orodij pa lahko pogledaš test “18 image file compression tools tested”.

 

3. SEO optimizacija

Fotografija je pripravljena za objavo. Ampak preden jo zares objaviš, jo je priporočljivo še prilagoditi za iskalnike, kot je npr. Google.

 

Bistveni informaciji, ki ju je skoraj nujno dodati fotografiji sta:
Ime datoteke (Filename): v ime datoteke skušaj vključiti ključne besede. Za večbesedno poimenovanje lahko besede ločiš z – ali _. Npr. moj-pes-floki.jpeg je veliko boljše kot XB817A.jpeg ali mojpesfloki.jpeg. Izogni se tudi združevanju besed brez ločil (kot je v zadnjem primeru).
“Alt tag”: dodaj tudi besedilo, ki se bo pokazalo namesto fotografije, v primerih ko se zaradi kakršnega koli razloga fotografija ne bo prikazovala. Npr. alt=”To je moj kuža Floki.”

 

To je preprosti in osnoven način za optimizacijo fotografij za spletne strani in bloge. Upam, da ti je ta prispevek pomagal, si izvedel/a kaj novega in ti bo novo znanje pomagalo pri hitrejši spletni strani.

 

Želiš nedeljske novičke? + brezplačen dostop do vseh freebies.
JA, SEVEDA! >>

Ni komentarjev

Komentiraj

Proti spamu uporabljam Akismet. Več....