Osnove računarske grafike i formati slika u web dizajnu

Uvod

Članak u kome smo detaljno diskutovali o fontovima, u idejnom smislu predstavlja dodatak mini-serijalu članaka o web dizajnu (ali isto tako i samostalan članak o zanimljivoj temi), a isto važi i za novi članak koji je pred nama, u kome ćemo diskutovati o računarskoj grafici i formatima slika.

Kada je u pitanju upotreba slika u web dizajnu, u današnje vreme postoji veći broj popularnih grafičkih formata ("i svi su dobri"), ali, u praktičnom smislu nije svejedno koji format se koristi za određeni zadatak, to jest (drugim rečima), iole pažljivijim sagledavanjem tehničkih specifikacija različitih formata, prilično je lako uvideti da određeni format - u određenim okolnostima - ipak predstavlja bolji izbor od nekog drugog formata.

Za početak (pre nego što se upoznamo sa različitim grafičkim formatima i sa razlozima za korišćenje određenog formata shodno situaciji), upoznaćemo se sa samim osnovama računarske grafike ....

Osnove računarske grafike

U opštem smislu, termin "rasterska grafika" odnosi se na princip kreiranja statičnih ili pokretnih slika u vidu matrice obojenih "piksela", i praktično je u pitanju model na kome se zasniva prikaz slike na računarskim monitorima.

Piksel se može shvatiti kao najmanji deo rasterske slike * kome se može pripisati boja, a sama skraćenica piksel, označava 'element slike' (eng. picture element).

Moglo bi se reći da je piksel u idejnom smislu 'tačka', ali, u praktičnom smislu (kao što možemo videti na slici ispod), ** piksel je zapravo kvadrat male površine, sa precizno definisanom pozicijom u pravougaonoj matrici, u kojoj su i ostali 'obojeni kvadrati' ravnomerno raspoređeni u redove i kolone.

Međutim, pre nego što bude prikazana na ekranu (ili odštampana), slika u računarskoj memoriji može biti definisana i u vidu kolekcije grafičkih objekata koji su (svaki za sebe) zapisani preko geometrijskih funkcija (odnosno, preko matematičkih jednačina).

U pitanju je tzv. vektorska grafika, o kojoj ćemo takođe napisati koju reč (nešto kasnije u članku), ali, slika koja se vidi na monitoru je (kao što smo već naveli) uvek rasterska.

Rezolucija slike

U osnovnom tehničkom smislu, ukupan broj piksela rasterske slike - koji se dobija množenjem broja piksela po širini sa brojem piksela po visini (ekrana ili rasterske slike u opštem smislu) - predstavlja rezoluciju slike.

U praktičnom smislu, u svemu se mora uzeti u obzir i veličina i gustina piksela (tema jednog od sledećih odeljaka), a u još praktičnijem smislu, može se reći da rezolucija predstavlja sposobnost prikazivanja ili očuvanja detalja (odnosno, vizuelnih informacija), što ćemo pojasniti preko primera.

Ako pogledamo sledeću sliku:

.... gotovo je sigurno da nećemo biti u stanju da prepoznamo šta je (zapravo) prikazano (iako se verovatno da naslutiti).

Ako kliknemo na sliku i otvorimo je u većoj rezoluciji (kliknite na sliku), može se jasno prepoznati koja tvrđava je u pitanju - iako rezolucija ni izdaleka nije velika shodno modernim standardima.

Što je rezolucija veća - moguće je prepoznati sve više i više detalja:

• rezolucija 96x48 piksela jedva da omogućava prepoznavanje sadržaja (može se naslutiti "o čemu se radi", ali, ipak ne možemo prepoznati sa sigurnošću)
• slika koja se otvara preko 'klika' (iako je rezolucija relativno mala), već omogućava da se prepoznaju opšte odlike 'pejzaža' i mnogi detalji: jasno je o kom gradu se radi, jasno je o kom delu grada se radi, prepoznaju se konture brodova i sl.
• ako bi rezolucija slike bila dovoljno velika da zauzme ceo ekran (što naravno ne možemo simulirati time što bismo sliku samo "zumirali" preko celog ekrana), sasvim bi bilo moguće prepoznavati konture šetača na šetalištu i sl, a ako bi rezolucija bila još 10 puta veća, bilo bi moguće prepoznavati i lica, kao i mnoge druge detalje

