Kuvaformaatit ja WWW-ympäristö

YLEISTÄ

WWW-sivut koostuvat yleensä tekstistä ja kuvista. Poikkeuksena mainittakoon, että myös ääntä ja videokuvaa voidaan sivuilla esittää, mutta nyt perehdytään ”multimedian” osa-alueista vain staattisiin kuviin – ei animaatioihin tai videoihin.

Kuvien monimuotoisuuden vuoksi on otettu ”yleiseen” Internet-käytäntöön vain muutamia kuvaformaatteja. Kaikki alla mainituista kuvista ovat bittikarttakuvia.

Näistä yleisimpiä kuvamuotoja ovat mm.:

  • GIF (Compuserve Graphics Interchange Format)
  • JPEG/JPG (Joint Photographic Experts Group)
  • Kuvan JPG sekä JPEG:n erot ovat vain tiedostotunnisteen osassa: vrt. htm sekä html. Kyse on vain kirjoitustavasta.
  • PNG (Portable Network Graphics)

Internetissä, eli www-sivujen grafiikassa käytetyt kuvat ovat vielä vuoteen 2008 asti edelleen bittikarttapainotteisia kuvia (ks. yllä). Internet-selaimista kaikki tukevat yllä mainittuja bittikarttakuvia. Vektori, eli laskennallisesti tuotettujen kuvien tukeminen selaimissa on alkanut yleistymään, mutta niiden käyttö on vielä erittäin harvinaista. Vektorigrafiikkakuvia ovat mm. Flash (myös animaatio), sekä SVG.

Tällä hetkellä järkevintä on tukeutua käyttämään omilla WWW-sivuilla niitä bittikarttakuvaformaatteja mitkä ovat levinneet laajimmalle (ks. yllä). Alta löytyy muutama esimerkki ja selite kuvaformaateista.

Kuvankäsittelylinkkejä

Kuvienkäsittelystä suomeksi:
http://www.uku.fi/wwwohjeet/kuvankasittely/

PaintShop Pro:
http://myy.helia.fi/~vanvu/sovellukset/julkaisut/psp/pspoppaita.htm

Gimp:
http://www.gimp.org/~tml/gimp/win32/downloads.html (Gimpin lataussivu)
http://www.gimp.org/ (Gimpin kotisivut)
http://manual.gimp.org/manual/ (Gimpin manuaali)
http://www.lapinlahti.net/rauski/gimp.html (tietoa suomeksi)

GIF (Compuserve Graphics Interchange Format)

GIF on yksi yleisimmistä Internetissä käytetyistä kuvaformaateista. Tänä päivänä käytössä on kahdenlaisia GIF-formaatteja: 1987 julkaistu GIF 87a sekä 1989 julkaistu GIF 89a. Molemmat muodot tukevat LZW-pakkausta, kerroksittaiseen latautumiseen (engl. interlacing tai progressive display), monikuva-ominaisuuden (animaatiomahdollisuus) sekä 256-värisen (8-bittisen) väripaletin. Versio 89a toi mukanaan uutena lisänä läpinäkyvyyden mahdollisuuden, sekä pienimuotoisia muutoksia, kuten kuva-animaatioiden viiveisiin vaikuttavat ominaisuudet sekä muita pieniä muutoksia.

GIF-kuvat pakataan lisenssinalaisella pakkausalgoritmilla nimeltä LZW, mikä on johtanut lievään GIF-kuvien häviävään kannatukseen lisenssimaksujen vuoksi. LZW-kuvanpakkausalgoritmi on nk. häviötöntä pakkausta, missä kuvainformaatiota ei häviä. Ainut kuvanlaatua ”huonontava” tekijä on väripaletin rajallisuus 256 väriin (tai vaihtoehtoisesti 2, 4, 8, 16, 32, 64 tai 128 väriin). Kuvaa pakattaessa sen koko vähenee noin 75%, keskimääräinen pakkaussuhde on 1:4. GIF-kuvan ”pakkaustekniikka” perustuu suurien vaakavärialueiden yhtenäistämiseen/pakkaamiseen. Tämän vuoksi GIF-kuvia kannattaa suosia piirros-, kartta-, kaava- ja mahdollisissa tekstisisältökuvissa (kuten otsikkokuvat tms.). Valokuvien pakkaamiseen GIF-ei ole käytännöllinen ratkaisu, sillä vaakasuunnassa valokuvissa tapahtuu jatkuvasti värivaihdoksia.

Kun kuva pakataan 256 väriin, on jonkinasteista sekoitusta hyvä käyttää – etenkin jos kyseessä ei ole sarjakuvamainen piirros laajoine väripintoineen. GIF-kuvassa käytössä on erilaisia väripisteiden sekoitusmahdollisuuksia -rasterointeja, mitkä tekevät värivaihdoksista pehmeämpiä ja sulavampia. Eri rasterointimahdollisuuksia (engl. dithering) ovat mm. kohina, kuvio ja diffuusio (ks. alla eri kuvien pakkausesimerkkejä).

