Notes
Slide Show
Outline
1
Prikaz slika na Web-u
2
Uvod
  • Slike se u računaru predstavljaju matricom (mrežom) kvadratića zvanih pikseli.
  • Svaki piksel ima svoju boju. Boja piksela je predstavljena u računaru određenim brojem bitova; broj bitova za opis boje jednak je za sve piksele na slici.
  •  Za ovakav prikaz slika koriste se termin
  •    rasterska ili bitmapirana grafika.
3
Bitmapirane datoteke vs vektorske datoteke
  • Bitmapirana slika ne može da tačno predstavi neprekidan ton boja koji se postiže na  fotografijama, pa i na televizijskim ekranima. Ono što moderni računar može da postigne je da su razlike između npr. fotografije i njenog prikaza na računaru, neuočljive za ljudsko oko.
  • Napomena: Osim bitmapirane, u računarima postoji i vektorska (objektna) grafika; Vektorske datoteke sadrže matematičke opise linija, krivih, šara nužnih da se iscrta slika.
  • Uglavnom su manje i mogu da se  skaliraju bez degradacije slike. One su atraktivnije za CAD alate negoli za Web, te o njima neće biti reči u ovim folijama.


4
Kvalitet i veličina slike
  • Pri čuvanju slike u računaru  javlja se i zahev za optimalnim zapisom slike. Pod optimalnim zapisom smatra se "što vernija sliku, sa što manje zauzetog prostora u memoriji".
  • Dva osnovna elementa koji utiču na sadržaj i veličinu grafičkog fajla su broj piksela slike i dubina piksela.
  • Odluka o broju piksela slike donosi se u zavisnosti od namene slike – odnosno uređaja na kome će se prikazivati.
  • Rezolucija ekrana meri se brojem piksela ekrana po dužnom inču. U zavisnosti od broja piksela koji se na ekranu mogu predstaviti (800x600, 1024x768, ...) i fizičke veličine ekrana (koja se meri dužinom dijagonale, i može da iznosi na pr. 14 ili 17 inča), rezolucija ekrana varira, i iznosi (recimo) 70 do 90 piksela po inču.
  •      Rezolucija štampača se definiše brojem tačaka štampe (dots) po dužnom inču. Tačka štampe je ekvivalent ekranskog piksela. Današnji štampači imaju svoje standardne mere kvaliteta slike, npr. 300 ili 600 tačaka po inču.
5
Dubina pixel-a
  • Informacija o boji svakog piksela slike čuva se u nizu bitova fiksne dužine. Broj bitova upotrebljenih za jedan piksel naziva se dubina piksela (dubina boje, bit rezolucija).
  • Što je dubina piksela veća, na slici je moguće prikazati više različitih boja. Odluka o dubini piksela, a time i o bogatstvu boja grafike, donosi se u zavisnosti od toga kakvi se podaci na slici nalaze (vodeći, naravno, računa o tome da što je veća dubina piksela, to je veći utrošak memorijskog prostora za čuvanje slike).
6
Kolorit slike
  • Ako slika sadrži samo crno-bele elemente (na primer, ako predstavlja
  • skenirani dokument sa tekstom), za opis piksela na slici dovoljne su dve boje –
  • crna i bela. Ove dve boje mogu se definisati korišćenjem samo jednog bita po
  • pikselu.
  • Ako je slikom predstavljen jednostavan crtež, dobar izbor za dubinu piksela je
  • 8 bita (čime je omogućeno predstavljanje do 256=2^8 različitih boja).
  • Slike u punoj boji mogu se na ekranu prikazati sa dubinom piksela 24. U RGB
  • modelu boja to se realizuje tako što se sa po 8 bita predstavljaju komponente
  • crvene, zelene i plave boje, koje se kombinuju da bi se prikazala boja piksela.
  • Na ovaj način, na ekranu se može predstaviti 2^24 ili približno 16,7 miliona
  • različitih boja, a to je obično više nego dovoljno za ljudsko oko.
