Sadržaj

• Slike za Web
• GIF
• JPEG
• PNG
• Za kraj

Upotreba slika na Web-u omogućila je ovom mediju da zaživi i bude opšte prihvaćen. Slike moraju da prate tekst, bez njih sajt bi bio mnogo suvoparan. One su neophodne radi vizuelnog izgleda sajta ali i konteksta (jedna slika govori više od 1000 reči). Potrudite se da ne nabacate previše slika jer će se stranica učitavati previše sporo.

Slike za Web

Najkvalitetnije slike se dobijaju skeniranje i doradom u nekom od grafičkih programa. Sa skenirane slike treba izbaciti sve suvišne elemente, radi smanjenja datoteke i bržeg preuzimanja sa Web-a. Slike se učitavaju jedna po jedna, naizmenično, dok se sve ne učitaju. Kada god je to moguće kompresujte sliku ili redukujte broj boja. 

Poželjno je da veličina slike na ekranu bude prilagođena minimalnoj velični ekrana korisnika Web-a a to je rezolucija od 640*480 piskela. Kad se na to odbije okvir koji pravi sam browser, za prikaz ostaje 600*350 piksela, pa je prepuruka da slike ne budu veće od ove rezolucije. Uvek možete staviti i sliku veće rezolucije, ali je lepo da pored linka ka njoj stoji i veličina njena u kilobajtima ovo je poželjno i za druge zahtevnije multimedijalne sadržaje kao što su animacije, video snimci i dr. 

Slike ne bi trebalo da pređu veličinu od 50KB. Boju pozadine, slike i tekst treba usaglasiti tako da sve deluje skladno i da tekst bude čitljiv. Slike koje koristite za pozadinu ne trebaju da budu ni suviše velike (1-3 kb) niti suviše male ( zbog procesa popunjavanja pozadine sajta - najbolja veličina za pozadinu je 256 bajta ). 

Slike treba da upotpune sadržaj, pružajući vizuelni identitet samom kontekstu. Ne trebe postavljati suviše mnogo a ni suviše malo slika. Sledeća lista je prikaz tipova grafika koje su prihvatljive pri dizajnu web strana (redosled je po važnosti):

• Navigacija - Potrebno je uvek istaći sistem za navigaciju u okviru strana, to se postiže na mnoge načine, najjednostavniji i najbrži odnosi se na korišćenje slika oko samih linkova, boja i HTML tabela. Ovakav sistem je mnogo više upotrebljiviji od običnog nabrajanja linkova, mada uvek koristite tekstulne linkove.
   

• Logo - Koristi se da bi identifikovao samu Web prezentaciju, Vas i Vašu ponudu. On treba da se provlači kroz sve strane kako bi se lakše zampamtili, a toko se održava celovitost dokumenata na Web stranama.
   

• Tačke ispred stavki - Koriste se da bi privukle paćnju na bitnije delove, posebno kod nabrajanja, npr. linkova a omogućuju osvežavanje izgleda na stranama sa puno paragrafa.  
   

• Zaglavlja - Poznata i kao naslovna slika, tj. slika u kontekstu. Ovakva slika određuje raspoloženje i tematiku kategorije u kojoj se prikazuje. Korisnik po ovim slikama može da zaključi gde se trenutno nalazi.
   

• Horizontalne linije - Koriste se za isticanje i prekida same forme teksta. Zbog različitog prikaza u raznim browser-ima, obično se umesto hr elementa koriste slike.
   

• Pozadinska slika - Korišćenje pozadinskih slika omogućava kreiranje vizuelnog identiteta same Web prezentacije, potrebno je da se usaglase sa strukturom same strane i da ističu sadržaj koji poseduju.
   

• Naslovi (tekstualna grafika) - Često se umesto samih naslova koriste tekstualne slike jer su naslvi najčitaniji pa je potrebno privući posetioce. Ovakve slike su čitljivije i omogućavaju nezavisnost fontova, tj. željeni nestandardni font vide se na svakom računaru.
   

• Fotografije - Najčešće se koriste da bi se propratio tekst, privukla pažnj i izgradio kredibilitet. Posetioci najviše obraćaju pažnju na slike ljudi na fotografijama, pa možete kreirati razna osećanja u zavisnosti od ciljne grupe kojoj se sajt obraća.

Sve slike na vašem sajtu moraju se slagati po bojama, obliku slova i specijalnim efektima. Celovitost prezentacije ne sme se prekinuti upotrebom različitih veličina, boja itd.

GIF

Za male slike se pretežno koristi GIF (Graphic Interchange Format), jer se sa njim ne gube detalji ali je nažalost ograničen na 256 boja. GIF-ovi su odlični za tehnički crtež i za slike na kojima se pojavljuje tekst. GIF-ovi mogu da pamte 2,4,16... boja, pa se može dosta uštedeti na veličini prilikom kreiranja slika. Lica se najbolje prikazuju u ovom formatu.  

GIF fajlovi se kopresuju horizotalno, tj. ukoliko na GIF slici pixel ima malu varijaciju boja u horizontalnom pravcu mnogo lakše se transformiše u manju veličinu. Pogledajte primer :

