Primer 1a: Ovaj Pikasov „Don Kihot” snimljen kao JPEG zauzima 30 KB

Staro novinarsko pravilo glasi da tekst mora da bude dovoljno razumljiv tako da ne iziskuje nikakvu dodatnu ilustraciju. Međutim, razvojem modernih tehnologija, multimedije i Interneta, to pravilo polako kopni - impregniranje svih mogućih ilustracija i animacija osnova je modernog dizajna Web dokumenata.

Pre nego što neku sliku postavite na svoju Web prezentaciju, uglavnom je treba prethodno malo „doterati”. Tu dolazimo do stvari koje većina običnih, „neverziranih” korisnika ne zna. Na primer, veličina slike - termin koji se često dvojako tumači. Dimenzije slike određuju njenu veličinu na ekranu, ali količina kilobajta određuje veličinu fajla slike. Ovde bi možda bolje legao termin „kapacitet”, ali kako je muškarcima veličina oduvek bila najvažnija, taj termin se odomaćio i kada su u pitanju kompjuterski fajlovi...

Primer1b: Ista slika snimljena kao GIF „teška” je svega 9 KB.

Bilo kako bilo, dimenzije slike imaju značajnog, ali ne i presudnog uticaja na veličinu fajla. A kada je u pitanju njihovo smeštanje na Web prezentaciju, od značaja je i jedno i drugo.

Veličina fajla

Prvo da razjasnimo ovo oko veličine fajla. Kladim se da među svojim e-korespondentima imate barem jednog koji vas zasipa raznim smešnim foto-montažama, karikaturama i slično (u redakciji SK ta čast pripala je mojoj malenkosti, na radost kolegijuma...), i ponekad dugo čekate da skinete poštu, da bi se na kraju ispostavilo da je u pitanju samo jedna slika. Kod skidanja pošte nemate baš mnogo izbora, sem da sačekate da se proces završi (malo ljudi će pozvati svog provajdera i od ljudi iz tehničke podrške tražiti da obrišu problematično dugu poruku). Međutim, posetilac vašeg budućeg sajta ima daleko više mogućnosti. Ako se slike predugo učitavaju, verovatno će izabrati najnepovoljniju - napuštanje te adrese i potragu za nečim zanimljivijim diljem Weba...

Primer 2: Jača i slabija kompresija utiče na strukturu fotografije i njenu lepotu.

Da bi se to predupredilo, potrebno je da fajlovi slika budu što je moguće manji. Reper mogu biti reklamni baneri kakve viđamo na većim komercijalnim sajtovima: uglavnom ne prelaze 10 KB, premda u poslednje vreme sve češće dosežu i do 20 KB. Pošto je ljudima koji se reklamiraju, naravno, važno da njihove reklame dopru do što više konzumenata, znači da ove brojke treba imati na umu i kada želimo da ilustracije našeg sajta budu viđene onako kako smo zamislili. Ne može se baš uvek dobiti tako mali fajl, ali tome treba težiti. Izuzetak su foto-galerije; čovek koji izabere da gleda galeriju slika, bilo kakve sadržine, mora se pomiriti s tim da će na njihovo učitavanje čekati duže nego što je uobičajeno.

Kompresija

U Web browserima kao što su Internet Explorer i Netscape Navigator mogu da biti prikazani fajlovi slika tipa JPEG i GIF. Prva uočljiva razlika između ova dva formata jeste da GIF može da bude animiran, a JPG (bar za sada) ne. Druga razlika tiče se broja boja koji kod GIF-a može da se podešava određivanjem tzv. palete koje će sadržati samo zaista upotrebljene boje, što rezultuje srazmerno manjim fajlom. Tako je teorijski moguće da crno-beli crtež (ne fotografija) bude neuporedivo manji kao fajl u GIF formatu od fajla u JPG formatu (Primer 1). Kažemo „teorijski”, jer u praksi to zaista zavisi od slučaja do slučaja.

Primer 3a: Slika dimenzija 485 x 555 piksela sa najjačom kompresijom zauzima svega 21 KB

S druge strane, kod JPG fajla je moguće podešavati jačinu kompresije slike i shodno tome veličinu fajla. Da malo pojasnimo šta bi bila kompresija - recimo, ljudi često u pismima umesto Beograda napišu samo „Bgd”, i to je vid kompresije - izostavljanje slova, ali tako da primalac zna o čemu se radi. Ako je kompresija veća (na primer, samo „B”), potrebno je manje slova i prostora, ali je tu onda pitanje kvaliteta, u slučaju reči Beograd - razumljivosti, a u slučaju slike - lepote prizora (Primer 2).

