CMS-suunnitteluopas – Osa 5: Kuvat

Vaikka osa uusimmista Internet-selaimista osaakin näyttää CMYK-pohjaisia kuvia, verkkopalveluissa kuvien väriavaruus on aina muutettava RGB:ksi – ja mieluiten sRGB:ksi, joka on ylivoimaisesti käytetyin väriprofiili. Poikkeuksen tästä luovat vain kuvapankit, joissa kuvat voivat olla raakamuodossa printtikelpoisia ja järjestelmä luo niistä automaattisesti RGB-muotoisen näyttökuvan tarvittaessa.

Tämä artikkeli on osa sarjaa, jossa esittelen vinkkejä kuinka voit suunnitella nettisivuston graafisen ilmeen julkaisujärjestelmän päälle.

Koodissa värit ilmaistaan kuusinumeroisessa heksadesimaalimuodossa, jossa kaksi ensimmäistä lukua ilmoittavat punaisen (R) määrän, kaksi seuraavaa vihreän (G) ja kaksi viimeista sinisen (B) määrän. Esimerkiksi valkoinen on #FFFFFF ja musta #000000. Kaikki heksadesimaalivärit saa helposti kuvankäsittelyohjelmista, joten niitä ei tarvitse itse alkaa laskemaan. Suunniteltavan ilmeen väriavaruuden voi pitää kuvankäsittelyohjelmassa RGB:nä ja antaa verkkopalvelun toteuttajan muuttaa värit heksamuotoon.

Nykyaikaisessa julkaisujärjestelmässä käyttäjän itse järjestelmään tuomat kuvat (kuten tuotekuvat tai kuvagallerian kuvat), pyritään käyttämään tarpeen tullen uudestaan. Jos kuvagalleriassa on esikatselukuvina pienet kuvat ja niitä klikkaamalla saadaan esille iso versio, molemmat kuvat – sekä pieni että iso, on luotu automaattisesti yhdestä alkuperäisestä kuvasta. Näin vältytään tekemästä kuvankäsittelyohjelmassa jatkuvasti erilaisia versioita kuvista. Erilaisia kuvakokoja ja rajauksia voidaan määritellä etukäteen rajattomasti. Myös tietyt filtterit voidaan tuottaa suoraan julkaisujärjestelmässä, kuten terävöitys ja kuvan muuntaminen mustavalkoiseksi.

Käytettävät kuvamuodot

Verkkopalvelun toteuttaja ottaa yleensä vastaan suunnittelijan materiaalin esimerkiksi PDF, AI (Illustrator), INDD (InDesign), PSD (Photoshop), TIF tai JPG-muodoissa, mutta verkkoon menevät kuvatiedostot ovat aina joko JPG, PNG tai GIF-muotoisia. Tiedostot, jotka siirretään MACista PC:lle, kannattaa tarkastaa, että niissä on jokin edellä mainittu tai tiedostomuotoa vastaava pääte, esimerkiksi ”kuva.jpg”. PC tunnistaa tiedostomuodon tuon päätteen perusteella.
Verkkoon menevien kuvien – kuten muidenkin tiedostojen – nimeämisessä kannattaa välttää tyhjiä välilyöntejä ja erikoismerkkejä kuten skandinaavisia aakkosia ä, ö ja å. Hyvä tiedostonimi olisi silloin esimerkiksi ”tama-on-hyva-tiedostonimi.jpg”.

Mainitsin asiasta jo neljännessä luvussa, mutta kertaan sen vielä. Printtitoteutuksessa tärkeät painoresoluutiot eivät päde verkossa. Kuvan resoluutio voi olla esimerkiksi 300, 150 tai 72 ppi, mutta sillä ei ole mitään merkitystä sen kanssa, minkä kokoisina se näkyy nettisivuilla. Ainoa tärkeä tieto on kuvan pikselimitat. Eli kuvia ei tarvitse muuttaa 72 ppi:n resoluutioon, jos ne menevät verkkosivuille.

Vaikka suunnittelijan ei välttämättä tarvitse itse tallentaa verkkosivuston kuvia lopullisessa muodossa, hänen on hyvä tietää millaisia ominaisuuksia niissä on:

JPG (JPEG)

JPG on luultavasti kaikkein tunnetuin kuvamuoto ja se on myös edelleen yksi käytetyimpiä verkkografiikan muotoja. JPG on pakkaava kuvamuoto, joka voi suurella pakkausasteella pienentää kuvan kokoa hyvinkin paljon. Ikävä puoli tässä on kuitenkin se, että mitä suurempi pakkaus on käytössä, sen huonommaksi kuvan laatu muuttuu. Yleensä sopiva pakkaamisen aste löydetään kokeilemalla. Valokuvat ja joissain tapauksissa  väriliukuja sisältävät kuvat sopivat parhaiten tallennettaviksi JPG-muotoon.

GIF

GIF on häviötön kuvan tallennusmuoto, joka pystyy näyttämään samanaikaisesti vain 256 väriä (JPG kykenee näyttämään 16 miljoonaa väriä). Tämän vuoksi GIF ei ole hyvä vaihtoehto valokuvien tallennukseen, mutta esimerkiksi logojen, ikonien sekä muiden pienimuotoisten grafiikoiden tallennusmuotona se on hyvä. Lisäksi GIF-muodossa kuva voidaan tallentaa rajoitetusti syvättynä. Tällä tiedostomuodolla on myös mahdollista tallentaa pieniä animaatioita (bannerit).

PNG

PNG on periaatteessa samankaltainen muoto kuin GIF. Sen 8-bittisellä muodolla voi tallentaa erilaisia grafiikoita paremmalla pakkauksella kuin GIF:ssä. PNG:n 32-bittinen muoto tukee myös edistynyttä syväystä, joka mahdollistaa osittain läpinäkyvät ja pehmeät reunat. Tämä on erittäin käyttökelpoista, kun syvätty kuva sijoitetaan taustalle, joka ei ole tasavärinen. 32-bittinen kuva kylläkin tallentuu melko raskaana, joten sen käyttöä kannattaa harkita, jos kuva on iso. PNG-muoto on pikkuhiljaa syrjäyttämässä GIF-muodon. Tämän sivuston yläreunan logo on tallennettu syvättynä PNG:nä, jonka reunat on häivytetty.

Siirry lukemaan seuraavaa artikkelia: Osa 6: Typografia

Kirjoita kommentti