7
Format grafičkog fajla. Potreban prostor za zapis slike.
  • Pod formatom grafičkog fajla  podrazumevamo način na koji se informacija
  • o slici organizuje u fajlu. Danas postoji vrlo veliki broj različitih grafičkih
  • formata. Za koji ćemo se format opredeliti zavisi od namene i sadržaja fajla,
  • operativnog sistema, softvera sa kojim raspolažemo,...
  • Prostor potreban za zapis podataka o slici, bez obzira koji format se
  • koristi, može se približno izračunati po formuli:
  •  potreban prostor = broj piksela x dubina piksela
  • Primer 1: Slika u punoj boji, veličine 600 x 500 piksela (otprilike polovina
  • ekrana) traži 300000 x 3 bajta, ili 900 Kb prostora. Ova veličina slike, mada
  • može biti prevelika ako sliku treba slati preko mreže (radi prikaza na Web
  • strani).
8
Kompresija podataka
  • U pokušaju da se veličine fajlova smanje nastali su mnogi programi za njihovu  kompresiju. Podaci u fajlu organizuju se na način komplikovaniji od načina na koji su organizovani ako kompresije nema, ali se postižu značajne uštede u prostoru.
9
Formati PCX, TIFF, BMP, GIF, JPEG i PNG
  • PCX, TIFF i BMP formati su široko zastupljeni u obradi slika, uključujući
  • skeniranje, prenos među platformama i njihovo korišćenje u stonom izdavaštvu.
  • Sva ova tri formata sadrže podatke koji su ili nekomprimovani, ili se
  • komprimuju bez gubitaka, što ih čini dobrim pri editovanju ali ih diskvalifikuje
  • za korišćenje na Webu.
  • GIF, JPEG i PNG su formati namenjeni korišćenju na Webu, jer,
  • zahvaljujući moćnim tehnikama kompresije koji se u njima koriste, troše manje
  • prostora za podatke o slikama, pa se lakše šalju preko mreže. Ova tri formata
  • imaju još jednu važnu osobinu koja ih dodatno kvalifikuje za Web, a to je
  • mogućnost progresivnog prikaza.
10
GIF (Graphics Interchange format)
  • Ekstenzija: GIF; Verzije: 87a, 89a; Kompresija: LZW; Održava: Compuserve
  • GIF slike su dubine piksela 8 bita (dozvoljavaju da slika ima do 256 različitih boja) i uvek su komprimovane. Metod kompresije, LZW, razvili su 1977. J. Ziv i A. Lempel, a kasnije usavršio Terry Welch. Ovo je algoritam kompresije bez gubitaka, koji odlično komprimuje jednostavne slike sa velikim oblastima obojenim istom bojom.
  • GIF format je dobar izbor za crteže, crno-bele slike i za sitan tekst. Zbog male dubine piksela, a i zbog prirode LZW algoritma (koji ne komprimuje dobro slike sa neprekidnim tonovima) nije dobar za prikaz fotografija.
11
GIF
  • Jednostavne slike se u formatu GIF odlično komprimuju, tako da se dobijaju mali fajlovi. Ovo je jedan od razloga što je ovaj format, iako stariji, i dalje vrlo korišćen na Webu. GIF ima i neke druge osobine koje su razlog da se toliko dugo održao, bez obzira na pojavu velikog broja novijih grafičkih formata. U te osobine spadaju preplitanje, transparentnost, i mogućnost pravljenja animacija.
12
GIF preplitanje
  • Svojstvo preplitanja stvara iluziju bržeg prikazivanja grafike. Posebno je korisno na Webu, gde kod
  • sporih linkova postoji opasnost da zbog sporog prikaza slika nestrpljivi posetioci napuste sajt pre nego što
  • se cela strana sa slikom prikaže.
  • Podaci u formatu GIF su normalno (ako se ne koristi preplitanje) organizovani red po red
  • piksela, od vrha ka dnu slike. Slika se prikazuje tempom koji je diktiran brzinom prenosa slike kroz mrežu,
  • tako što se redovi prikazuju sekvencijalno, od vrha ka dnu. U trenutku kada je pristiglo 50% podataka, na
  • ekranu će se videti samo gornja polovina slike. Tek kada budu stigli svi podaci, vidi se dno slike.
  • Prepleteni GIF slika brzo preko celog ekrana. U prvom prolasku prikazuje se samo oko 12.5% slike
  • (svaki osmi red). Zatim se GIF slika ponovo prikazuje još tri puta, dajući u svakom prolasku sve veću
  • rezoluciju, sve dok ne stignu svi podaci; u drugom prolasku prikazuje se još 12.5% podataka, tako da je
  • prikazan svaki četvrti red; u trećem prolasku na ekranu se pojavljuje još 25% podataka, pa će se videti
  • svaki drugi red. U četvrtom, poslednjem koraku, prikazaće se i ostalih 50% podataka slike. Korisnik može
  • steći dosta dobru predstavu o celoj slici već kada je 30-50% informacija primljeno. Preplitanje je
  • podržano sa oba (GIF87a i GIF89a) formata.