Sigurni smo da se sa terminom "rezolucija" ne srećete prvi put, i (generalno), kada je rezolucija slike u pitanju, stvari funkcionišu po principu: "što više - tim bolje" (što više piksela, što veća gustina piksela).

Međutim, povećanje rezolucije sa sobom svakako povlači i povećanje datoteka (a veće datoteke zahtevaju i više vremena za obradu i/ili korišćenje bržih procesora), i stoga se po pitanju rezolucije ipak moraju ustanoviti razumne granice.

Osnove RGB modela

Pošto smo se već upoznali sa pojmom piksela, utvrdivši pri tom da je u pitanju najmanji deo slike kome se može pripisati boja (kao i to da pikseli - u praksi - nisu tačke u geometrijskom smislu), postavlja se pitanje, kako (tačno) se definiše boja određenog piksela.

Na računarskim monitorima, * boja piksela nastaje mešanjem tj. 'dodavanjem' crvene (Red), zelene (Green) i plave (Blue) boje, čemu odgovara skraćenica "RGB" (sa kojom ste se, verujemo, takođe sreli više puta do sad).

U nastavku, prikazaćemo kako opisani model funkcioniše u praksi ....

Zapis boja u računarskim programima

U različitim programima, boje se definišu navođenjem pojedinačnih RGB vrednosti.

Jedan od načina, podrazumeva navođenje tri nezavisne dekadne vrednosti, međutim, boje se mogu definisati i preko heksadekadnog zapisa, koji je ekonomičniji.

Pogledajmo nekoliko tipičnih primera:

Kao konkretan primer iz oblasti web-dizajna, može poslužiti sledeći CSS kod preko koga se različitim elementima web stranice zadaje boja:

		
#element_01 {
	color: #f08050;
}

#element_02 {
	color: RGBA(240, 128, 80);
}
		
	

U jednom od ranijih članaka objasnili smo da je RGB model "aditivni model", odnosno, model u kome boja nastaje "dodavanjem", crvene, zelene i plave komponente - na crnu.

Preko donjeg formulara, možete sami isprobati kako 'miksanje boja' funkcioniše u praksi:

Dubina boje (bit-depth)

Dani crno-belih monitora su za nama ('već neko vreme' :)), a dani kada će monitori prikazivati zaista beskonačan broj nijansi, još uvek se ne naziru. Međutim, u praktičnom smislu, moderni monitori su u stanju da prikazuju kvalitetne slike sa veoma velikim brojem nijansi.

Izraz 'dubina boje' (pomalo čudan prevod engleskog termina "bit-depth"), odnosi se na broj mogućih nivoa ('zastupljenosti') svake od tri boje (crvene, zelene ili plave), to jest, u tehničkom smislu, odnosi se na broj bitova, po kanalu, preko kojih se određuje nivo zastupljenosti boje.

Tipično se u računarskoj grafici sreću formati koji koriste 8 ili 16 bita po kanalu (4 bita po kanalu je prevaziđeno, a 32 bita po kanalu još uvek nije praktično za korišćenje (i objektivno je nepotrebno u mnogim situacijama)).

Ako se neko od čitalaca pita šta je 'poenta' različitih "dubina boje", na donjoj slici možemo videti (prilično očiglednu) razliku u prikazu gradijenata, za koje je korišćeno: 8-bita po kanalu, tj. 256 nivoa zastupljenosti crvene boje (levi deo slike), i 4-bita po kanalu, tj. 16 nivoa zastupljenosti (desni deo slike).

U svemu navedenom, bitan je i 'medijum' na kome se pikseli prikazuju ....

LED diode preko kojih se praktično definišu pikseli na računarskim ekranima, u stanju su da prikažu (pojedinačno) 256 nivoa osvetljenja (2⁸ = 256), a budući da se svaki piksel sastoji od tri diode, odnosno, budući da se za prikaz boja koriste tri kanala (RGB), možemo pomnožiti navedenu vrednost tri puta: 256 * 256 * 256, što kao rezultat daje oko 16.7 miliona - što je svakako veoma veliki broj mogućih nijansi.

