Optimizacija slika za Internet u Adobe Photoshop CS5

Lekcija 16

Šta je optimizacija slike za Internet?

Optimizacija slika za Internet je proces biranja formata i kvaliteta slike da bi se slika dovela u stanje zadovoljavajućeg vizuelnog izgleda uz što manju veličinu datoteke za prikazivanje u Internet pregledaču (web browser). Kraće rečeno to je balansiranje između veličine datoteke nasuprot dobrom izgledu. Ne postoji nijedna dobra formula odnosno pre-definisane vrednosti po kojima treba sačuvati sliku za Internet, morate sami odlučiti koja podešavanja da primenite na sliku.

Formati slika za prikazivanje na ekranu i Internetu

Dva najpoznatija formata za prikazivanje slika na Internetu su JPEG i GIF. JPEG format je dizajniran tako da očuva širok spektar boja i suptilne varijacije osvetljenosti slika kontinuiranih tonova kao što su fotografije. Ovaj format može da prikaže milione boja na fotografiji, više nego što ljudsko oko može da registruje. Dobra strana ovog formata je da daje relativno dobar kvalitet uz minimalnu veličinu datoteke, loša strana je da uvek prilikom čuvanja slike u ovom formatu ona gubi nešto od svog kvaliteta jer ovaj format vrši kompresiju slike odbacivanjem piksela (podataka) sa slike, tako da se može desiti da ako više puta radite sa istom slikom i uvek je sačuvate u JPEG formatu, ona može izgubiti potreban kvalitet i postati neupotrebljiva. JPEG ne podržava transparentne (providne) delove. Tamo gde ih ima biće zamenjeni belom bojom.

GIF je format koji se uglavnom koristi za grafike i ilustracije koje u sebi sadrže do 256 boja. Ovaj format može da prikaže maksimalno 256 boja i podržava transparentnu (providnu) pozadinu.

Treći format za slike koje se prikazuju na Internetu je PNG. Ovaj format se pojavljuje u dve varijante: PNG 8 i PNG 24. PNG 8 je nešto slično GIF formatu dok je PNG 24 više sličan JPEG formatu. Dobra strana ovog formata je da ne odbacuje piksele prilikom kompresije i ona neće biti ruinirana ako više puta radite sa istom slikom i čuvate je u ovom formatu, loša strana je veća veličina datoteke tako da će se slike u ovom formatu sporije učitavati u Internet pregledaču. PNG podržava providne delove slike.

Kako sačuvati sliku za Internet iz Photoshopa?

Da sačuvate sliku za Internet trebate proći kroz Save for Web & Devices dijalog koji se otvara na istoimenu komandu iz File menija.

Kada se otvori dijalog Save for Web & Devices, prvo trebate izabrati koliko mogućih opcija će vam biti prikazano na ekranu. U vrhu dijaloga sa leve strane su izlistane 4 opcije: Original, što verovatno nećete izabrati jer on služi samo za upoređivanje. Optimised opcija vam daje prikaz samo optimizirane slike za Internet, 2Up prikazuje original i optimiziranu a 4Up će vam prikazati na ekranu originalnu verziju (onako kako ste je videli u Photoshopu pre nego što ste ušli u ovaj dijalog) i još tri moguće varijante. Minijaturni prikaz koji ima okvir je slika koju možete podešavati pomoću dostupnih opcija za podešavanje i slika koja će biti sačuvana ako kliknete na dugme Save. Ispod svake minijaturne sličice imate ispisan format i veličinu datoteke.

Format slike birate iz padajuće liste pri vrhu dijaloga, kliknite na trougao sa strane da vam lista bude prikazana a zatim kliknite na ime formata. Ovim ste izabrali format za moguću verziju slike koja je aktivna, odnosno ima okvir.