13
GIF transparentnost
  • Sve bitmapirane slike u računaru predstavljene su matricom piksela, koja je uvek
  • pravougaonog oblika. Osobina transparentnosti omogućuje da slika ne mora da
  • ima pravougaonu konturu.
  • Ako neki piksel slike proglasimo za providan (transparentan), on se neće na ekranu
  • videti, nego će se kroz njega "provideti", i tu ćemo umesto slike videti odgovarajući deo
  • pozadine na kojoj slika leži. Tako, ako želimo da naša slika ima kružni oblik umesto
  • pravougaonog, sve piksele naše (pravougaone) slike van kruga možemo definisati kao
  • transparentne.
  • Transparentni GIF je jednostavno realizovati. Za transparentne piksele u CLUT-u (Color
  • Lookup Table, tabela pretraživanja boja)  se rezerviše jedan ulaz, koji predstavlja
  • "providnu boju".
  • Transparentnost je podržana za format GIF89a, ali ne i za GIF87a.
14
Animirani GIF
  • Pokazalo se da osnovna specifikacija formata GIF, GIF89a,
  • podržava osim statičnih, i animirane slike. Dovoljno je načiniti
  • niz slika koje, posmatrane u nizu, čine animaciju. Potom ih
  • pomoću neke od pristupačnih alatki povežemo u jednu datoteku
  • u formatu GIF, animaciju koja se može prikazati na Web strani.
  • GIF animacija ne pruža nivo kontrole i fleksibilnosti kao
  • drugi formati za animaciju, ali je postala izuzetno popularna
  • zato što je podržana od gotovo svih Web pregledača.
15
Problem s pravom korišćenja GIF-a
  • Algoritam kompresije LZW, koji se koristi u GIF-u, vlasništvo
  • je Unisysa, te druge kompanije koje hoće da koriste ovaj
  • algoritam moraju da zato traže dozvolu.
  • Unisys je 1995. godine objavio da će naplaćivati korišćenje
  • GIF-a. To ne znači da svako ko kreira ili koristi GIF sliku mora
  • da plati za nju. Prava korišćenja se odnose na autore programa
  • za stvaranje GIF slika.
  • Iako je Unisys najavio da odustaje od zahteva, ali problem nije sasvim rešen, jer kompanija nije ni besplatno ustupila autorska prava.
16
JPEG (Joint Photographics Experts Group)
  • Naziv JPEG je skraćenica od Zajednička Grupa Fotografskih Stručnjaka), što je naziv grupe koja je stvorila ovaj format.
  • Ali, JPEG nije baš format, nego jedna vrlo moćna tehnika kompresije grafičkih podataka. U vreme nastajanja ove tehnike, iz nekih razloga nije standardizovan format koji je koristi. Tokom godina koje su sledile, pojavilo se više različitih formata koji su koristili JPEG kompresiju. Posebno mesto među njima imaju JFIF i SPIFF.
  • JFIF (Ekstenzija: JPG; Kompresija: JPEG; Održava: C-Cube Microsystems)
  • SPIFF (Ekstenzija: JPG, SPF; Kompresija: bez kompresije, JPEG, Modified Huffman, MR, MMR; Održava: ITU i ISO)
  • Danas, kada govorimo o JPEG formatu, obično mislimo na JFIF fajl
  • format (sa JPEG kompresijom).