Razlika između 8-bitnog i 16-bitnog modela nije "nevažna" (16-bitni ili 32-bitni zapis veoma dobro dođe u ozbiljnijim programima za obradu fotografija, kada npr. treba obraditi problematične detalje u najsvetlijim ili najtamnijim partijama), ali, praktično nije moguće prikazati pravi smisao navedenih razlika preko jednostavnih osmobitnih slika.

Ukratko o vektorskoj grafici

Iako je grafika na monitoru uvek rasterska (kao što smo na početku naveli), "ispod haube" (u internim proračunima u programima), moguće je grafičke objekte definisati i na drugi način, pre nego što budu iscrtani na ekranu.

U vektorskoj grafici objekti se definišu preko matematičkih formula koje opisuju prave (tj. 'izlomljene') i krive linije, a potom se takvi objekti projektuju na likoravan ekrana, pri čemu (pogađate) dolazi do rasterizacije prikaza.

Sa rasterizacijom vektorskih slika zapravo se susrećemo veoma često, iako toga možda niste svesni (na primer, u poslednjih nekoliko minuta koliko čitate ovaj članak, već ste videli nekoliko hiljada rasterizovanih vektorskih simbola!).

Naravno, u pitanju je prikaz teksta. :)

Fontovi koji se koriste za prikaz slova, definisani su po principima vektorske grafike, odnosno: ista kolekcija ravnih i zakrivljenih linija koja definiše jedno slovo, koristi se za tekstualne elemente čija je veličina zadata kao 12pt (što u praksi podrazumeva "razvlačenje" na 16 piksela po visini), ali i za elemente čija je veličina zadata kao 24pt (32 piksela po visini) - ili za bilo koju drugu veličinu.

U nastavku, osvrnućemo se na još nekoliko pojava, koje su zajedničke za rastersku i vektorsku grafiku.

Alfa kanal

Uz tri osnovna RGB kanala (i pod uslovom da je opcija podržana u određenom formatu), slikama se može pripisati i tzv. "Alfa" kanal * - preko koga se definiše transparentnost piksela.

Alfa vrednost 100% znači da je piksel "potpuno vidljiv", vrednost 0 znači da je piksel "potpuno nevidljiv", a 'međuvrednosti' (između 0 i 100%), definišu različite nivoe "poluprovidnosti".

Pošto je Alfa kanal u gornjem primeru crno-beo, nema "poluprovidnosti", ali, vidimo da je preko Alfa kanala ukinuta "šarena pozadina", i ostao je samo grafički element (strelica). *

Kao što možete pretpostaviti, sve rasterske slike su u osnovi pravougaone, i upravo Alfa kanali određuju pojavu koja se zapaža kao "isecanje" delova slike.

Kompresija

Zapis slika obično zahteva nezanemarljive memorijske kapacitete, i stoga su uštede po pitanju veličine datoteka - više nego dobrodošle. Naravno, takve uštede sa sobom (uglavnom) povlače gubitke u kvalitetu prikaza, ali, postoje algoritmi za kompresiju slike (npr. JPEG), * koji omogućavaju velike uštede u prostoru, uz gubitke u kvalitetu prikaza koji su minimalni (ili, bar - prihvatljivi). **