Uz sve to, važan je i sadržaj slike - fotografiju neba biće lakše kompresovati (program će „pametno” šifrovati nebeske površine kratkom informacijom tipa „ovde se ponavlja plava boja”), a teže fotografiju istih dimenzija na kojoj je, recimo, publika na tribinama tokom fudbalske utakmice, jer ima previše raznobojnih i gusto poređanih površina koje, svaka za sebe, zahtevaju delić informacije u JPG fajlu slike („ovde crveno-belo, tamo crno-belo, između vatrenonarandžasta, a dole zeleno” - već sam opis slike zahteva više reči).

Primer 3b: Umanjena varijanta od 300 x 340 piksela sa najslabijom kompresijom izgleda bolje, ali je čak 75 KB.

Da skratimo priču. Pretpostavka je da ste na našim prostorima nenadano lako postali ponosni vlasnik neke verzije programa Adobe Photoshop za obradu slika. Verzija 5,5 je vrlo pogodna i preporučljiva za rad sa slikama koje treba smestiti na Web. Kada želite da sliku snimite kao .jpg pojaviće se dijaloški prozor u kojem će program izračunavati približnu veličinu fajla slike u zavisnosti od vrste i jačine kompresije. Uključena opcija Preview omogućiće vam da trenutno vidite razlike u kvalitetu slike u odnosu na parametre koje menjate. Opcija Save for Web iz File menija još je korisnija za ovu priču (što joj i ime govori), jer omogućava da se unutar nje biraju i formati GIF i JPEG sa svojim zasebnim parametrima, te da se odmah vide razlike i u kvalitetu slike i u veličini fajla. Kod GIF-a je preporučljivo smanjivati broj boja uz korišćenje opcije Diffusion - Dither i promenu njenih procenata. Nekada pomaže, nekada ne, u najvećem broju slučajeva neophodno je eksperimentisati.

Isto važi i za JPG, pri čemu je izvesno samo to da Progressive format kompresije u odnosu na druga dva pravi najmanje fajlove. Zgodno kod ovog metoda je i to što će se slika na posetiočevom računaru progresivno pojavljivati i postepeno izoštravati, što je mali psihološki trik, i stvoriće utisak da se kraće čeka na njeno učitavanje (kod GIF-a se to postiže opcijom Interlaced).

Dimenzije slike

Vratimo se na veličinu slike, u smislu njenih dimenzija i prikaza na ekranu. Premda na prvi pogled deluje logično da će slika manjih dimenzija zauzimati i manje kilobajta, to uopšte ne mora biti slučaj kod JPEG-a. Ako primenimo jaku kompresiju na sliku većih dimenzija, taj fajl će biti značajno manji od fajla iste slike manjih dimenzija, ali sa slabijom kompresijom. Naravno, uvek gledamo da kvalitet slike istovremeno bude što bolji (Primer 3).

Kod određivanja dimenzija slike koju ćemo postaviti na svoj home page postoje još neke bitne okolnosti, a to je rezolucija - ne ona zloglasna pod brojem 757 Saveta bezbednosti, već ekranska. Ako, na primer, postavite ilustraciju širine 1000 piksela, a posetilac sajta ima podešenu rezoluciju 800 x 600, znači da neće moći da vidi celu sliku odjednom, već će morati da skroluje ekran da bi je sagledao, što pomalo srozava utisak i o slici i o dizajnu sajta. S druge strane, ako je slika malecka, posetioci koji imaju podešene rezolucije 1024 x 768 i naviše moraće da se unesu u monitor da bi videli šta se na njoj nalazi. Svetu se, naravno, ne može ugoditi, pa treba pribeći statistici - prema nekim podacima 50% surfera ima rezolucije 800 x 600, 40 odsto ih ima 1024 x 768, a u preostalih 10 odsto spadaju siromasi sa prevaziđenim 640 x 480 piksela, ali i bogatuni sa rezolucijama 1280 x 1024 i više od toga. Zaključak se, verujem, sam nameće...