17
JPEG kompresija
  • Je vrlo moćna kompresiona tehnika sa gubicima. U stanju je da bez (za ljudsko oko) vidljivih gubitaka u
  • kvalitetu slike, smanji veličinu fajla na njen, npr. dvadeseti deo. Ovo je, u odnosu na tehnike kompresije
  • bez gubitaka, ogromna ušteda, jer se pri kompresiji slike bez gubitaka može postići ušteda memorijskog
  • prostora od jedva 50%. JPEG koristi osobinu ljudskog oka da slabije uočava razlike u nijansama boje nego
  • u intenzitetu svetlosti. Zato najbolje komprimuje fotografije u punoj boji. Slabije, ali ipak dosta
  • dobro, pokazuje se kod slika u nijansama sive boje (nijanse sive su ustvari nijanse svetlosti!)
  • Najslabiji je kod jednostavnih crteža sa oštrim ivicama i kod teksta, gde se i pri manjem intenzitetu
  • kompresije pojavljuju vidljivi defekti – artefakti.
  •  Korisnik može da se, u skladu sa namenom slike, opredeli za nivo kompresije. Što je viši nivo kompresije,
  • fajlovi će biti manji, ali će i oštećenja slike biti veća. Osnovni problem u korišćenju JPEG kompresije leži u
  • činjenici da su oštećenja nastala pri kompresiji trajna, i da se pri višestrukim editovanja slike, gubici
  • akumuliraju. Posle većeg broja sesija editovanja (dekompresija, editovanje, kompresija pri snimanju
  • izmenjenog fajla), slika više neće dobro izgledati.
  • Nema editovanja bez gubitaka (čak ni rotacija za 90 ili 180 stepeni, flip horizontal i
  • vertical i crop nisu operacije bez gubitaka). Zato nikada ne treba editovati JPEG slike. Edituje
  • se original, koji se čuva u sirovom (nekomprimovanom) obliku, ili u formatu koji komprimuje
  • bez gubitaka (kao što su TIFF ili BMP), a JPEG kopija se pravi od originala tek u poslednjem
  • trenutku, kada hoćemo da napravimo mali fajl koji ćemo poslati preko mreže.


18
JPEG Transparentnost
  • JPEG format ne podržava transparentnost, a verovatno je da to svojstvo JPEG slike ni u budućnosti neće imati. Ponekad se može imitiramo transparentnost,  tako da se deo slike za koji želimo da izgleda transparentan, oboji bojom pozadine na kojoj će se slika nalaziti kada se bude prikazivala. Ako unapred ne znamo boju pozadine, ili ako pozadina nije jednobojna, moraćemo odustati ili od transparentnosti ili od JPEG-a (u ovom drugom slučaju, moraćemo koristiti format koji podržava transparentnost – GIF ili PNG).
19
PNG (Portable Network Graphics,
prenosiva mrežna grafika)
  • Ekstenzija: PNG; Održava: Tom Boutell. PNG je novi format za bitmapiranu grafiku, nastao u pokušaju da se prevaziđu zakonski problemi vezani za korišćenje GIF-a (odnosno, LZW algoritma).
  • Format PNG je potpuno patentno i licencno neopterećen!!!
  •  Svako može besplatno kreirati softver koji radi sa PNG slikama.
20
PNG
  • PNG je grafički standard predviđen da se koristi na Webu. Za sada ga još ne
  • podržavaju svi Web navigatori. Aktuelne verzije Netscape
  • Navigatora i Microsoft Internet Explorera mogu da prikazuju PNG slike.
  • Na Webu, tri glavne prednosti PNG-a u odnosu na GIF su: alfa kanali (nivoi
  • transparentnosti), korekcija game (kontrola koliko je slika svetla ili tamna), i
  • dvodimenziono preplitanje (metod progresivnog prikazivanja). PNG komprimuje
  • bolje od GIF-a skoro uvek, ali je razlika obično tek oko 5–25%.
  • PNG sam, za razliku od GIF-a, nema podršku za animaciju. Ustvari, kreatori
  • PNG-a su se opredelili da animaciju odvoje od uobičajenog korišćenja grafike;
  • stvorili su 1999. godine poseban format, MNG (Multiple Network Graphics),
  • vrlo sličan PNG-u, koji je namenjen animaciji.
21
GIF, JPEG, PNG na Web-u: ko je pobednik?
  • PNG je, osim za prikaz slika na Web-u, odlično rešenje i za editovanje slika, jer se njegovi podaci komprimuju bez gubitaka.
  • Ali, za prenos konačne slike u punoj boji, JPEG je gotovo uvek bolji izbor.
  • Mada JPEG kompresija može da izazove i vidljive
  • artifakte, oni mogu biti minimizirani, a uštede u
  • veličini fajla su čak i pri visokom nivou kvaliteta
  • ogromne u odnosu na kompresiju bez gubitaka,
  • prisutnu kod PNG-a.