Optimizacija fotografija i grafike za prikaz na web sajtovima - ContraTeam

Optimizacija fotografija i grafike na web sajtovima

Optimizacija fotografija i grafike za prikaz na web sajtovima

Objavljeno: jul 3, 2018 9:56 am U kategoriji:

 
U vremenu brzog interneta koji nam je postao dostupan u gotovo svakom trenutku, dolazi do određenih promena prioriteta (kada je u pitanju način na koji se korisniku isporučuje sadržaj) što usputno dovodi i do zanemarivanja nekih faktora koji su, ipak, i dalje važni.

Kako je vremenom dolazilo do zasićenja interneta sadržajem, fokus se pomerio na relevantnost i verodostojnost, a brojne tehnike za njegovu optimizaciju počinju da zauzimaju daleko niža mesta na ovoj lestvici, nego što im pripadaju.

Tokom vremena i sa dugogodišnjim iskustvom u oblasti hosting usluga susreli smo se sa brojnim primerima zanemarivanja faktora koji, ne samo da utiču na brzinu učitavanja stranice, već se odražavaju posledično i na upotrebu serverskih resursa, pa i bandwidth-a.

Do ovih situacija uglavnom dolazi kada se na web sajt ubacuju fotografije u rezoluciji većoj od one u kojoj će biti prikazane, kao i nekompresovane fotografije, grafike u pogrešnom formatu i sl.

 

Formati fotografija

JPG (poznat i kao JPEG) je najpopularniji format koji je odličan za fotografije, kompleksne slike koje sadrže mnogo boja, senki, valera, ili nekih kompleksnijih paterna.
JPG format je jedan od najzahvalnijih formata i ima najbolju kompresiju zbog toga što poseduje veliku paletu boja (~16 miliona).

PNG je sledeći najpopularniji format koji se (često greškom) koristi kao alternativa JPG-u.
Najčešći oblici PNG formata su PNG-8 i PNG-24 čija je osnovna razlika u tome što PNG-8 prikazuje samo 256 boja, dok PNG-16 prikazuje i do nekoliko miliona. Jasno je da PNG-24 prikazuje grafiku u daleko boljem nivou kvaliteta, ali po cenu veličine fajla koja je i nekada i nekoliko puta veća od identične grafike snimljene u JPG formatu (čak i najvišeg nivoa kvaliteta).

GIF je format koji je nekada bio daleko popularniji nego danas. GIF format se uglavnom koristi za prikaze grafike koji ne sadrže mnogo boja (jer je ograničen na paletu od 256 boja kao i PNG-8), ili kada kvalitet nije važan, recimo za popularne “reakcije” iz filmova u vidu GIF animacije.

 

Kako pravilno prikazati fotografije na webu?

Tehnika i programa za optimizaciju fotografija je mnogo, ali suština je ista – fotografiju treba prilagoditi mestu i načinu prikaza.

Dimenzije fotografija

Prva stavka na kojoj se uglavnom pada ispit jeste pozivanje fotografija koje su snimljene u većoj rezoluciji do one u kojoj će se prikazivati. Koji god alat da koristite, moguće je jednostavno utvrditi u kojoj je dimenziji potrebno sačuvati fotografiju.

Kompresija fotografija

Kompresovanje fotografije sa razlogom zauzima poziciju broj dva. Odmah nakon utvrđivanja dimenzije, a pre exporta fotografije iz programa, potrebno je odrediti i stepen kompresije.

Stepen kompresije je često izražen na skali od 1 do 10. Uveravamo vas da upotreba kompresija na stepenu 6 biti zadovoljavajuća u 99% slučajeva, dok će sve preko 7 značajno uticati na veličinu fajla, a tu razliku oko neće primetiti.

Evo i jednog primera:

Dimenzija fotografije Format Kompresija Veličina fajla
800×670 – 72dpi JPG 6 stepen (40%) 77.3 kb
800×670 – 72dpi JPG 7 stepen (30%) 98.6 kb
800×670 – 72dpi JPG 8 stepen (20%) 133 kb
Optimizacija fotografija na webu - slika 60% kvaliteta

Kompresija 40%

Optimizacija fotografija na webu - slika 70% kvaliteta

Kompresija 30%

Optimizacija fotografija na webu - slika 80% kvaliteta

Kompresija 20%

Da li primetite razliku?

Posledice postavljanja neopravdano velikih fotografija na sajt

 

Vreme učitavanja stranice

Pre svega, najveća “šteta” koju možete prouzrokovati neoptimizovanim fotografijama ogleda se u vremenu potrebnom za učitavanje stranice.

Prema brojnim istraživanjima sa interneta, vreme učitavanja stranice zauzima sam vrh liste razloga zbog kojih korisnici odustaju od posete nekog sajta.

Optimalno vreme učitavanja stranice za koju korisnici u proseku imaju strpljenja je do 3 sekunde.

 

Korisnički doživljaj

Predugo učitavanje stranice posledično se odražava i na doživljaj posetioca sajta. Kada se kompletna filozofija oko doživljaja svede na osnovu, očitavanje velikih fotografija može izazvati probleme u formatiranju sadržaja, posebno kod prikaza na mobilnim uređajima, kao i “seckanje” zbog ukupne težine stranice koju uređaj mora držati u svojoj radnoj memoriji.

 

Serverski resursi

Ova pojava se nepovoljno odražava i na upotrebu serverskih resursa i to na:

  • PROTOK – Ograničenja hosting paketa koja su različita od provajdera do provajdera, a koja se odnose na protok, uglavnom nisu mala i teško ih je prekoračiti. Ipak, optimizacijom fotografija “trošenje” protoka se može značajno smanjiti kada se učitavanje jedne stranice pomnoži sa brojem poseta.
  • PROSTOR – Koji je u većoj meri restriktivna stavka u ponudi hosting provajdera popunjava se u većoj meri zbog fotografija koje se u svom izvornom obliku neće koristiti. Posebno je interesantno oslanjanje na skripte (CMS sisteme, web prodavnice i sl.) koje funkcionišu tako što vas ohrabruju da veličina fajla koji postavljate nije važna jer će one odraditi smanivanje. Ovakavko “rešenje” često duplira upotrebu prostora tako što nakon smanjivanja ne obriše originalnu fotografiju koja može biti velika i po nekoliko MB.
  • PROCESORSKO VREME I RAM MEMORIJA– Kao što uređaji sa slabijim procesorom i manje RAM memorije na kojima se učitava sajt moraju “držati” fajlove sajta u pripravnosti za vreme trajanja posete, tako ih tretira i server za vreme posete. Povećavanjem vremena za obradu jednog zahteva (requesta) povećava se i vreme zadržavanja procesora, a ram memorija se zauzima većom količinom fajlova.

 

PODELITE