Läpinäkyvyyden määritelmä 89a versiossa tapahtuu jonkin (tai useamman) värin määrittämisellä läpinäkyväksi. Väri ei voi olla osittain läpinäkyvä, vaan väri on joko täysin läpinäkyvä tai täysin peittävä.

Kerroksittainen latautuminen tarkoittaa käytännössä kuvan vähittäistä latautumista ruudulle (esim. selaimeen). Ulkonäöllisesti se näyttää siltä, kun sivulle ensin tulisi todella huonolaatuinen kuva, mitä pikku hiljaa tarkennettaisiin pikkutarkemmaksi.

Animaatio, eli useamman kuvatason sisällyttäminen kuvaan toimii myös vain 89a versiossa. Liike- tai kuva-animaation tunne synnytetään tallentamalla kuvaan useampi kuvataso, mistä esimerkiksi jokaista tasoa näytetään 1/5 sekuntia. Näin ollen jos kuvassa olisi viisi tasoa, mistä jokaisessa tapahtuu pieni muutos edelliseen, toistaa kuva tämän ”animaation” kerran sekunnissa, ja kuvanvaihdosta syntyy illuusio liikkeestä.

JPEG/JPG (Joint Photographic Experts Group)

JPG tai JPEG, eli Joint Photographic Experts Group on yleisin esimerkiksi valokuvien ja yleisen grafiikan esittämiseen käytetty kuvamuoto. JPG-pakkaajien kehittyneempää algoritmia käytetään yleisesti nykyisin JFIF-formaatissa (JPEG File Interchange Format). JPEG-kuvat ovat omiaan valokuvien, monisävyisten ja värivaiheikkaiden (taivas, vesi, nahka, maisemat, henkilökuvat) kuvien tallentamiseen. JPEG-kuvia ei suositella käytettävän voimakas kontrastisten kuvien (viivakuvat) tai esimerkiksi tekstikuvien (tekstiotsikot) tallentamiseen.

JPEG-kuvan pakkaus teoriassa tapahtuu niin, että kuvan RGB-väridata (Red, Green, Blue) konvertoidaan kirkkaus- (engl. luminance) ja sävy-dataksi (engl. hue). Tämän jälkeen pakkausalgoritmi käy läpi kuvan 8x8 pikselin (eli kuvapisteen) ryhmissä ja laskee koko pikseliryhmän optimaalisen pakkaus/väri/sävy- ja niiden eroavaisuusarvot. Tämän pikseliryhmä-teorian vuoksi JPEG-kuva ei sovellu hyvin käytettäväksi teräväreunaisten kuvien pakkaamiseen.

JPEG-kuvapakkaus on häviöllistä pakkaamista, eli kuvan informaatiota menetetään joka pakkauskerralla. Tämän vuoksi ohjelmissa, mitkä pystyvät tuottamaan JPEG-kuvia on mahdollisuus säätää pakkaustaso, eli paljonko kuvaa pakataan. Kuvaa voimakkaasti pakattaessa tiedoston koko pienenee, kuva menettää eniten kuvainformaatiota ja kuvasta tulee suttuinen. Kuvaa heikosti pakattaessa tiedoston koko on suurempi, kuvainformaatiota häviää vähän ja kuvasta tulee lähes alkuperäisen tasoinen. Lisää pakkaussuhteen muutoksista kuvanlaatuun näet lopussa olevasta kuvataulukosta.

JPEG-kuvaformaatti tukee GIF-kuvien tapaan progressiivista kuvanlatausta, eli kuvan vähittäistä tai kerrosmaista latautumista ruudulle.

PNG (Portable Network Graphics)

GIF-kuvaformaatin pakkausalgoritmin LZW-linsenssiongelman vuoksi kehitettiin PNG-kuva (Portable Network Graphics), mikä on GIF-kuvasta kehittyneempi formaatti. PNG-kuvia tukee kaikki selaimet, mutta Internet Explorer tukee PNG-kuvan läpinäkyvyyskanavaa vasta versiossa 7, mikä 2006 huhtikuussa on jaossa vasta Beta-versiona. WWW-sivuille on mahdollista antaa erikoiskäskyjä, millä saadaan PNG-kuvan erikoisominaisuudet täysin rinnoin käyttöön.

