DataVoyage Home Page
ODBS WEB dizajn YUCity
www.uzice.net Intranet SF-BAY
DVNet Internet domeniProgrami
WEB i mail serveri

 

DOKUMENTA

OPTIMIZACIJA FOTOGRAFIJA RADI OBJAVLJIVANJA NA WEB-U

 

U ovom članku objasniću kako se fotografije pripremaju i obrađuju da bi bile primenjene na internet prezentacijama.Ovaj postupak se zove optimizacija i to s razlogom, jer je krajnji cilj obrade da dobijemo što kvalitetniju fotografiju ali u uslovima kada smo ograničeni njenom veličinom i dužinom datoteke. U načelu, cilj je da datoteka bude što kraća a da ostane što kvalitetnija. Optimizacija je, u stvari, postupak kojim u stvari pravimo kompromis između kvaliteta i veličine datoteke.

Od čega se sastoji digitalna fotografija

Najmanja informacija koja čini fotografiju naziva se tačka. Ona fizički zaista predstavlja tačku koja ima osobine: boju i intenzitet boje (svetloću). Kombinacija boje i intenziteta na fotografiji daje mogućnost prikaza miliona i milona nijansi.

Slika se sastoji od tačaka: Ono što na levoj slici izgleda kao fotografija u stvari je skup sitnih tačaka koje u oku formiraju sliku. na desnoj slici se vidi uvećan detalj.

 

Fotografija se sastoji od tačaka što se vidi na uvećanom detalju na desnoj slici

Uvećani detalj sa leve slike na kome se vide tačke od kjih je slika sastavljena.

Tačke su na fotografiji složene jedna do druge, svaka imajući svoju boju i intenzitet i tako zajedno čineći sliku. Kvalitet slike zavisi od broja tačaka koje sačinjavaju sliku. Na web-u, ograničeni smo brojem tačaka koje možemo da upotrebimo za prikaz slike.

Međutim, poznavanje sadržaja fotografije može mnogo da pomogne. Recimo, na dužinu datotke pre svega utiče broj tačaka koje ta fotografija sadrži. Broj tačaka na fotografiji se dobija kada se pomnoži broj tačaka po širini brojem tačaka po visini fotografije. Iz toga izvodimo zaključak da dužina datoteke približno zavisi od kvadrata broja tačaka na stranci fotografije, iliti, ako fotografiju smanjimo tako da stranica bude dva puta manja, dužina datoteke biće četiri puta manja. Čak i malo smanjenje fotografije po širini ili visini može dati veliku uštedu u dužini datoteke.

Počnimo optimizaciju

Da krenemo od početka, pred sobom imate fotografiju na papiru i zahtev da je spremite za WEB tako da ona ne pređe određene dimenzije i dužinu. Pokazaću Vam kakav je postupak kada se to radi u Photo Shop-u, međutim, postupak je veoma sličan i u svim ostalim programima. Ceo proces podelićemo u nekoliko koraka. Vremenom ovo će Vam postati rutina koju ćete izvršavati bez mnogo razmišljanja. Postupci su toliko rutinski da bi mogli i da se isprogramiraju i izvršavaju automatski. Zaista, postoje programi koji to i rade. Međutim, svaka fotografija je različita i, iako rutinski, postupak ipak zahteva da vidite šta se dešava i efekte primenjujete prema proceni tako da dobijete najbolje rezultate.


Prvi korak: Skeniranje

Podrazumevam da već znate kako se skenira pa ću Vam dati samo kratka uputstva na šta treba da obratite pažnju.

Pre svega, fotografije na web-u su u niskoj rezoluciji. Načelno se uzima da je to 72 dpi. Međutim, na web-u nije bitna rezolucija izražena gustinom tačaka (dpi) nego brojem tačaka po širini i visini slike. Browser ignoriše informaciju o gustini tačaka i koristi samo broj tačaka po širini i visini slike. Dve slike, širine recimo 200 i visine 70 tačaka biće prikazane iste veličine i ako je jedna u rezoluciji 72 dpi a druga 300 dpi. Ovo Vam pre svega govori da prilikom skeniranja vodite računa o dimenzijama slike a ne o njenoj rezoluciji.

