Osnove računarske grafike i formati slika u web dizajnu

Uvod

U današnje vreme, moglo bi se reći da izbor formata slika za potrebe kreiranja web sajtova, zaista nije težak, a situaciju bismo mogli dodatno oslikati uz konstataciju: "svi formati su dobri" i (u praktičnom smislu), takvom izjavom vas ne bismo gotovo nimalo 'prevarili'.

Međutim, ako se malo pažljivije sagledaju tehničke specifikacije različitih formata, ipak se može uvideti da neki formati - u određenim okolnostima - predstavljaju bolji izbor od drugih.

Pre nego što se upoznamo sa grafičkim formatima koji se koriste u web dizajnu (i sa razlozima za korišćenje različitih formata), upoznaćemo se sa samim osnovama računarske grafike ....

Osnove računarske grafike

U najosnovnijem smislu, statične ili pokretne slike koje se prikazuju na računarskim monitorima, sastavljene su iz "piksela", i u pitanju je tzv. rasterska grafika.

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).

U idejnom smislu, piksel je 'tačka', a u praktičnom smislu - 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 (videti sliku ispod). **

Međutim, pre nego što bude prikazana na ekranu (ili odštampana na papiru i sl), 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 takozvana vektorska grafika, o kojoj ćemo takođe pisati u nastavku, ali, slika koja se vidi na monitoru (kao što smo već naveli), uvek je 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 sledećeg odeljka), a u još praktičnijem smislu, može se reći da rezolucija predstavlja sposobnost prikazivanja ili očuvanja detalja (odnosno, vizuelnih informacija).

Da pojasnimo 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 iz daleka nije velika shodno modernim standardima.

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

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 naravno 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.

Pored izražavanja rezolucije preko dve vrednosti (širina x visina), poslednjih godina postalo je popularno da se rezolucije senzora foto-aparata označavaju brojem "Megapiksela" (ukupan broj piksela; širina x visina; izraženo u milionima), kao i to da se rezolucije video-klipova navode samo preko visine slike (720p, 1080p, 2160p i sl).

Osnove RGB modela, veličina i gustina piksela

Pošto smo se 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 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).

Što se tiče konkretne izvedbe, svaki piksel modernih LCD monitora je zapravo realizovan preko tri LED diode (praktično - veoma male "lampice"), koje svetle crvenom, zelenom i plavom bojom, u nekom od 256 mogućih nivoa jačine svetlosti.

Različiti ekrani imaju različite fizičke dimenzije, čak i kada ih odlikuje isti broj piksela po širini i visini, što znači da postoje razlike u veličini samih piksela (sistem od tri diode, koliko god bio mali, ima realne dimenzije, a više godina unazad, tipična veličina piksela na desktop monitorima je oko 0.2mm).

Gustina piksela određena je brojem piksela po jedinici površine i (naravno), velika gustina piksela, povoljno utiče na "oštrinu" slike (tj. precizan prikaz vrlo malih objekata), što se u današnje vreme najbolje može zapaziti na kvalitetnim mobilnim uređajima, na kojima male ikone i drugi slični objekti manjih dimenzija, tipično izgledaju znatno bolje nego na desktop monitorima. **

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, monitori su u stanju da prikazuju veoma kvalitetne slike sa veoma velikim brojem boja.

Izraz 'dubina boje' (pomalo čudni 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; 32 bita po kanalu - još uvek nije praktično za korišćenje, a u mnogim situacijama je i objektivno nepotrebno).

Na donjoj slici možemo videti (prilično 'drastičnu'), 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).

LED diode koje smo prethodno pomenuli, u stanju su da prikažu (pojedinačno), 256 nivoa osvetljenja (2⁸ = 256), a budući da se svaki piksel sastoji iz 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 - a to je svakako veoma veliki broj mogućih nijansi.

Ukratko o vektorskoj grafici

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

U vektorskoj grafici, objekti se definišu preko matematičkih formula (za 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 slika susrećemo se vrlo često, iako toga možda niste svesni (na primer, u poslednjih nekoliko minuta koliko čitate ovaj članak, videli ste već nekoliko hiljada rasterizovanih vektorskih simbola)!

Naravno, u pitanju je tekst koji čitate. :)

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.

Pored do sada navedenih karakteristika, spomenućemo još nekoliko pojava koje su zajedničke, i za rastersku, i za vektorsku grafiku.

Alfa kanal

Uz tri osnovna kanala - RGB (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.

Pošto je Alfa kanal u gornjem primeru crno-beo, nema "poluprovidnosti", ali, vidimo da je preko Alfa kanala ukinuta ("šarena") pozadina, i da je ostao 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 (od kojih je svakako najpopularniji JPEG, o kome ćemo više govoriti u nastavku), 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 možemo videti na slici #3, 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, dobijamo 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 u punom kvalitetu (ikone, dugmići i sl), 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

JPEG (Joint Photographic Experts Group - što je zapravo akronim organizacije koja stoji iza formata), predstavlja kompresovani format koji 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 solidan (tj. krajnje prihvatljiv)). *

Kao što smo već naveli, JPEG je format koji se i dalje koristi u (skoro) svim situacijama kada je na stranicama potrebno prikazivati fotografije (za razliku od grafičkih elemenata), pogotovo kada se radi o fotografijama visoke rezolucije.

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 jednu sliku prikazati u više rezolucija, bez gubitka u kvalitetu (što je mnogo verovatnije), može se koristiti format SVG (Scalable Vector Graphics).

Kao što smo nagovestili, vektorske slike praktično "nemaju rezoluciju" (same po sebi), * i stoga je moguće jednu vektorsku sliku koristiti (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 praktično je 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 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. Ukoliko font nije instaliran, browser će samostalno izabrati 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, 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

GIF (Graphics Interchange format), podržava animacije - i to je ono što ovaj format izdvaja od ostalih rasterskih formata koje navodimo, a pored toga, GIF je svojevremeno bio vrlo popularan format i u situacijama kada je potrebno omogućiti što manje veličine datoteka preko kojih se zapisuju statičke slike, uz kvalitet koji je i dalje (ili je makar bio .... nekada), prilično prihvatljiv.

Kao što smo već nagovestili, tip animacija za koje se format GIF koristi, ipak je različit od onoga za šta se koristi SVG (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 i koliku uštedu 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.