You are on page 1of 12

 

 

 

 

 

Možda deluje iznenađujuće, ali rezolucija nije 
najznačajniji faktor za određivanje veličine datoteke slike 
(kao i brzine transfera). Ovo je iz razloga što se slike na 
web stranicama skladište i prenose u komprimovanom 
stanju. Kompresija slike je matematička manipulacija 
kojom se iz slike “istisnu” ponavljajući paterni. 
Matematika komprimovanja slika je složena, ali osnovna 
ideja leži u tome da ponavljajuće oblasti istih boja mogu 
da se istisnu kada se slika smešta na disk. Ovo omogućava 
da datoteka slike bude mnogo manja i da se slika znatno 
brže prenese preko Interneta. Browser obnavlja sliku i 
vraća originalni prikaz kada se ona prikazuje u njemu. 
Koliko ima web stranica toliko mnogo ima i načina da se 
koristi grafika na web stranicama. Međutim, mogu se 
izdvojiti četiri tipa grafike koje dominiraju na web 
stranicama: 
‐ Fotografije ljudi, proizvoda ili mesta 
‐ Grafički baneri i logotipi 
‐ Grafički dugmići ili ikone kao linkovi između stranica 
‐ Teksture i tapete postavljene u pozadini stranica 
Kada su u pitanju digitalne slike, onda se priprema svodi 
na njihovu obradu u nekom od programa za obradu slika 
(Photoshop, Corel PhotoPaint, Paint Shop Pro, i td.). 
Najčešće obrade su u domenu tonalnog opsega, kontrasta 
i osvetljenosti fotografija. 
Kod slika koje su štampane ili razvijene fotografije na 
fotopapiru, priprema počinje skeniranjem. Prilikom 
skeniranja treba voditi računa jer se vrlo lako može desiti 
da se u skeniranoj slici primeti raster sa otiska. Skenirana 
rezolucija bi trebalo da bude u visokoj rezoluciji slike koja 
bi se potom obradila dodatnim zamućivanjem pojedinih 
oblasti (prevođenje polutona u puni ton), a zatim 
smanjenjem slike do željene veličine i rezolucije.  
U zavisnosti od specifičnosti web stranice može da se desi 
da sliku treba dodatno smanjiti, a ponekad je potrebno 
imati i malu verziju (thumbnail) koja bi predstavljala 
grafički link ka slici u punoj rezoluciji. 

 

 
 

Prilikom optimizacije slika za web, formati slika koji su 
rezultat optimizacije su GIF, JPG ili PNG. Prilikom 
optimizacije u GIF ili PNG, korisnik je u mogućnosti da 
redukuje paletu boja, da se opredeli samo za „web‐safe“ 
boje, da uključi diterovanje i transparenciju i slično.  

Takođe, jedan od bitnih parametara jeste brzina kojom će 
se optimizovana slika učitati u browseru pri nekoj brzini 
download‐a. Korisnik može da proveri ovu brzinu za 
modeme od 9600 kbps do 2 Mbps. 

Generalno, ako slika izgleda jednako dobro u svim 
optimizacijama, onda je presudno izabrati onu 
optimizaciju koja daje najmanju veličinu datoteke. 

Fotografije najbolje izgledaju kada se čuvaju u JPEG 
formatu. Premda slike izvorno mogu biti u JPG formatu, 
ali optimizacijom u JPG one se dodatno komprimuju, tako 
da rezultujuća JPG može da bude i do dva puta manje 
veličine datoteke neko izvorna JPG fotografija. 

Pored video klipova i flash animacija, moguće je napraviti 
jednostavne animirane efekte unutar GIF sličica. U 
verzijama Adobe između CS4 i CS5.5, potrebno je otvoriti 
radni prostor (workspace) pod nazivom Video & Film. 
Zatim odatle otvoriti paletu Animation, koja je mogla da 
se prikaže u režimu Timeline ili Frames. 

U Adobe CS6, ova paleta se nalazi u meniju Window, pod 
nazivom Timeline. 

Animacija se kreira tako što se prvo prave ključni kadrovi 
(njih sam korisnik odredi na osnovu promena u poziciji, 
transparentnosti ili efektu sloja). Međukadrove korisnik 
definiše pritiskom na dugme Tween i tada može da bira 
koliko želi međukadrova, kao i da odredi koji parametri će 
se animirati (pozicija, transparentnost ili efekti sloja). 

Ovakve animacije se obavezno čuvaju u GIF formatu. 
 

Bilo koja slika može da se pretvori u link tagom <a href> 
U primeru je prikazan link u formi male sličice koji otvara 
istu sliku u punoj rezoluciji. 
Atributi alt i title koriste se unutar taga <img />. 
alt – alternativni tekst (opis slike) 
title – opisni tekst (klikni za veću sliku) 
Upotreba title atributa odnosi se na problem neki web 
developera koji atribut alt koriste koliko da smeste tkzv 
Tool‐Tip. Problem proističe iz činjenice da neki browseri 
prikazuju pop‐up (tool‐tip) koji sadrži alt tekst. Međutim, 
u istu svrhu možete jednako koristiti i atribut title, što je 
prikazano u narednim primerima, a potom da korsitite 
atribut alt u osnovnoj svrsi da obezbedite alternativni 
tekst za sliku. Dobra je praksa da koristite oba atributa 
kod svake slike.  
Slično tekstu, i slike mogu da se poravnavaju specijalnim 
atributima. Mogu da se poravnavaju i horizontalno i 
vertikalno. 
Horizontalno poravnavanje postiže se umetanjem slike u 
tag <div> ili <p>, sa zadatim stilom za poravnavanje 
style="text‐align:ravnanje", gde ravnanje može biti left, 
center, right 
Stil vertical‐align takođe podržava vrednosti top i bottom, 
koje omogućavaju ravnanje slika prema najvišem ili 
najnižem elementu u nizu bez obziran na liniju teksta. 