Pravilo kod skeniranja je da se uvek skenira u rezoluciji za najmanje 1.5 puta većoj od one na kojoj će se skenirani materijal prikazati. Kada je WEB u pitanju, dimenzije slika su veoma male tako da je uputno uzeti i veći faktor povećanja. Ovo je naročito važno ako skenirate lošu ili neoštru fotografiju ili neki štampani materijal. Ako skenirate mnogo većom rezolucijom a onda sliku smanjite na potrebnu dobićete mnogo bolji rezultat. Ne štedite na rezoluciji prilikom skeniranja, ali ipak ne preterujte. Prevelika rezolucija znači i mnogo duže vreme skeniranja. U praksi, skenirajte na 150 do 300 dpi-ija.

Drugi korak: Opsecanje

Crop tool, alatka za opsecanje fotografija. Izaberite ovu alatku, označite mišem deo slike koji želite da sačuvate i dva puta kliknite na izabranu površinu.Bez obzira da li ste skenirali sliku ili ste je dobili već skeniranu ili preuzetu sa digitalnog fotoaparata, prvo što treba da uradite to je da je opsečete. Ova opcija se najčešće naziva Crop, a u nekim programima i Trim, a svodi se na to da na fotografiji označite deo slike koji hoćete da zadržite i opsecanjem odstranite višak. Nekada će vam trebati da iz slike uzmete samo neki detalj a nekada samo da odstranite beline oko skenirane fotografije. Ako opsecanjem vadite detalj iz veće fotografije imajte to u vidu prilikom skeniranja, probajte već tada da skenirate samo taj detalj u odgovarajućoj rezoluciji. Beline oko skenirane fotografije uvek odstranjujte, one su zaista višak koji bespotrebno povećava veličinu datoteke sa slikom. Ako na sajtu fotografija treba da ima belinu postoje načini da se to izvede, i nema potrebe da Vi belinu pravite u samoj slici.

Opsecanjem, odredili smo tačan sadržaj fotografije i odstranili višak koji bi nam samo smetao i usporavao dalju obradu. Opsecanje je prvi element optimizacije fotografije.

Postupak: izaberite Crop tool mišem na fotografiji označite oblast koju želite da sačuvate. Opsecanje aktivirate dvostrukim klikom miša na označenu oblast ili izborom opcije Image/Crop iz menija.


Treći korak: Doterivanje

Fotografija često ne izgleda baš najbolje. Može biti loše razvijena ali i kvalitet skenera ima velikog uticaja. Zato je nekada potrebno doterati sliku tako da izgleda onako kako nama odgovara. Doterivanje se radi odmah nakon opsecanja. Tada fotografija sadrži najviše korisnih informacija koje omogućavaju programu za obradu da kvalitetnije obavi posao prilikom korekcija. Ovakvo doterivanje je važno napraviti pre nego što smanjimo rezoluciju slike zbog toga što će se eventualne sitne greške smanjivanjem minimizovati ili potpuno izgubiti, odnosno sada imate više mogućnosti za intervencije.

Šta sve možete raditi doterivanjem? Najčešće sliku treba malo posvetliti ili potamniti, povećati ili smanjiti kontrast, doterati kolorit (ako je slika hlada, odnosno vuče u plavu ili zlenu boju dodavanjem crvene i žute popravljate utisak, i obrnuto ako slika vuče u crveno ili žuto, dodavanjem plave i zelene to možete korigovati), možete očistiti fleke, odraze dlačica i druga oštećenja na fotografiji. Možete napraviti i neku foto-montažu ako je to neophodno.

Četvrti korak: Smanjivanje