Ako ste izabrali JPEG format, sledeći korak je da odaberete kvalitet slike koji direktno utiče na vizuelni izgled i veličinu datoteke. Gledajte ispod minijaturnog prikaza gde vam je ispisana veličina datoteke i minijaturni prikaz da biste utvrdili koja vam varijanta najviše odgovara. Da promenite kvalitet slike možete preko pre-definisanih kvaliteta koji su izlistani u padajućoj listi ispod formata ili preko klizača Quality: čiju ćete skalu videti ako kliknete na trougao sa njegove desne strane. Kada ste odabrali kvalitet imate opciju Repopulate Views koja se nalazi u padajućoj listi kada kliknete na trougao u gornjem desnom uglu. Repopulate će vam prikazati sve 3 moguće varijante sa različitim kvalitetima i veličinama datoteka koji su unapred određeni i bazirani na kvalitetu koji ste vi sami prethodno odabrali.

U ovom dijalogu možete upoređivati kvalitet i veličinu različitih formata slika. Kliknite na neki od minijaturnih prikaza da se pojavi okvir okolo, zatim izaberite različit format iz liste u kojoj su oni izlistani. Biće generisan minijaturni prikaz za format koji ste izabrali i ispisana veličina datoteke ispod minijaturnog prikaza. U ovom slučaju je izabran PNG format koji nema opciju za regulisanje kvaliteta. Ostala dva generisana prikaza će ostati na istim podešavanjima, ništa se neće na njima promeniti. Obratite pažnju da je opcija Convert to sRGB uključena (ima zeleni znak za potvrdu u kvadratu ispred) jer je to model boja u kojem slika treba da bude sačuvana i koji podržavaju svi današnji pretraživači.

Kliknite na minijaturni prikaz da ga aktivirate a zatim na dugme Preview.. koje se nalazi u donjem levom uglu i ta varijanta slike će vam biti prikazana u punoj veličini u vašem podrazumevanom pregledaču onako kako će ona izgledati kada je postavite na Internet. Ispod ćete imati ispiasan format, dimenzije i veličinu datoteke.

Optimizacija GIF slika

Kada imate slike koje u sebi sadrže do 256 boja ne-kontinuiranih tonova, onda je najbolje da ih sačuvate u GIF formatu zbog veće kompatibilnosti sa čitačima Internet stranica odnosno bržeg učitavanja. Ovaj format kompresuje sliku bez gubitaka pomoću LZW kompresije, podržava providne delove i animacije. Novina u Adobe Photoshop CS5 je da možete sačuvati i animirane GIF slike.

Veličinu umanjenih prikaza u Save for Web & Devices dijalogu birate u donjem levom uglu iznad dugmeta Device Central. Format birate iz padajuće liste sa desne strane pri vrhu a broj prikazanih boja koje optimizirana GIF slika sadrži iz Colors: padajuće liste. Možete izabrati najmanje dve boje koje će biti korišćene za prikazivanje slike a najviše 256, broj boja utiče na veličinu datoteke. Tabela sa bojama po sredini sa desne strane vam prikazuje koje boje su prikazane na slici. Na ovoj tabeli možete zaključati boje tako da kada smanjite broj boja radi smanjivanja veličine datoteke, te boje neće biti odbačene već neke druge. Pri dnu ekrana sa desne strane imate opcije za animirane GIF slike.

Čuvanje slike na disku

Da sačuvate sliku, kliknite na dugme Save i otvoriće vam se Save dijalog u kome treba da navedete direktorijum u kome hoćete da sačuvate sliku, zatim ukucate ime u File Name: tekst polju (format će biti automatski dodat kada pritisnete Save dugme na osnovu vašeg izbora u Save for Web dijalogu –napomenuo sam na početku da će biti sačuvana varijanta slike koja ima okvir) i uverite se da nasuprot Format: stoji Images Only da biste sačuvali sliku. U Photoshopu možete sačuvati i HTML pozadinu zajedno sa slikom ili samo HTML ako ste kreirali pozadinu za Internet stranicu od grafike koju ste napravili u Photoshopu.

Vektorske figure (Vector shapes) i putanje (Paths) u Adobe Photoshop CS5
Lista sa svim lekcijama