Käytä oikeita kuvamuotoja kotisivuillasi (kuvaformaatit)

Kerron lyhyesti kuvaesimerkein muutamista kuvamuodoista. Kuvamuodot ja kuvamuotojen erot on hyvä tietää vähintään pintapuolisesti, sillä oikean kuvamuodon valinta on tärkeää kun mietit parasta ratkaisua tietyn asian esittämiseen www-sivuillasi.

Jos kuvaformaateista lukeminen tuottaa tuskaa, niin varmin tapa on esittää kuvat PNG-tiedostoina. Selaimet ja päätelaitteet tukevat niitä, niiden kuvanlaatu säilyy ja kuvat tukevat läpinäkyvyyttä. Miinuksena mainittakoon se, että PNG-kuvat vievät enemmän tilaa kuin JPG-kuvat. Pienestä koosta jättimäisiin kuviin erilaiset vektorikuvat voidaan esittää www-sivuilla SVG-kuvina (liput, graafit, havainnekuvat, jne).

Www-sivut koostuvat pääsääntöisesti tekstistä ja kuvista. Myös ääntä ja videokuvaa voidaan sivuilla esittää, mutta tässä artikkelissa kerron kuvatiedostoista – en animaatioista, äänistä tai videoista. Kuvien monimuotoisuuden vuoksi (eri ohjelmilla omat kuvamuodot) on otettu yleiseen Internet-käytäntöön vain muutamia kuvaformaatteja.

Näistä yleisimpiä kuvamuotoja ovat:

GIF (Compuserve Graphics Interchange Format)

JPEG/JPG (Joint Photographic Experts Group)

Kuvan JPG sekä JPEG:n erot ovat vain tiedostotunnisteen loppuosassa.

PNG (Portable Network Graphics)

SVG (Scalable Vector Graphics)

Internetissä, eli www-sivujen grafiikassa käytetyt kuvat ovat edelleen bittikarttapainotteisia kuvia (yllä kohdat 1-3). Internet-selaimista (Internet Explorer, Edge, Firefox, Safari, Chrome, Opera, yms) kaikki tukevat yllä mainittuja bittikarttakuvia. Vektori, eli laskennallisesti tuotettujen kuvien käyttö on yleistä esimerkiksi Wikipedian eri esityskuvissa. Vektorigrafiikkakuvia ovat mm. SVG ja alati harvinaistuva Flash (SWF).

Tällä hetkellä kätevintä on käyttää omilla www-sivuilla bittikarttakuvaformaatteja, kuten PNG ja JPG, sillä niiden muokkaus, luominen ja hallinta on helppoa. Lue myös artikkelini helppokäyttöisisten kotisivujen tekemisestä.

Sivun lopusta löydät kuvitettuja esimerkkejä siitä, miten JPG ja GIF-kuva eroavat toisistaan. JPG ja PNG kuvamuotojen erot ovat lähinnä pakkauksessa ja läpinäkyvyydessä.

Alla yksityiskohtaisemmat selitteet kuvaformaateista.

Lue lisää bittikarttakuvista (Wikipedian artikkeli bittikarttagrafiikasta»)) ja vektorikuvista (Wikipedian vektorigrafiikka-artikkelista »).

Kuvamuotojen erot

1. 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ä.

Wikipedian GIF-artikkelin » kautta löytänet lisää tietoja.

2. 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 8×8 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.

Wikipedian JPG-artikkelin » kautta voit löytää lisää tietoa aiheesta.

3. 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 modernit selaimet.

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.

Wikipedian PNG-artikkelin » kautta voit löytää lisää luettavaa aiheesta.

4. SVG (Scalable Vector Graphics)

Helpoin arkivertaus voi olla PDF-tiedostoon, missä tekstit ovat teräviä ja suurennettavissa olevia aitoja tekstejä (ei kuvia): sisällöstä voidaan hakea tietoa ja tiedosto voi koostua eri elementeistä (viivat, tekstit, kuvat, yms).

Merkittävin ero SVG-kuvalla edellisiin on se, että kuva tuotetaan laskennallisesti.

Kuva on siis vektorikuva (lue lisää Wikipedian vektorigrafiikka-artikkelista ») ja se säilyttää laatunsa sitä suurennettaessa – eikä vie tilaa kuin murto-osan bittikarttakuviin nähden. Kuvamuoto on W3C:n standardoima XML-merkintäkielen kuvaformaatti. Selaimista pääosa (Mozilla Firefox, Internet Explorer, Microsoft Edge, Google Chrome, Safari, Opera) osaa piirtää SVG-kuvat käyttäjän näytölle, kunhan käytössäsi on tuore versio selaimesta.

SVG-kuvia voi muokata vaikka tekstieditorilla tai vektorigrafiikkaan tarkoitetulla ohjelmalla (Inkscape, Adobe Illustrator, Adobe Flash, Corel Draw, yms).

Tiedoston pakkaaminen voidaan sen rakenteen vuoksi tehdä häviöttömästi.

Voit lukea lisää SVG-kuvamuodosta mm. Wikipedian SVG-artikkelista ».