Kada je sve na fotografiji doterano pristupićemo smanjivanju dimenzija, odnosno svođenju rezolucije na potrebnu vrednost. Posao je lakši ukoliko imate unapred zadate dimenzije fotografije, a ako to nije slučaj onda ćete morati da eksperimentišete dok ne dobijete zadovoljavajući rezultat.

Podešavanje veličine slike. Podesite željenu dužinu i širinu.Opcije za promenu dimenzija slike su jednostavne i lako ih je primeniti. U PhotoShopu u meniju Image naći ćete opciju Image size. Izaberite je i dobićete dijalog za promenu dimenzija fotografije. Prvo proverite poslednju opciju Resampling, ona treba da bude uključena. To će vam omogućiti fizičku promenu veličine slike. Pored ove opcije imate izbor metoda za preračun gde je obično unapred ponuđena opcija Bicubic i nju i koristite jer daje najbolje rezultate. O čemu se radi? Uzmimo da Vaša skenirana fotografija ima dimenzije 1250x980 tačaka, a treba da je smanjite ne 550 tačaka po dužoj strani. Program dakle treba da izračuna kako da, u ovom slučaju, svede informaciju zabeleženu sa 1250 tačaka na 550 tačaka. Zavisno od željenih rezultata mogu se koristiti različiti matematički modeli a Bicubic daje rezultat najpribližniji originalu.

Sledeća opcija koju treba da podesite je Constrain proportions. Ako je opcija uključena program će se potruditi da zadrži proporciju, to jest, odnos između širine i visine fotografije. Prilikom promene jedne dimenzije slike on će automatski izračunati drugu dimenziju vodeći računa o proporciji.

I ostalo je još samo da podesimo novu dimenziju slike. Ukucajte novu visinu ili širinu slike. Ne zaboravite da proverite da li je podešeno da je jedinica mere broj tačaka (pixels) jer to je jedinica mere koja se koristi za dimenzije slike na WEB-u.

Kada ste sve podesili možete kliknuti na OK da bi program preračunao sliku i sveo je na zadate dimenzije. Ipak, pre nego što to uradite proverite opciju Resolution. To je, ako se sećate, gustina tačaka po inču. Ovde će stajati rezolucija koju ste izabrali prilikom skeniranja fotografije. Rekao sam da ona nema uticaja ne veličinu slike na web-u jer se ovaj podatak ignoriše. Ipak dobar je običaj da se rezolucija podesi na 72 dpi i to bi ste trebali da uradite. Međutim, obrtite pažnju, promenom rezolucije promenićete dimenzije slike u tačkama. Zbog toga je dobro da rezoluciju podesite pre nego što ukucate konačne dimenzije fotografije.

E sada možete da kliknete dugme OK. Da bi ste videli kolika je realna veličina fotografije iz glavnog menija izaberite opciju Vew, Actual pixel size (Alt+Ctrl+0). Slika će biti prikazana u istoj veličini koja će biti na WEB stranici.

Peti korak: Završna obrada

Prilikom smanjivanja slike obavezno dolazi do zamućivanja koji se prepoznaje u neoštroj slici. U završnoj obradi, nakon smanjivanja, obavezno treba "izoštriti" fotografiju primenom filtera Sharpen ili Unsharp Mask.

Alatka za "izoštravanje" zamućenih fotografija. Isprobajte parametre.Sharpen ima unapred definisane sve parametre koji u velikom broju slučajeva odgovaraju potrebama.

Unsharp mask omogućava da podesite parametre po želji a efekat njihove promene odmah se prikazuje u predviđenom prozoru. Količinu efekta podesite po osećaju, ali slobodno malo preterajte jer slike dobijaju na efektnosti kada su nešto oštrije. Pazite, ipak, da ne preterate mnogo jer možete potpuno da uništite sliku. Kada ste zadovoljni podešavanjem kliknite na OK i filter će biti primenjen na celu fotografiju. Za početak isprobajte ovu opciju, Undo (Ctrl+Z) će vas uvek vratiti na prethodni korak.

Nakon toga možete dodatno ponoviti i korekcije iz trećeg koraka ali ako je to potrebno onda niste dobro uradili taj treći korak.

