Web-suunnittelussa värien, web-turvallisten värien, värimaailmojen ja väriprofiilien kanssa työskenteleminen aiheuttavat joskus harmaita hiuksia suunnittelijoille. Suunnittelua ja rakentamista rajaavat myös monibittisen läpinäkyvyyskanavan toimimattomuus vanhemmilla selaimilla. Seuraavassa artikkelissa käsittelemme värien ja kuvaformaattien kanssa työskentelyn termit ja periaatteet.

RGB ja Web-safe colors

RGB (Red Green Blue) on näyttöpäätteille tarkoitettu värimaailma, joka koostuu kolmen väriarvon mixistä (punainen, vihreä, sininen). Näiden värien arvot määrittelevät värin ja sen sävyn. RGB:ssä määritellään jokaiselle värille oma arvo, esim. valkoinen: R=[255], G=[255], B=[255]. Web-käytössä värin määrittelee kuusinumeroinen heksaluku, jonka etumerkkinä on ristiaita esim. #FFFFFF (valkoinen). Web-sivustoilla yleensä suositaan heksamuotoa RGB värimäärittelyyn.

Web-safe värejä on yhteensä 216 kappaletta. Ne ovat muodostettu aikana, jolloin tietokoneiden näytöt tukivat vain 256 eri väriä. Photoshopin värieditorissa on oma optio web-väreille (web colors). Näiden värien käytön etuna on toimintavarmuus, sillä normaalisti värien sävyt voivat vaihdella radikaalisti eri näytöillä. Nyrkkisääntönä tuleekin muistaa aina, että näkemäsi väri ei ole absoluuttinen totuus, vaikka näyttö olisi hyvin kalibroitu. Siksi visuaalisessa suunnittelussa työn testaaminen useilla eri näytöillä on suotavaa.

Väriprofiilien käyttö

Kuvankäsittelyssä väriprofiililla tarkoitetaan näyttökohtaista väriavaruuden määrittelyä. Yleisin käytetty väriprofiili on sRGB, joka on myös standardi web-suunnittelussa. Kaikki kuvat web-työskentelyssä tuleekin tallentaa tähän muotoon. Konvertointi eri väriavaruudesta toiseen muokkaa lopputulosta, on siis suositeltavaa käyttää oikeaa väriprofiilia työn alusta lähtien.

Huomioi myös, että esim. PhotoShop-kuvankäsittelyohjelmassa on kaksi vaihtoehtoista tapaa muokata väriprofiilia. Toinen on profiilin vaihto (Assign Profile) ja toinen profiiliin konvertointi (Convert to Profile). Profiilin vaihto säilyttää erilliset kerrokset (Layers) tiedostossa, mutta nurjana puolena värien sävyt voivat muuttua hurjasti. Profiiliin konvertointi ei säilytä tasoja, mutta lopputulos vastaa enemmän alkuperäistä. Valinnat löytyvät Edit-valikosta.

Läpinäkyvyys

Kuvien läpinäkyvyyden mahdollistaa nk. läpinäkyvyyskanava (Alpha channel, suomeksi Alfakanava). Läpinäkyvyys tuo uusia ulottuvuuksia verkkosivustojen suunnitteluun, mutta toisaalta niiden käyttö ei ole ongelmatonta. Läpinäkyvyyttä tukevia yleisimpiä käytössä olevia kuvaformaatteja webissä ovat PNG (Portable Network Graphics) ja GIF (Graphic Interchange Format). PNG-kuvaformaatista on olemassa kaksi erilaista tallennusversiota: 8-bit ja 24-bit.

PNG on GIF-formaattia kehittyneempi, mutta se ei sisällä mahdollisuutta animaatioon. Se ei kuitenkaan haittaa, koska animaation tekoon on parempia tekniikoita, kuten Flash ja Javascript. PNG-kuvat mahdollistavat hyvin sulavien ja näyttävien läpinäkyvyysefektien toteutuksen. Kuvan tiedostokoko voi tosin olla päätä huimaava. PNG-kuvat tukevat myös laajempaa väriavaruutta verrattuna GIF-kuviin. GIF-formaatti soveltuukin parhaiten suurten yksiväristen pintojen tallennukseen.

IE-6 ongelmat

Suurin ongelma läpinäkyvyyskanavien käytössä piilee selaintuessa. Miljoonat ihmiset käyttävät vielä Internet Explorer 6 -selainta, joka ei tue PNG-formaatin (24-bit) Alfakanavaa. Tämä asettaa haasteita sivuston rakentamiselle. Usein paras ratkaisu on tehdä IE 6:lle omat vähemmän näyttävät, mutta toimivat kuvaratkaisut tyylitiedoston avulla.

Verkko tarjoaa myös monta IE 6 -korjausmenetelmää, jossa läpinäkyvyysefekti saavutetaan Javascript-koodilla. Tämä ratkaisu ei kuitenkaan kata kaikkia IE 6:n puutteita, ja lisäksi aiheuttaa ylimääräistä harmia sivuston suunnittelijalle. Siksi on tärkeää sivuston esisuunnittelussa analysoida kohderyhmä ja IE 6 -selaimen prosentuaalinen osuus. Tällöin tietää onko IE 6 -selaimen tukeminen järkevää vai ei.