Katsaus grafiikkaan webissä

12.4.1999

Jukka Lindström
Ti
Teknillinen Korkeakoulu
jukka.lindstrom@hut.fi

Tiivistelmä

Käyttäjämäärien kasvaessa on webissä kasvanut yhä suurempi kysyntä nopeaan ja näyttävään mediaan. Multimedia on yleistynyt verkossa viime vuosina huomattavasti juuri uusien tekniikoiden ja lisääntyneen palveluntarjonnan myötä. Interaktiivisuudelle ja näyttäville animaatioille ja nopealle 2d-grafiikalle on kysyntää niin mainonnan kuin sisällöntuotannonkin puolella, sillä kilpailu huomiosta ja käyttäjistä on kova. Suurimpana ongelmana animaatioiden ja interaktiivisten elementtien esittämisessä on ollut useiden eri tekniikoiden sekä tiedostoformaattien olemassaolo ja tiedonsiirron asettamat rajoitukset siirrettävälle datalle.


1 Johdanto

2 Vaatimukset

3 Tekniikat

3.1 Bittikarttagrafiikka
3.2 Vektorigrafiikka
3.3 Virtaava grafiikka (streaming graphics)

4 Olemassa olevat ratkaisut

4.1 RealNetworks RealAudio + RealVideo + RealFlash = RealPlayer
4.2 Macromedia Flash
4.3 Precision Graphics Markup Language (PGML)

Lähdeluettelo

Lisätietoja & Linkkejä


1 Johdanto

Webin käyttäjämäärä on kasvanut viime vuosien aikana räjähdysmäisesti. Ei siis ole ihme, että mainonta ja myös erilaisten palveluiden tarjonta webissä on kasvanut (ja ovat myös osaltaan vaikuttaneet käyttäjämäärän kasvuun). Palveluntarjoajat kilpailevat huomiosta ja lojaaleista käyttäjistä, tarjoamalla sisältöä, designia eri medioita käyttäen.

Tässä dokumentissa keskitytään lähinnä vertailemaan eri virtaavan animaation / videon eroja ja mahdollisia tulevaisuuden standardeja, keskittyen lähinnä tällä hetkellä lupaavimmilta näyttäviin tekniikoihin, Flashiin ja PGML:ään. Vaikkakaan tässä ei keskitytä Video On Demandiin eikä videokonfrenssi- tekniikoihin, liittyvät niissä esiintyvät ongelmat läheisesti tässä käsiteltäviin asioihin.

2 Vaatimukset

Koska kaistanleveyden on vielä useille webin käyttäjille suhteellisen hidas (ISDN, 56k modeemi), eivät esimerkiksi sivustoilla olevat animoidut bannerit voi tai saa olla niin isoja, että ne hidastavat huomattavasti itse sisällön latautumista. Siirrettäessä virtaavaa dataa vaaditaan yhteydeltä nopeaa, tasaista ja varmaa toimitusta. Datan pitäisi siirtyä mahdollisimman tasaisella nopeudella, sillä jos siirrossa ilmenee useita sekunteja pitkiä katkoja on reaaliaikaisuus tiessään. Koska verkon tiedonsiirtonopeutta ei pystytä kontrolloimaan joudutaan keskittämään virtaavan datan hallintaan tiedonsiirtotekniikoilla, pakkausmenetelmillä ja muuttamalla esimerkiksi animaation laatua, kokoa, värejä tai pudottamalla näytettävien kuvien määrää per sekunti (FPS).

Wireless Application Protokollan (WAP) kehityksen myötä tulee yhä suuremalla laite- ja näyttökannalla mahdollisuus päästä hakemaan informaatiota webistä. Siirrettävien medioiden pitäisi ottaa myöskin nämä laitteet, pääasiassa näyttökokojen suuret erot, huomioon. Olisi ideaalista, jos samaa animaatiota voisi näyttää PDAiden pienillä näytöillä, siinä missä 17 tuumaisella pöytämonitorillakin.

3 Tekniikat

Bittikarttagrafiikka

Bittikartta kuvat koostuvat pienten neliöiden, joita kutsutaan pikseleiksi, muodostamasta ruudukosta. Jokainen pikseli sisältää tietoa väristä ja voimakkuudesta. Katsottaessa bittikartta kuvaa kaukaa (jolloin yksittäinen pikseli on suhteellisen pieni) luo kokonaisuus kuvan. Bittikarttagrafiikka soveltuu erinomaisesti juuri valokuvien ja elokuvien esittämiseen, sillä