Slika je ovim praktično gotova što se obrade tiče. Ostaje samo da, ukoliko želite, upišete tekst sa oznakom kopirajta ili već šta je potrebno.Ovaj tekst ne možete upisivati ranije jer bi se obradom zabrljao i postao nečitak. Osim toga, tek sada na ekranu imate tačnu veličinu slike kakva će biti na web strani pa tako tek sada možete da ocenite koja veličina slova će biti odgovarajuća. Tekst pišite nekim čitkim fontom kao što je Vertana ili Tahoma. Boju teksta izaberite tako da bude kontrastna i time obezbedi čitkost ispisanog teksta. Ako je podloga šarena pa ne možete da pogodite boju koja će biti čitka iskoristite opciju Stroke da konturu slova iscrtate drugom bojom (kontrastnom u odnosu na boju slova).


Šesti korak: Podešavanje kompresije i snimanje

Konačno, optimizaciju slike završavamo izborom odgovarajućeg formata datoteke u koju ćemo da je snimimo i podešavanjem parametara kompresije.

Poređenje fotografija po vrsti kompresije: Slike levo i desno su iste dužine ali je GIF morao biti redukovan na 8 boja. Slika u sredini je GIF sa najvećim brojem boja. Zaključak je da JPEG daje najbolji kvalitet fotografije za istu dužinu datoteke.

GIF sa 8 boja, učitava se za 3 sekunde.
200x182px, GIF, 8 boja, 10K/3sec.

GIF sa 256 boja, učitava se za 11 sekundi.
200x182px, GIF, 256 boja, 38K/11sec.

GIF sa 15 miliona boja, učitava se za 3 sekunde.
200x182px, JPG, 16 mil. boja, 10K/3sec

Formati slika koji su podržani na web stranama su JPEG, GIF i PNG. Kako se radi o fotografiji, to uglavnom znači da sliku treba napraviti u JPEG formatu, zato što JPEG slike mogu da sadrže informacije o milionima boja i nijansi. Datoteke sa slikama u ovom formatu imaju nastavak .jpg. Formati GIF i PNG su ograničeni na 256 boja pa su pogodniji za jednostavne crteže, dugmad i slične elemente. Međutim iako praktično nisu namenjene za fotografije u nekim slučajevima mogu odlično da posluže. Mi se optimizacijom GIF i PNG slika nećemo baviti jer fotografije o kojima govorimo ne mogu na prihvatljiv način da se smeste u ovaj format.

Kompresija je matematički postupak kojim se smanjuje potreban prostor za smeštanje određene informacije. Kompresovana informacija nije direktno upotrebljiva već se mora prvo dekompresovati (vratiti u prvobitni oblik). Kompresija se vrši prilikom snimanja slike i na osnovu zadatih parametara a dekompresija se vrši automatski prilikom učitavanja slike za prikaz. Kada su fotografije u pitanju postoje dve vrste kompresije, kompresija bez gubitka kvaliteta i kopresija s gubitkom kvaliteta. GIF i PNG kompresuju slike bez gubitaka kvaliteta dok JPG kompresija dovodi do gubitka nekih elemenata slike. Koliko će se izgubiti zavisi od toga koji stepen kompresije podesimo.

E sad, koje se to informacije gube? Recimo to ovako, prilikom kompresije program na neki način "inteligentno" prepoznaje delove slike pa umesto da zapamti sve informacije slike on zapamti njihov opis. Takođe, pošto zna kako ljudsko oko reaguje na boje i ostale elemente koji čine sliku zna šta od toga može da ne prikaže a da to oko ne primeti. Prilikom dekompresije na osnovu "opisa" restaurira se slika koja nije identična originalu ali je toliko slična da oko ne vidi razliku.