U najgorem slučaju, efekat kompresije je drastičan (slično efektu "pikselizacije" koji smo videli na slici #4, sa desne strane), ali, u normalnim/uobičajenim okolnostima, sa dobro podešenim algoritmom, razliku je teško uopšte i primetiti.

Slojevi slike

Veoma korisna opcija (koja uglavnom nije podržana u formatima koji su popularni u web dizajnu), podrazumeva podršku za slojeve slike koji se postavljaju jedni 'iznad' drugih (pri čemu je moguće koristiti Alfa kanale i različite režime preklapanja).

Za primer, preklopićemo dve slike (slojevi su na donjoj slici 'smaknuti' samo zarad boljeg razumevanja početnog primera, tj. u praktičnom smislu, treba smatrati da je sloj sa plavom strelicom direktno "iznad" tj. ispred "donjeg" sloja) * ....

Ako sa 'gornje' slike (tj. gornjeg sloja), preko Alfa kanala "isečemo" pozadinu (i zatim preklopimo slojeve), dobićemo sledeći rezultat:

Podrška za animacije

Podrška za animacije je (inače) veoma korisna opcija, ali, uglavnom nije prisutna u formatima koji se koriste u web dizajnu.

Međutim, format GIF * (rasterska grafika), podržava prikaz animiranih slika, a format SVG * (vektorska grafika), omogućava animiranje geometrijskih oblika.

Popularni grafički formati

Iako je u velikom broju situacija moguće izabrati jedan format slika za ceo sajt (kao što smo već nagovestili u uvodu), pravila dobrog dizajna ipak nalažu da različite funkcionalne elemente stranica treba kreirati uz korišćenje različitih grafičkih formata.

Upoznaćemo se se najpopularnijim formatima, prednostima i nedostacima različitih formata, i oblastima primene ....

PNG

• Tip grafike: rasterska
• 8-16 bita po kanalu
• Alfa: DA
• Slojevi: NE
• Pun kvalitet slike: DA
• Animacije: NE

PNG (Portable Network Graphics) je format koji se na internetu tipično koristi za prikazivanje manjih grafičkih elemenata (ikone, dugmići i sl), u punom kvalitetu, pri čemu dolazi do izražaja i podrška za transparentnost (koju PNG format nudi).

Što se tiče standardnih fotografija (pogotovo fotografija viših rezolucija), nepisana pravila web dizajna nalažu da se za takve slike ipak/i dalje pribegava upotrebi JPEG datoteka, jer se i dalje smatra da su PNG datoteke (iole veće rezolucije), prevelike za slanje preko mrežnih protokola.

JPEG

• Tip grafike: rasterska
• 8 bita po kanalu
• Alfa: ne
• Slojevi: NE
• Pun kvalitet slike: NE
• Animacije: NE

Skraćenica JPEG * označava kompresovani format koji (uz određene gubitke u kvalitetu prikaza), omogućava čuvanje 8-bitnih ** slika bez Alfa kanala.

U pitanju je i dalje najpopularniji format za zapis fotografija, koji svoju veliku popularnost (koja nije izbledela poslednjih cca. 25 godina), duguje veličini datoteka koje se dobijaju JPEG kompresijom (u odnosu na nekompresovane formate, veličina je višestruko manja, dok je kvalitet - u najpraktičnijem smislu - solidan (tj. krajnje prihvatljiv)). ***

Kao što smo već naveli, JPEG je format koji se i dalje koristi u (skoro) svim situacijama kada je na web stranicama potrebno prikazivati fotografije (za razliku od grafičkih elemenata), pogotovo kada se radi o fotografijama visoke rezolucije (ili, drugim rečima: ni izdaleka nije u pitanju 'jedina' opcija, ali, za čuvanje fotografija, ili za čuvanje slika "opšteg tipa" u situacijama kada ne postoje specifični zahtevi po pitanju očuvanja kvaliteta i sl, najčešće se koristi format JPEG).

SVG

• Tip grafike: vektorska
• 8 bita po kanalu
• Alfa: DA
• Slojevi: NE
• Pun kvalitet slike: DA
• Animacije: DA

Ukoliko nismo zadovoljni kvalitetom grafike pri korišćenju formata PNG (ne previše verovatno), ili je potrebno istu sliku prikazati u više rezolucija na različitim mestima, bez gubitka u kvalitetu (što je mnogo verovatnije), rešenje može biti korišćenje formata SVG (Scalable Vector Graphics).

Kao što smo nagovestili, vektorske slike praktično "nemaju rezoluciju" (same po sebi), * i stoga je na različitim mestima moguće koristiti jednu vektorsku sliku (primera radi): i kao ikonu male rezolucije, i kao logotip srednje ili veće rezolucije (ili na neki treći način).

Pogledajmo primer koji pokazuje razliku između rasterske i vektorske grafike (da biste videli efekat, potrebno je da "zumirate" stranicu u browseru, po mogućnosti bar do nivoa 200%):

- Rasterska grafika je praktično ograničena širinom i visinom rasterske slike, i deluje sve lošije i lošije, što se više slika 'razvlači' preko ekrana:

- Vektorska grafika nije ograničena 'brojem piksela', i stoga prikaz praktično deluje sve bolje i bolje ukoliko se slika 'zumira':

Međutim, sa formatom SVG postoji i jedan manji problem, koji se tiče fontova: iako sam format podržava vektorske fontove (fontovi takođe mogu biti rasterski i vektorski, ali, danas se rasterski fontovi sreću veoma retko), podrška za vektorske fontove u okviru formata SVG, u praktičnom smislu je .... delimična.

Kada je izabrani font instaliran na računaru na kome se sajt prikazuje, slika će biti prikazana na korektan način, onako kako je autor slike zamislio, dok, ukoliko font nije instaliran, browser samostalno bira font odgovarajuće familije, ali, to ni u kom slučaju ne znači da će prikaz biti sličan (štaviše, razlike mogu biti prilično velike).

Rešenje je da se tekst koji je ispisan preko vektorskih fontova pretvori u geometrijske oblike opšteg tipa, posle čega će prikaz biti besprekoran (naravno, podrazumeva se da "iscrtani tekst" nije više moguće uređivati kao tekst, već samo kao kolekciju grafičkih elemenata).

Pored svega navedenog, format SVG takođe podržava i animacije (na grafičkim elementima).

BMP

• Tip grafike: rasterska
• 8 bita po kanalu
• Alfa: DA *
• Slojevi: NE
• Pun kvalitet slike: DA
• Animacije: NE

BMP (skraćeno od "Bitmap") je rasterski format za čuvanje slika punog kvaliteta, * ali - bez podrške za slojeve i animacije (pri čemu je i podrška za Alfa kanale, 'novijeg datuma'). **

U praktičnom smislu, format BMP je godinama bio osnovni grafički format i (ne)zvanični format za čuvanje slika punog kvaliteta, sve dok tu ulogu nije postepeno preuzeo format PNG (koji, kao što smo naveli, podržava po potrebi i više od 8 bita po kanalu, a tradicionalno postoji i podrška za Alfa kanale, koja u formatu BMP nije postojala duže vreme). **

GIF

• Tip grafike: rasterska
• 8 bita po kanalu
• Alfa: DA
• Slojevi: NE
• Pun kvalitet slike: NE
• Animacije: DA

Format GIF (Graphics Interchange format), takođe uživa veliku popularnost godinama unazad, ali (u najpraktičnijem smislu), GIF zapis nije smišljen sa idejom "što boljeg prikaza" (naravno, uz ogradu da je kvalitet slika u GIF formatu sasvim 'razuman'/'prihvatljiv' i sl), već je osnovna ideja da datoteke imaju što manju veličinu, a prisutna je i podrška za animacije (što je svojstvo koje se ne sreće u ostalim rasterskim formatima koje opisujemo).

Što se tiče podrške za animacije u formatima SVG i GIF, postoji svojevrsna 'podela': kada je u pitanju SVG, tipično se animiraju svojstva grafičkih elemenata, a GIF datoteke se tipično koriste za zapisivanje kraćih video-klipova.

Za kraj ....

Kao što smo ranije naveli, moguće je koristiti samo jedan format slika za celu web stranicu: PNG ili SVG - ako na stranici nama fotografija, ili JPEG, ako ("nekim čudom, u 21. veku") dizajn stranice 'može da prođe' bez ikona sa transparentnom pozadinom (ili se taj nedostatak može nekako "zamaskirati").

Međutim, budući da "niko ne tera" web dizajnere da izaberu samo jedan format (a ostale zanemare), moguće je koristiti dobre strane različitih formata 'tamo gde treba', a slabosti izbegavati upotrebom drugih, za date primene prikladnijih formata.

Takođe, trudite se da uvek razmotrite koliku uštedu memorijskih kapaciteta zapravo ostvarujete u određenoj situaciji: nekoliko kilobajta uštede na velikim slikama, nije baš prevelika ušteda, dok nekoliko stotina kilobajta - jeste. To su stvari koje posetiocima sajta ne znače gotovo ništa (osim ako ne dizajnirate sajt tako da se od posetilaca očekuje da bez ikakvog pravog razloga učitavaju ogromne slike), ali zato internet pretraživači, koji na osnovu raznih kriterijuma (praktično) odlučuju o poziciji određenog sajta u pretragama - vode računa i o veličini slika na sajtu.

Na nama je da napravimo izbor, ali - bitno je da izbor postoji.