Bittikartta kuvaformaatteja on useita, (mm. TIF (Tagged Image File), TGA (Targa), PSD (Photoshop), PCX (Tagged Image File), BMP (Windows Bitmap), GIF (Graphics Interchange Format), JPG (Joint Photographic Experts Group)), mutta yleisimmät kuvaformaatit verkossa ovat ehdottomasti gif ja jpg. Näitä formaatteja kaikki selaimet tukevat, muuten kuvan näkyminen riippuu selaimesta. Sekä GIF, että JPG käyttävät pakkausta pienentämään kuvien kokoa.

Tärkeimmät ominaisuudet:

Ongelmat:

Vektorigrafiikka

Vektorigrafiikka on ensimmäistä tietokonegrafiikkaa, joka alunperin suunniteltiin (alkeellisia) CAD-sovellutuksia varten. Periaatteessa vektorigrafiikka koostuu matemaattisista tiedosta, kuinka piirtää viivoja. Esimerkiksi viivan piirtämiseen tarvitaan vain tieto kahdesta päätepisteestä ja ympyrä vaatii tiedon keskipisteestä ja säteestä. Näistä elementeistä voi rakentaa kokonaisuuksia ja lisätä niihin ominaisuuksia, esimerkiksi ympyrän täyttäminen tietyllä värillä tai viivan kaarevuus. Vektorigrafiikan elementtejä on myös usein helppo muokata ja esittää. Valmista vektorikuvaa voi esimerkiksi helposti suurentaa kuvanlaadun siitä yhtään käsimättä (toisin kuin bittikarttakuvissa, joissa pikselit suurentuvat kuvaa suurennettaessa)

Vektorigraafiikan kehittämiseen on kiinnitetty vasta viime vuosina enemmän huomiota webin laajenemisen myötä, koska vektorigrafiikka on huomattavan ekonominen tapa säilöä yksinkertaista grafiikka (eli ei kuvia yms.)

Vektorigraafiikka on myös ratkaisu ongelmaan, jonka erilaiset näyttölaitteet (kännyköiden ja Personal Digital Assitanttien näytöt vs. monitorit ja televisiot) aiheuttavat, sillä vektorigrafiikka on helposti skaalattavissa ilman, että resoluutio on kiinnitetty. Osittain tästä syystä Vektorigrafiikkamuotoisia dokumentteja on käytetty graafisen tuotannon ja julkaisun puolella.

Tärkeimmät ominaisuudet:

Ongelmat:

Vektorigrafiikka on soveltuu verkossa esitettäväksi, siksi että se vaati vähän kaistanleveydeltä, mutta enemmän vastaanottajan koneelta (kuvan skaalaus, antialiasointi ja esittäminen objektidatasta vaatii koneen laskentateholta enemmän kuin bittikarttakuvan pikselidatan esittäminen.)

Virtaava grafiikka (streaming graphics)

Virtaus-tekniikalla tarkoitetaan tapaa siirtää informaatiota siten, että sitä voidaan käsitellä samanaikaisesti kun sitä vastaanotetaan. Suurimalla osalla tekniikoista pyritään myös reaaliaikaisuuteen, sillä esimerkiksi katkeilevasta musiikista on turha yrittää nauttia. On olemassa sekä virtaavaa bittikartta- että vektorigrafiikka, ja molempiin pätevät yllä esitetyt hyvät ja huonot ominaisuudet.

Tärkeimmät ominaisuudet:

4 Olemassa olevat ratkaisut

Tässä luvussa käsitellään pinnallisesti muutamia vallala olevia tekniikoita.

4.1 RealNetworks RealAudio + RealVideo + RealFlash

Real perheen ensimmäinen järjestelmä RealAudio julkaistiin vuonna 1995. Se kuului ensimmäisiin virtaavaustekniikkaa käyttäviin äänentoisto-ohjelmiin. Nykyisin siihen on sulautunut RealVideo, joka näyttää RealNetworksin omaa virtaavaa video-formaattia ja RealFlash, joka esittää Macromedian Flash tiedostoformaattia (ks. alla)

