Hajautetut käyttöliittymät. Kuvat www-sivulla

Transkriptio

1 Hajautetut käyttöliittymät Kuvat www-sivulla

2 Perusteita Pikselien väri näytöllä muodostuu punaisesta, sinisestä ja vihreästä valosta, jotka erilaisina yhdistelminä muodostavat kaikki muut värit ja yhdessä valkoisen. Bit depth on kunkin pikselin värin kuvaamiseen käytettyjen bittien määrä. Yhdellä bitillä per pikseli pystytään näyttämään mustavalkoisia kuvia, kahdeksalla 256 erilaista väriä ja 24:llä jo yli 16 milj. väriä. Uudemmissa mikrotietokoneissa on usein 16- tai 24- ("true color") bittinen näyttö ja vanhemmissa mikroissa tai sylimikroissa 8-bittinen näyttö. Jos näyttö kykenee näyttämään 256 väriä ja kuvassa on niitä enemmän, niin kuva ditheröidään. WWW-selain jäljittelee puuttuvia värejä pistekuvioilla ja seurauksena voi olla häiritsevää pilkullisuutta. Käyttäjät katselevat sivuja erikokoisista ikkunoista. Peukalosääntö kuvan koolle voisi olla noin 550x350 pikseliä, jos haluaa suuren osan käyttäjistä pystyvän katselemaan niitä. Pyri kuitenkin niin pieneen kuvaan kuin mahdollista, sillä ne latautuvat nopeammin maksimikoko olisi 30 kb

3 Miten kuvia www-sivulle digikameralla videosta skannaamalla piirtämällä kopiomalla toisten kuvia (tekijän oikeus) sovellusten cliparteista jne

4 DPI - 1 DPI = resoluution yksikkö (pistettä / tuuma) (=dots per inch, ppi = pixels per inch) esim. 17 näyttö, paljonko olisi resoluution oltava? x² + x² = 17 ² <-> 2x² = 289 <-> x = 12,02 800/12,02 = 67 dpi esim. skannatessa 1,5 kertaa dpi (tulee sopivan pieni tiedosto, jota käsitellään riittävällä tarkkuudella kuvankäsittelyssä) Paljonko on dpi käyttämäsi koneen resoluutiolla ja tuumakoolla? x x 17

5 DPI - 2 Toinen laskentamalli DPI- luvulle: yhden pixelin koko nykyisillä näytöillä on luokkaa 0,23 mm yhteen millimetriin mahtuu siis 4,3 pixeliä tuumassa on 25,4 millimetriä, joten DPI on 110 (1/0,23 * 25,4 = 110)

6 Yleiset tiedostoformaatit - 1 gif Lomittamaton (non-interlaced) GIF (Compuserve Graphics Interchange Format) latautuu näytölle tasaisesti osa kerrallaan. Tiedostokoko on hivenen suurempi kuin lomitetussa. Lomitettu (interlaced) GIF Lomitettu GIF latautuu näytölle eri tavoin kuin lomittamaton: ensin latautuu kuvan alue koko laajuudeltaan ja sitten kuva tarkentuu vaakajuovittain vähitellen. Mikäli WWW-selain tukee tämäntyyppistä latautumista, voidaan tällä tavoin saada nopeammin ensivaikutelma kuvasta ja lopettaa tarvittaessa sen lataus. Toisaalta joku voi kokea kiusallisena hitaammin hahmottuvat yksityiskohdat. Joskus näkyy käytettävän LOWSRC= määritettä, jonka avulla voidaan ladata kevyempi (heikompilaatuisempi) pohjakuva ennen varsinaisen kuvan lataamista, jolloin lopputulos lähenee edelläkuvattua. Käytännössä tämä voisi merkitä esim. kahta JPEG-kuvaa, joista ensimmäinen, LOWSRC-kuva olisi erittäin voimakkaasti pakattu ja näin ollen pienempi tiedostokooltaan ja jälkimmäinen sitten tarkempi versio.

7 Yleiset tiedostoformaatit - 2 Läpinäkyvän (transparent) sävyn määritteleminen kuvaan GIF89a- formaatissa talletettavaan kuvaan voidaan määritellä läpinäkyvä sävy. Tämä on käytännöllistä esim. silloin kun halutaan upottaa kuvaobjektit paremmin taustaan tai piilottaa kuvan kulmikkaat reunat tai muuten ei-toivotut samanväriset osat. WWW-selaimen sivun vallitseva taustaväri korvaa tällöin läpinäkyvät osat. Yleisimmin on tarvetta piilottaa kuvan tausta. Huonoin vaihtoehto kuvan taustaväriksi ei liene keskiharmaa (75% harmaa, R192G192B192), koska se usein on muutenkin selaimen sivun pohjaväri. GIF-formaatissa tallennettu kuva voi sisältää enintään 256 erilaista sävyä, mutta kuvalle voidaan määritellä myös tietty suppeampi paletti. Vaikka kuva on hieman pakattu, kuvapisteitä ei pakkauksen myötä katoa. GIF (Graphics Interchange Format) on vanhin WWW:ssä käytetty tiedostoformaatti ja sitä tukevat käytännössä kaikki selaimet. GIF-kuvssa voi olla 256 eri väriä, eli niiden paletti sisältää enimmillään 256 väriä. GIF pakkaa hävittämättä tietoa. Sen pakkaus perustuu vaakarivien värivaihteluihin eli se pakkaa kokoon kuvia, joissa on vaakasuunnassa vähän vaihtelua, kuvia joissa on laajoja väripintoja. GIF-kuvassa voidaan yksi väri määritellä läpinäkyväksi (transparent). Tämä on toistaiseksi ainoa keino käyttää verkossa muita kuin suorakaiteen muotoisia kuvia. GIF-kuvia voi animoida niin, siten että monta kuvaa latautuu vuorotellen samaan paikkaan. Käytä GIFiä kuviin, joissa on yhtenäisiä väripintoja: piirroksiin, kaavioihin, logoihin, merkkeihin, nappuloihin, viivapiirroksiin sekä kaikkiin kuviin, jotka sisältävät tekstiä.

