Korišćenje grafike

Slike su zasebni fajlovi - znači nisu deo HTML dokumenta (okej, ima izuzetaka, ali o njima drugi put). Uvek je bitno da vodimo računa o veličini fajla - veći fajlovi uvek zahtevaju više vremena da se učitaju sa Interneta.

Veličinu fajla kontrolišemo na dva načina - dimenzijama same slike i kompresijom.

Kao što znamo, slika mora biti unapred pripremljena i to u nekom od formata koji se mogu prikazati unutar svakog web čitača. Ti formati su sledeći:

• JPG - verovatno najkorišćeniji format za grafiku na web-u. Odličan za predstavljanje fotografija, pošto ima mogućnost prikaza svih boja. Moguće je izabrati stepen kompresije, tako da fajl može imati jako malu veličinu, ali na uštrb kvaliteta! Nedostatak je što nema mogućnost providne pozadine.
• GIF - ovo je drugi najduže korišćeni format grafike. GIF format ima slabiju kompresiju od JPG-a, ali je slika uvek ista - ne menja joj se kvalitet. Veliki nedostatak GIF-a je što može prikazati samo 256 različitih boja, koje su definisane u paleti za tu sliku. U nekim slučajevima nam to ne smeta (crno-bele slike, dijagrami i grafikoni, slike sa velikim jednobojnim površinama, strip ilustracije i sl.), ali fotografije neće izgledati dobro. Sa druge strane, jedna od boja iz palete može biti providna, tako da se GIF slike mogu mnogo bolje uklopiti na pozadinu stranice. Druga velika prednost GIF-a je što može uskladištiti više slika koje se onda prikazuju kao animacija ili slajd šou.
• PNG - ovo je noviji format za slike. Može prikazati sve boje kao JPG, ali može imati i providnu pozadinu kao GIF. Štaviše, mnogo je napredniji od GIF-a, pošto može imati i poluprovidne nijanse, tako da slika neće izgledati "krzavo" kada se uklopi na stranici. Sa druge strane, kompresija mu je kao kod GIF-a, pa fajlovi mogu biti prilično veliki.
• SVG - najnoviji format slika. Razlikuje se od prethodna tri po tome što je u pitanju vektorska grafika. To znači da čak i veoma velike slike mogu imati vrlo malu veličinu fajla (koja u stvari zavisi od kompleksnosti a ne dimenzija). Ova grafika je dobra za prikaz crteža i dijagrama, ali njom se nikako ne mogu predstavljati fotografije.

Korišćenje grafike

Najpre pogledajmo primer iste slike koja je snimljena u različitim formatima i kompresovana različitim tehnikama. Originalna slika je data u celini (dimenzije su joj 400x400). Tu sliku smo snimili 4 puta u različitim formatima i sa različitim podešavanjima.

Onda smo sa te četiri slike izdvojili jedan isti detalj, i uvećali ga 5 puta, kako bismo bolje videli šta se dogodilo sa slikom. Pored svakog detalja smo napisali koju veličinu ima cela slika kada je tako snimljena.

	PNG verzija (218KB) PNG format nema lossy kompresiju, a može prikazati 32-bitnu paletu, što znači da je ova slika jednaka originalu. To ima i svoju cenu - najveći fajl.
	JPG verzija, najveći kvalitet (119KB) Najveći kvalitet će proizvesti i relativno veliki fajl, ali kod takve slike je praktično nemoguće videti razliku u odnosu na original.
	JPG verzija, najmanji kvalitet (5KB) Najmanji kvalitet ima najjaču kompresiju (i samim tim najmanju veličinu fajla), ali izgled slike je veoma loš.
	GIF verzija (75KB) Sa samo 256 boja, lako je uočiti da grafika izgleda grubo. Što slika originalno ima više boja, izgled GIF verzije će biti gori.