Virtaavaa reaaliaikaista dataa varten RealNetworkisillä on olemassa palvelinohjelmisto. Ei-reaaliaikaista sisältöä varten on olemassa myös omat ohjelmansa.(RealProducer G2, johon on olemassa kaupalliset laajennetut versiot plus ja pro)

Tärkeimmät ominaisuudet:

Ongelmat:

4.2 Macromedia Flash

Flash on virtaava, interaktiivinen vektoripohjainen animaatioformaatti, joka on erityisesti kehitetty web-käyttöön. Flash on nopeasti noussut huomattavan laajasti käytetyksi formaatiksi ja onkin tällä hetkellä de-facto standardi vektorigrafiikan esittämisessä webissä.

Flash on edennyt jo kolmanteen versioonsa, ja viimeisimmässä Skandinavian konfrenssissaan, Tukholmassa, Macromedia esitteli tulevan Flash 4:sen ominaisuuksia, johon on ominaisuuksia, jotka tuo Flashin lähemmäksi Macromedian toista suosittua web-tuotetta Shockwavea. Tuleviin ominaisuuksiin kuuluu muunmuassa yksinkertainen skriptauskieli interaktiivisuuden parantamiseksi.

Johtuen suhteellisen pienestä koostaan ja useista ominaisuuksistaan, ei Flashin yleisyys ole ollenkaan 14. Huhtikuuta 1998 Macromedia julkisti Flash 3:n tiedostoformaatin julkiseksi, pyrkien saamaan Flashin taakse useita muita alan yrityksiä ja siten aikaansaada Flashille teollisuusstandardin asema. [1]

Uusimmat selaimet (Netscape 4.5 ja Microsoft IE 5.0) tukevat suoraan tätä tiedostoformaattia ja uusimpien windows-käyttöjärjestelmien mukana tulee automaattisesti tarvittava plugin, jota vaaditaan Flashin näkymiseen vanhemmilla selaimilla. Flash Plugin on useimmille laitteistoympäristöille. Flashiä voidaan myös esittää ActiveX:n, tai Javan kautta.

Tärkeimmät ominaisuudet:

Ongelmat:

4.3 Precision Graphics Markup Language (PGML)

Precision Graphics Markup Language on Adoben Postscript ja PDF formaattehin pohjautuva markup-kieli, jonka tarkoituksena on esittää 2d-vektorigrafiikkaa webbiympäristössä. Käytännön tasolle kieli ei vielä ole ehtinyt, mutta tekniikan tukijoiksi ovat ilmottautuneet Adobe, Sun, IBM and Netscape. PGML myöskin toteutuessaan todelliset WYSIWYG (what you see is what you get) ominaisuudet Webbisivuille. Parhaillaan ke [2,3]

Tärkeimmät ominaisuudet:

Ongelmat:

Lähdeluettelo

[1] Macromedia, Macromedia to Make Flash File Format Available As Open Internet Standard, April 14 1998 [12.4.98]
< http://www.macromedia.com/software/flash/open/press/open.html >
[2] Will-Harris D., Vector Graphics for the web - From The Will-Harris Wire, April 27 1998 [18.4.98]
< http://news.i-us.com/wire/html/vector_graphics.htm >
[3] W3C, Precision Graphics Markup Language (PGML), April 10 1998 [18.4.98]
< http://www.w3.org/TR/1998/NOTE-PGML >

Lisätietoja & Linkkejä

Vektorigrafiikka (Flash)

Macromedia
Macromedia Inc. Flashin kehittäneen yhtiön kotisivut.
Macromedia ShockRave
Flashilla toteutettu saitti. Animaatioita, musiikkia, pelejä yms.
Macromedia Flash 3: Flashpad V1.3 - Flash Developers Network
Flash aiheinen ilmoitustaulu, sisältää paljon tietoa Flashistä.
Flash Technical Notes
Erinomainen lähde Flashistä tietoa etsiville, useita linkkejä, FAQeja ja tutoriaaleja.

Virtaava grafiikka

Streaming Video Roundup Evaluations
Vertailuja eri virtaavien videotekniikoiden välillä.
Microsoft Windows Media Technologies
Microsoftin virtaavan median tuotteet
RealNetworks - The Home of Streaming Media
RealNetworksin sivusto.