8 Yleiset tiedostoformaatit - 3 jpg (jpeg = Joint Photographic Expert Group) JPEG on luonteeltaan enemmänkin kuvan pakkausalgoritmi, joka on yleistynyt myös kuvaformaatin nimitykseksi. Vaikka JPEG-pakkaus pahimmillaan hävittää kuvan pieniä yksityiskohtia ja muuttaa kuvaa vähentäen mm. kontrastia käyttökelpoinen ja paras vaihtoehto esim. 24-bittisille luonnollisille värikuville. Pakkauksen määrää voidaan ohjelmallisesti säätää ja etsiä optimia, jossa kuvapisteiden kato ei vielä ole häiritsevää. sivunsisäiset kuvat ovat usein JPEGgejä. JPEGin käyttämistä suositellaan vältettäväksi mikäli kuvan paletti on jo määritelty 256 sävyiseksi JPEG (Joint Photographic Experts Group) kehitettiin valokuvien ja orgaanisten, liukuvasävyisten kuvien pakkaamiseen.

9 Yleiset tiedostoformaatit - 4 JPEG kuvia tukevat käytännössä kaikki selaimet. JPEG on true color - formaatti eli siinä on 16,7 milj. värin paletti, joka on aina sama. JPEG pakkaa hävittämällä tietoa. Se käyttää hyväksi ihmissilmän värien ja värien tummuusasteiden erottelukykyä ja tuhoaa tietoa, joka erottuu silmin heikosti. Vaikka JPEG pienentää tiedoston kokoa huomattavasti, kuvan laadun huononeminen näkyy usein vasta suurennoksissa. Jäljitellessään valokuvamaisia värejä se kuitenkin lisää hälyä tasaisiin reunoihin ja väripintoihin ja sotkee esimerkiksi tekstit ja kaaviot. Kun JPEGinä tallennetaan, on parasta aina tallentaa myös alkuperäinen mm. tulevaa käsittelyä varten. JPEGiä ei koskaan pidä pakata kahdesti (esimerkiksi käsitellä ja tallentaa uudelleen JPEGinä), sillä kaksinkertainen pakkaus rappeuttaa laatua huomattavasti.

10 Yleiset tiedostoformaatit - 5 JPEGille voidaan määritellä kuvan laatu, eli miten paljon pakataan. Mitä enemmän kuvia pakataan, sitä pienempi on tiedoston koko ja sitä huonompi on kuvanlaatu. Suuri pakkaus ei yleensä huononna paljonkaan valokuvamaisia kuvia. JPEG näkyy 8-bittisissä selaimissa ja ruuduilla rasteroituna (puuttuvia värejä jäljitellään pisteytyksellä) system-paletin väreissä. Laatu on yleensä hyvä. JPEG pakkaa valokuvat hyvin ja on siksi niihin käytännöllinen Käytä JPEGiä valokuviin, maalauksiin ym. liukuvasävyisiin kuviin, varsinkin silloin kun värintoisto on ensiarvoista ja on odotettavissa, että suurimmalla osalla yleisöä on mahdollisuus katsella kuvia 24- bittisinä tai jos halutaan kooltaan pieniä, suhteellisen laadukkaita (ditheröityjä) kuvia normaaliin verkkokäyttöön. Huomaa, että JPEG-pakkaus hävittää tietoa eli kuvasta häviää yksityiskohtia.

11 Yleiset tiedostoformaatit 6 png (Portable Network Graphics) yleistynyt viime vuosien aikana omaa gif ja jpg hyviä ominaisuuksia kehitettiin nettiympäristöön korvaamaan GIF-formaatti se pakkaa kuvan 10-30% tehokkaammin kuin GIF. Lisäksi png pystyy käsittelemään täysvärikuvia ja kuvaformaatissa toimii myös läpinäkyvyys. Kuvan pakkaussuhdetta voidaan säätää, mutta se ei hävitä kuvainformaatiota, kuten JPG. Kuvan mukana voidaan tallentaa myös tekstikommentteja.

12 Animaatio GIF kuvilla animaatio perustuu gif-kuviin, joissa on pieni muutos aina edelliseen kuvaan animaatiossa esitetään gif-kuvia peräkkäin lopullinen animaatio on muotoa gif toinen tapa tehdä animaatio on käyttää multimedia tuotteita, esim. Macromedia Flash

13 Sensitiivikartta Kuvassa on olemassa useita hotspotteja hotspot sisältää linkin halutulle www-sivulle sensitiivikartta on html-koodia voidaan toteuttaa erillisillä ohjelmilla tai htmleditorin avulla (esim. Frontpage)

14 Harjoituksia 1. tutustu kuvien tekijänoikeuksiin 2. lisää kuva html-sivullesi ja tee siihen linkki 3. lisää toinen kuva ja tee siihen sensitiivikartta 4. kokeile kuvankäsittelyohjelmalla toteuttaa gif-kuvan läpinäkyvyys 5. tutustu gif-animaation tekoon ja liitä tekemäsi animaatio www-sivullesi