U Photoshopu se dimenzije slike menjaju opcijom Image Size iz menija Image. Moguće je upisati nove dimenzije u pikselima ili procentima (okvir Pixel Dimensions; za Web prezentaciju nas ne interesuje okvir Print Size). Kao metod semplovanja (Resample Image) preporučljivo bi bilo izabrati Bilinear. Metod Bicubic će sliku odviše zamutiti, a Nearest Neighborhood izoštriti do neprijatne krzavosti ivica. Nakon promene dimenzija slike nije loše upotrebiti filter Sharpen i proveriti izgleda li slika bolje ili lošije kada se propusti kroz njega.

Ako za snimanje slike iz nekog razloga ne upotrebljavate opciju Save for Web, već obično Save, preporučujemo da pod Preferences iz menija File (u Photoshopu 6 iz menija Edit) u sekciji Saving Files isključite Image Previews - uštedećete 5 KB po slici, što znatno skraćuje vreme njihovog downloadovanja, posebno na thumbnails stranici online galerije (ako baš volite da imate preview slika koje radite, onda ih ostavite uključene u Preferencama i koristite opciju Save a Copy).

Kada sliku postavite na stranu u FrontPageu ili Dreamweaveru, može se ispostaviti da je ipak veća nego što ste prvobitno želeli. Iako u svakom od ovih programa možete da joj preko dijaloga Picture Properties promenite dimenzije, preporučljivije je da se to uradi u Photoshopu i tada postavi na stranu. Pre svega, Photoshop će tu promenu dimenzija uraditi vizuelno finije od programa za Web dizajn, a kao drugo, slika umanjenih dimenzija izvesno će imati i manje KB od prethodne verzije.

Pozadinske ilustracije

Sem slika koje ćete umetnuti u tekst ili na neki drugi način ukomponovati u stranu, možete neku zanimljivu ilustraciju postaviti kao podlogu. Tu takođe treba voditi računa da fajl background slike ne bude prevelik, ni po pitanju dimenzija ni kapaciteta. Sećam se da su na jednoj od prvih verzija sajta www.starwars.com postavili za podlogu jednu ogromnu fotografiju iz filma koja se užasno dugo učitavala, a tekst se utapao u boju pozadine i bio sasvim nečitak bez pozadinske slike - prosto je neverovatno da se Lukasovim ljudima potkrala takva brljotina (mislio sam da je to bio slučaj samo sa dugouhim patkastim Jamajčaninom...). Verovatno su bili previše samouvereni u sadržaj sajta pa su sebi to dozvolili. Autor prezentacije o puževima-golaćima i zbirke kutija od šibica ne može baš rezonovati na sličan način...

Pri pravljenju i izboru pozadinske slike treba izbegavati jarko obojene površine i teksture, jer će tekst koji ide preko njih biti nečitak. Poželjno je izabrati za tekst komplementarnu boju u odnosu na boju koja dominira na pozadini, u suprotnom će posetioci sajta teško pročitati šta, u stvari, piše narandžastim slovima preko te fantastične fotografije zalaska sunca...

Ako vam više odgovara da uzmete gotove pozadinske slike umesto da pravite sopstvene, najbolje je na nekom od search engina zadati „background tiles” kao pojam za pretragu i na nekom od ponuđenih sajtova naći odgovarajuću ilustraciju.

Pozadinska slika bira se u okviru opcije Page Properties (koju smo u prošlom broju pominjali za određivanje natpisa, Title, u vrhu strane), u polju Background Image/Picture. U istom dijaloškom prozoru može se o istom trošku odrediti i boja osnovnog teksta (Text Color), kao i Background Color. Ako je određena pozadinska slika, background color neće mnogo dolaziti do izražaja. Međutim, ta boja biće vidljiva za vreme učitavanja stranice, dok se pozadinska slika kompletno ne pojavi. Nije loše odrediti najdominantniju boju i nijansu sa pozadinske slike kao background color, naročito ako se izabrana boja teksta utapa u default podlogu Web browsera. Na taj način će tekst biti čitak i dok se slika podloge ne učita kompletno, a ako je neki posetilac izabrao u svom browseru da se slike uopšte ne prikazuju (pomaže kod loših telefonskih linija i sporog transfera), to će se odnositi i na pozadinsku, te će mu jedini pokazatelj da na ekranu ima ikakvog teksta biti upravo kontrast sa izabranom bojom pozadine.