Stil float omogućava da se slika unutar paragrafa postavi 
poravnata po levoj ili desnoj margini, a da pri tom ceo 
pasus kruži po slobodnoj ivici slike. 

Stil se upisuje unutar taga <img /> 

Na primer,  

<img src=“pict.jpg“ style=“float:left“ /> 

Znači da će slika pod nazivom pict.jpg biti poravnata po 
levoj margini, a tekst pasusa u kojem se ova slika nalazi 
prelamaće se po desnoj ivici slike. 

Vrednost za atribut float mogu bili left ili right. 
 

Zadavanje atributa width i height za sliku nemaju 
nikakave veze sa stvarnom širinom i visinom slike. Sam 
browser će pokušati da stisne ili rastegne sliku na bilo 
koju zadatu veličinu. Međutim, generalno ovo je loša 
ideja jer browseri i nisu baš dobri kod promene veličine 
slike. Ako je potrebno da slika bude prikazana umanjena, 
onda je definitivno bolje da sliku umanjite u nekom 
editoru slika.  
Sa druge strane, postoji jedan dobar trik kod upotrebe 
slike sa atributima width i height. Naime, možete koristiti 
tag <img /> kao pozicioner sa vrlo malom, potpuno 
transparentnom slikom na bilo kojoj veličini kao spacer 
(praznina) na vašim web stanicama. Ovo je trik kojim se 
neki web dizajneri služe kada su u stisci sa vremenom a 
treba da ponude „layout“ svom klijentu. 

 
 

 

Boja pozadine cele stranice kao i boja teksta na celoj 
stranici postavljaju se stilom i odgovarajućim pravilom 
unutar taga <body> 

background‐color:boja 

color:bojateksta 

<body style="background‐color:boja; color:bojateksta"> 

„Boja“ i „bojateksta“ mogu se kodirati nazivom boje 
(samo ako je web safe boja) ili heksadecimalnim kodom 
boje. 
 

 

Nazivi web safe boja i njihovi heksadecimalni kodovi 
 

 

Osnovno tumačenje heksadecimalnog formata za 
kodiranje boja. 

 
Takođe, boja može da se zada u rgb ili rgba formatu. 

Na ekranu je prikazan <div> element čija je bordura 
crvene boje, a unutrašnjost obojena crvenom 
bojom sa 50% transparencijom, tj 

<div style="border: 5px solid red;  
background‐color:rgb(255,0,0,0.5);"> </div> 

 
Kada se boja pozadine menja, potrebno je doraditi 
sve slike sa delimičnom transparencijom tako da se 
uklope sa novom pozadinom.  

U Photoshopu je potrebno optimizovati te slike sa 
parametrom Matte čiju vrednost treba postaviti na 
tačan heksadecimalni kôd one boje koja se koristi u 
pozadini stranice. 

Na taj način, slike sa delimičnom transparencijom, 
bilo da su statične ili animirane, savršeno će se 
uklapati sa pozadinom. 

Rezultat je savršeno uklapanje. 
Pored boje u pozadinu može da se postavi slika. To se radi 
pomoću stila postavljenog unutar taga <body> 

<body style=“background‐image:url(slika.gif)“> 

Kod postavljanja slika u pozadini, postoji mogućnost 
kontrolisanja načina na koji će se ona prikazati 
uvođenjem dodatnih pravila unutar istog ovog stila: 

background‐repeat:ponavljanje 

pri čemu ponavljanje može uzeti vrednosti: 

no‐repeat    (slika se samo jednom prikazuje) 
repeat‐x      (slika se ponavlja po horizontali) 
repeat‐y      (slika se ponavlja po vertikali) 
repeat           (slika se ponavlja u oba pravca ‐ default) 

Pored eksplicitnog podešavanja ponavljanja slike u 
pozadini, istu je moguće fiksirati u pozadini tako da 
prilikom skrolovanja stranice slika u pozadini ostaje 
nepokretna. Sledeće pravilo to omogućava: 

background‐attachment:fixed 

Pravilo background‐attachment može imati 
vrednost fixed ili scroll. 

 

Pored toga, slika u pozadini može da se pozicionira 
na tačnu lokaciju: 

background‐position: pozicija 

gde pozicija može imati vrednost izraženu opisnim 
rečima top, bottom, left, right ili center, čak mogu 
da se kombinuju pod uslovom da pozicije nisu u 
suprotnosti. Takođe, može da se izrazi egzaktnom 
vrednošću u raznim jedinicama: cm, mm, in, pt, pc, 
px ili %.