Kod fotografija velike rezolucije postupak je toliko dobar da se praktično ne može primetiti razlika između originala i kompresovane slike, međutim slike za web su vrlo niske rezolucije i na njima se gubitak kvaliteta može primetiti. Tu na scenu stupa veština osobe koja optimizuje fotografiju da napravi najbolji kompromis između gubitka kvaliteta i dužine datoteke.

U PhotoShop-u već prilikom snimanja slike (Opija Save As...), ako izaberete format JPG dobijate mogućnost da podesite najosnovnije opcije za kompresiju. Ali to se ne radi na taj način. Pored ove opcije imate i Save for Web... (Alt+Shift+Ctrl+S) iza koje se krije mnogo bolji alat za kompresiju.

Pokretanjem ove opcije dobićete na prvi pogled komplikovan dijalog. Sa leve stane nalazi se nekoliko opcija za manipulaciju od kojih Vam je bitna samo prva u obliku šake. Ona omogućava da klikom na sliku pomerate njen sadržaj da bi ste videli sve delove, ako je prevelika da bude cela prikazana. Srednji deo je prostor gde se prikazuje slika koju optimizujete a desno se nalaze opcije za podešavanje parametara kompresije i konačno snimanje kompresovane slike.

Alat za optimizaciju JPEG i GIF formata slika. Pažljivim podešavanjem parametara može se znatno skratiti datoteka a da sadržaj ostane kvalitetan.

Srednji deo ima u vrhu četiri jezička na kojima piše Original, Optimized, 2-Up i 4-Up. Namena im je sledeća: Original prikazuje originalnu sliku bez ikakve optimizacije. Optimized prikazuje optimizovanu sliku, 2-Up prikazuje i originalnu i optimizovanu sliku tako da ih lako možete uporediti a 4-Up prikazuje originalnu sliku i još tri optimizovane (kojima svakoj pojedinačno možete podešavati paramere kompresije) tako da sve četiri odjednom možete da poredite. Najčešće ćete koristiti opciju 2-Up koja je sasvim dovoljna za najveći broj poslova.

Ispod svake slike imate prikazane neke podatke o njoj. Za originalnu sliku ispisana je njena dužina a za optimizovanu format, kvalitet, dužina, i procenjena brzina učitavanja na Internetu. Prednost ovog dijaloga je upravo to što za optimizovanu sliku možete da vidite efekat koji zadati parametri ostavljaju, pre svega vizuelno možete videti koliko kompresija utiče na pogoršanje kvaliteta slike a podaci ispod Vam pokazuju koliko ste uspeli da skratite dužinu datoteke.

Među opcijama sa desne strane, prvo izaberite format. Kao što sam rekao, za fotografije ćemo koristiti JPEG. Odmah uključite opciju Progressive. Ona nalaže da se slika snimi tako da browser prilikom učitavanja može da prikaže deo koji je učitao. U suprotnom, slika će biti prikazana tek kada se učita cela. Ovo je interesantna opcija zato što ako se slika prikazuje kako se postepeno učitava to kod posmatrača izaziva osećaj kao da se slika brže učitava (iako to nije tačno). Jednostavno, mozgu je zanimljivije da gleda da se nešto dešava sa slikom pa mu se učini da ceo proces traje kraće. Opciju ICC Profile zanemarite. Opcija Quality služi za podešavanje stepena kompresije. Što je ovaj broj manji, veća je kompresija ali je zato kvalitet manji. Opcija Blur izaziva zamućenje slike. Kod nekih fotografija to omogućava veću kompresiju ali zato slika izgleda zamućenija. Opcija Matte se koristi za GIF slike, isto kao i opcija Color Table ispod. Primetićete da ovde imate i mogućnost dodatnog podešavanja veličine slike u opciji Image Size koja daje otprilike iste opcije kao i dijalog opisan u četvrtom koraku. Ipak, ja ne preporučujem korišćenje ove opcije, jer kao što rekoh, posle smanjivanja slike treba obavezno primeniti Sharpen efekat a ako slika ima tekst on se stavlja tek nakon što je veličina slike podešena.