PNG-kuvassa on kolme pääominaisuutta, mitkä ovat etuja GIF-kuvaan verrattaessa:

  • Alpha kanava (eli läpinäkyvyyttä säätelevä kanava)
    • PNG-kuvan aidon alpha-kanavan mukana tulee kuvan RGB (Red, Green, Blue) väripisteille vielä yksi kanava: alpha. Alpha-kanavalla on 254 eri tasoa. Näin ollen mikä tahansa väri voi olla 254 eri voimakkuudella läpinäkyvä. (Joissakin PNG-kuvissa läpinäkyvyystasoja voi olla 65 534, mutta web-käyttöön niitä on 254)
  • Gamma-säätö, eli kuvan kirkkaus (engl. luminance tai brightness).
    • Tämä ominaisuus tulee hyötykäyttöön, kun on tarve tehdä kuvia eri alustoille (esim. PC/Mac). Macintosh ympäristössä tehtyjen kuvien valoisuus voi olla liian tumma PC-maailmaan, ja PC ympäristössä tehtyjen kuvien valoisuus saattaa näyttää liian valoisalta MAC-maailmassa.
  • Kaksitasoinen kerroksittainen latautuminen (engl. interlacing), eli progressiivinen latautuminen
    • Kuva latautuu ”luettavaan” tai selkeään muotoon nopeammin. PNG-kuvan ensimmäinen kerros on 1/64 kuvan datasta, kun GIF-kuvan yksi kerros on 1/8. Näin ollen kun GIF-kuvan ensimmäinen taso on latautunut, on PNG-kuvasta latautunut näytölle jo 4 tasoa. GIF-kuvan ensimmäisen tason latauduttua kuvan pistekoot ovat 1:8, kun PNG-kuvan vastaavassa ajassa saavuttama ”venytys” on vain 1:2.

Näiden lisäksi PNG-kuvassa on tiedostonsiirron yhtenäisyyden tarkistukseen varattua tietoa. Tämä tarkistus on suunniteltu välttämään tiedonsiirrossa tapahtuvia virheitä, ja näin pystytään varmistamaan kokonaan ehjän tiedoston välittäminen.

KUVAVERTAILU

kfrmt1_aku.jpg

ALKUPERÄINEN KUVA

kfrmt1_aku_best.jpg

JPEG-kuva:

- Pakkaustaso huonoin

- Kuvanlaatu paras.

Kuva on selkeä, mutta kookkain.

kfrmt1_aku_med.jpg

JPEG-kuva

- Pakkaustaso keskitaso

- Kuvanlaatu keskitaso.

Kuvan koon ja laadun kompromissi.

kfrmt1_aku_low.jpg

JPEG-kuva

- Kuvanpakkaus tehokkain

- Kuvanlaatu heikoin.

Pieni tiedostokoko, heikko laatu.

kfrmt1_aku_256.gif

GIF-kuva 256 värillä

kfrmt1_aku_128.gif

GIF-kuva 128 värillä

kfrmt1_aku_64.gif

GIF-kuva 64 värillä.

kfrmt1_aku_4.gif

GIF-kuva 4 värillä.

2. VÄRIALA (Liukuvärit, Julisteet, Yleisgrafiikka)

kfrmt1_vari.jpg

ALKUPERÄINEN KUVA

kfrmt1_vari_best.jpg

JPEG-kuva:

- Pakkaustaso huonoin

- Kuvanlaatu paras.

Kuva on selkeä, mutta kookkain.

kfrmt1_vari_med.jpg

JPEG-kuva

- Pakkaustaso keskitaso

- Kuvanlaatu keskitaso.

Kuvan koon ja laadun kompromissi.

kfrmt1_vari_low.jpg

JPEG-kuva

- Kuvanpakkaus tehokkain

- Kuvanlaatu heikoin.

Pieni tiedostokoko, heikko laatu.

kfrmt1_vari_256.gif

GIF-kuva 256 värillä

kfrmt1_vari_128.gif

GIF-kuva 128 värillä

kfrmt1_vari_64.gif

GIF-kuva 64 värillä.

kfrmt1_vari_4.gif

GIF-kuva 4 värillä.

3. VALOKUVAT (Maisemakuvat, Henkilökuvat, Yleisgrafiikka)

kfrmt1_kukka.jpg

ALKUPERÄINEN KUVA

kfrmt1_kukka_best.jpg

JPEG-kuva:

- Pakkaustaso huonoin

- Kuvanlaatu paras.

Kuva on selkeä, mutta kookkain.

kfrmt1_kukka_med.jpg

JPEG-kuva

- Pakkaustaso keskitaso

- Kuvanlaatu keskitaso.

Kuvan koon ja laadun kompromissi.

kfrmt1_kukka_low.jpg

JPEG-kuva

- Kuvanpakkaus tehokkain

- Kuvanlaatu heikoin.

Pieni tiedostokoko, heikko laatu.

kfrmt1_kukka_256.gif

GIF-kuva 256 värillä

kfrmt1_kukka_128.gif

GIF-kuva 128 värillä

kfrmt1_kukka_64.gif

GIF-kuva 64 värillä.

kfrmt1_kukka_4.gif

GIF-kuva 4 värillä.