1.3K	2.1K

Leva i desna slika su slične po pitanju boja ali se razlikuju u orjentaciji linija. Slika sa horizontalnim linijama je skoro 50% manja nego slika sa vertikalnim linijama. Postoje i providni GIF-ovi, slike na kojima se jedna boja proglašava za transparetnom, pa se na tim mestima na slici "providi" pozadina dokumenta. Pogledajte primer :   

Na prethodnoj slici, prvo slova A je slika sa belom pozadinom koja je u kontrastu sa pozadinom strane. Slika u sredini ukazuje da prilikom proglašavanja bele boja za transparetnu dužina i širina slike ostaje ista, a pozadina providna. Dok krajnja slika ukazuje rezultat preklapanja. Takođe slike možete snimiti u interlaced formatu, koja proizvodi iluziju bržeg učitavanja tako što se prvo prikazuje slika manjeg kvaliteta a potom se postepeno unapređuje dok se ne konačno ne učita kompletna slika u punoj rezoluciji. 

Animirani GIF-ovi u sebi sadrže više slika pa se naizmeničnim ponavljanjem tih slika dobija mala animacija. Jedna dobra animacija je efikasnija od deset prilično dobrih slika.   

JPEG

JPEG (Joint Photographic Experts Group - ekstenzija .JPG) slike pamte 16 miliona boja, ali uz delimičan gubitak informacija. Kod JPEG-a pamte se samo čvorne tačke, ostale se dobijaju na osnovu susednih. JPEG dobro pakuje skenirane slike uz minimalni gubitak kvaliteta. Za veće slike sa puno boja to je pravi izbor. Kopresija .JPG slika je tzv. "gubeća" tj. koliku kompresiju primenite na slici toliko izgubite na kvalitetu slike.  Postoji više opcija kompresije u zavisnosti od stepena gubitka detalja tj. (Low, Medium, High, i Maximum). Na ovaj način bira se najbolji odnos kvaliteta i veličine slike. Mana JPEG fajlova je da ne mogu biti snimljeni u index-kolor modu, što znači da veliki broj ljudi koji posmatra slike na monitorima u modu sa 8 boja mogu dobiti vrlo loš izgled slike. JPEG fajlovi ne podržavaju  transparentnu pozadinu. Kod JPEG slika ponovna obrada slika povećavaće gubitke zbog kompresije/dekompresije pa vam konačna slika može biti izuzetno lošeg nivoa kvaliteta, zato uvek radite na orginalu.

GIF i JPEG

Šta god kasnije želeli da uradite sa slikama, trudite se da ne vršite obradu već gotovih JPEG i GIF fajlova, već obrađujte uvek originalne slike. Da bi postigli kvalitetne slike koje u sebi sadrže i tekst i slike i animacije, najbolje rešenje se nalazi u okviru podele slike na dva ili više delova, delovi sa fotografijama su u JPEG formatu a sa tekstom ili animacijom u GIF formatu i njihovim kasnije slaganjem pomoću HTML tabela. Na ovaj način dobićete maksimalno dobar kvalitet slika minimalne veličine.

PNG

PNG (Portable Network Format Graphic), još jedan format podržan od strane novijih Web čitača a kombinuje funkcionalnosti gif-a i jpeg-a. Postoje dva tipa formata:

• PNG-8, sadrži 8 bitnu informaciju o bojama(slično GIF-u), 

• PNG-24, sadrži 24 bitnu informaciju o bojama(slično JPEG-u).

PNG-8 ne podržava animaciju ali podržava transparetnost i to mnogo bolje nego GIF, dok PNG-24 je ekvivalentan JPEG-u i poseduje sličnu kompresiju.

Sumarni pregled

Za kraj

Ukoliko koristite iste slike na Web prezentaciji postavite ih u jedan direktorijum (katalog) kao bi se keširale (snimili kod korisnika), čime se ubrzava vreme učitavanja strane. Budite pažljivi kod referenciranja ovakvih slika, pošto moraju da ukazuju na isti dirktorijum i isti fajl pa je potrebno dobro organizovati Web prezentaciju. 

[  Osnove Dizajna | Projektovanje | Sadržaj | Upotreba slika | Boje | Redizajn ]

Slične teme

• Boje

• HTML uputstvo

Slične teme

• Boje

• HTML uputstvo

Nešto o ...

Milan Skorić, radi na razvoju i dizajnu web aplikacija i servisa u Pexim Computers. Realizovao sam niz projekata za elektronsko bankarstvo i Intranet u Microsoft .Net tehnologiji.

»» Opširnije 

Ako želite da se prijavite na SveZaWeb informatora, pošaljite praznu poruku na svezaweb-subscribe@
yahoogroups.com 

Ako želite da se odjavite, pošaljite praznu poruku na adresu: svezaweb-unsubscribe@
yahoogroups.com 

[ Yahoo Group : Informator ]

»» Preporuči prijatelju

Pomoć!

Trudimo se da SveZaWeb bude koristan i ispravan, međutim uvek postoje greške, molimo Vas da nam pomognete kako bi ih ispravili.
 
Javite se : webmaster@
svezaweb.dzaba.com