Poređenje fotografija po nivou kompresije: Povećanjem kompresije dužina datoeke drastično opada, međutim, opada i kvalitet. Samo od sadržaja fotografije zavisi koliko će krajnja datoteka biti duga i koliko će se primeriti izobličenja.

Jagnje, 200x200px, JPEG, kvalitet 10%, 9K/3sec.
200x200px, JPEG, kvalitet 10%, 9K/3sec.

Jagnje, 200x200px, JPEG, kvalitet 50%, 20/6sec.
200x200px, JPEG, kvalitet 50%, 20K/6sec.

Jagnje, 200x200px, JPEG, kvalitet 90%, 55K/16sec.
200x200px, JPEG, kvalitet 90%, 55K/16sec.

Jezero Vrutci, 200x200px, JPEG, kvalitet 10%, 7K/2sec.
200x200px, JPEG, kvalitet 10%, 7K/2sec.

Jezero Vrutci, 200x200px, JPEG, kvalitet 50%, 14K/4sec.
200x200px, JPEG, kvalitet 50%, 14K/4sec.

Jezero Vrutci, 200x200px, JPEG, kvalitet 90%, 38K/11sec.
200x200px, JPEG, kvalitet 90%, 38K/11sec.

Planina Tara, 200x200px, JPEG, kvalitet 10%, 5K/2sec.
200x200px, JPEG, kvalitet 10%, 5K/2sec.

Planina Tara, 200x200px, JPEG, kvalitet 50%, 11K/4sec.
200x200px, JPEG, kvalitet 50%, 11K/4sec.

Planina Tara, 200x200px, JPEG, kvalitet 90%, 32K/11 sec.
200x200px, JPEG, kvalitet 90%, 32K/11sec.

Kada podesite parametre onako kako Vam odgovara snimite sliku klikom na dugme Save, snimite sliku tamo gde je potrebno, i time je posao oko optimizacije fotografije završen.

Konačno završena obrada

U našem primeru od fotografije jagnjeta dimenzija 1280x920 piksela (snimljeno digitalnim fotoaparatom od 1.3 megapiksela), dužine 277 kilobajta (pogledajte original), primenom svih ovih postupaka dobili smo fotografiju 550x550 piksela dužine 36 kilobajta. Na fotografiji nije rađena veliko smanjenje dimenzija, jedva za nekih 10%, jer je u stvari deo slike opsečen. Evo rezultujuće fotografije:

Jagnje, optimizovana fotografija, 550x550 piksela, 35 kilobajta


Trikovi

- kada skenirate štampani materijal, vrlo često se javlja problem "Moire" efekta, a to je pojava da se preko skenirane slike vidi kao neka mrežica. Razlog je što se nezgodno pogode rezolucija skeniranja i rezolucija štampe. Rešava se tako što promenite rezoluciju skeniranja i to bolje je da je povećate. Takođe, kada je fotografija već skenirana u postupku doterivanja primenite blagi Gaussian blur efekat, samo toliki da se slika blago zamuti i "Moire" mrežica postane neprimetnija. Kada konačno sliku smanjite na potrebnu veličinu, izoštrite je efektom Sharpen/Unsharp Maskli vrlo verovatno se neće ni primetiti da ste imali problem.

- JPEG kompresija najlakše upropasti delove fotografije na kojima su vrlo blagi prelivi. Obično je to nebo ili vodena površina pa čak i čelo ili obrazi na licu. Već mala JPEG kompresija na ovakvim delovima slike može da napravi primetna izobličenja. U nekoj meri se ovo može preduprediti. U glavnom meniju pod opcijom Filter imate grupu filtera Noise. Probajte add Filter. Takođe u grupi filtera Texture probajte filter Grain. Ova ova filtera u sliku unose određeni šum u obliku sitnih tačkica. Ako filter primenite u malom obimu on neće smetati prilikom posmatranja fotografije ali će zato uticati na smanjenje izoličenja JPEG kompresije.

©2002 Copyright by Predrag Supurović, All rights reserved
DataVoyage