Digitaalinen kuva?
Digitaalinen kuva ei ole vain kuva – se on tarkasti rakentunut kokonaisuus miljoonista pienistä osista, pikseleistä, jotka yhdessä luovat sen mitä silmäsi näkee. Jokainen pikseli kantaa mukanaan väriä, valoa ja informaatiota, ja niiden järjestys määrittää kuvan tarkkuuden, laadun ja ilmeen. Mutta yhtä tärkeää kuin pikselit itse, on se, miten kuva tallennetaan: valinta häviöllisen ja häviöttömän tiedostomuodon välillä vaikuttaa suoraan kuvan laatuun, kokoon ja käyttötarkoitukseen. Tässä artikkelissa pureudutaan digitaalisen kuvan perusteisiin – opit ymmärtämään pikselin rakenteen, kuvan muodostumisen sekä keskeisimmät tiedostomuodot ja sen, milloin mitäkin kannattaa käyttää.
Jokainen pikseli sisältää värin
Digitaalinen kuva muodostuu pikseleistä eli pienistä neliömäisistä pisteistä, jotka ovat niin pieniä ja tiheästi vierekkäin, että ne näyttävät yhdessä eheältä kuvalta. Jokainen pikseli sisältää yksittäisen värin – kun miljoonat pikselit asettuvat vierekkäin, silmämme hahmottavat ne valokuvana, piirroksena tai graafisena kuviona.
Pikselin väri määrittyy näyttölaitteissa RGB-järjestelmän (Red, Green, Blue) avulla, jossa kullekin perusvärille annetaan arvo välillä 0–255. Näiden yhdistelmä tuottaa yli 16 miljoonaa erilaista värisävyä. Väri voidaan ilmaista myös HEX-koodina, joka on yleinen tapa kuvata värejä esimerkiksi verkkosivujen suunnittelussa. HEX (lyhenne sanasta hexadecimal, eli heksadesimaali) koostuu kuudesta merkistä, esimerkiksi #FF5733.
HEX-koodissa kaksi ensimmäistä merkkiä edustavat punaisen (R) voimakkuutta, kaksi seuraavaa vihreän (G) ja viimeiset kaksi sinisen (B). Arvot esitetään 16-järjestelmässä (0–9 ja A–F), jossa 00 tarkoittaa nollaa ja FF maksimia eli 255 desimaalina. Esimerkiksi koodi #000000 on musta (ei väriä), ja #FFFFFF on valkoinen (täysi arvo kaikissa väreissä).
Kun siis katselet kuvaa näytöllä, katsot todellisuudessa miljoonia pieniä värillisiä neliöitä – ja jokainen niistä kertoo oman pienen osansa kokonaisuudesta.
Tiedostomuodot
Kuvien perinteisiä tiedostomuotoja ovat .jpg (jpeg), .png ja .gif. Näiden rinnalle on viime vuosina noussut uudempia formaatteja, kuten Googlen kehittämä WebP sekä vähemmän käytetyt JPEG 2000 ja JPEG XR, jotka pyrkivät parantamaan kuvanlaatua ja pienentämään tiedostokokoa.
Digitaalista kuvaa ei kuitenkaan valita pelkästään sen perusteella, miltä se näyttää, vaan myös sen mukaan, mihin käyttöön kuva on tarkoitettu. Sama kuva voi toimia hyvin painotuotteessa, mutta olla liian raskas verkkosivulle, tai toisin päin.
JPG (JPEG) – Pakattu perinteinen
.jpg tai .jpeg on yksi maailman käytetyimmistä kuvaformaateista. Se on häviöllinen formaatti, eli kuvan pakkaamisessa menetetään jonkin verran yksityiskohtia ja väritarkkuutta, mutta vastineeksi tiedostokoko pysyy pienenä.
JPG soveltuu erityisesti valokuville ja muille yksityiskohtaisille kuville, joissa ei tarvita läpinäkyvyyttä. Formaatti tukee 24-bittisiä värejä ja mahdollistaa pakkausasteen säätelyn: suurempi pakkaus pienentää tiedostoa, mutta heikentää laatua.
JPEG on erinomainen valinta verkkosivuille ja sähköpostiin, kun halutaan hyvännäköinen kuva mahdollisimman pienessä koossa. Kuvia käytettäessä verkossa on kuitenkin hyvä huomioida, että liian suuri resoluutio kasvattaa tiedostokokoa turhaan. Usein kuva kannattaa skaalata valmiiksi siihen kokoon, jossa se esitetään, jolloin sivun lataus nopeutuu merkittävästi ilman näkyvää laadun heikkenemistä.
JPEGin heikkouksia ovat pakkauksesta johtuvat häiriöt (kompressioartefaktit) sekä se, ettei formaatti tue läpinäkyvyyttä. Lisäksi samaa JPG-kuvaa ei kannata tallentaa uudelleen useita kertoja, sillä jokainen tallennus heikentää laatua hieman lisää.
PNG – Läpinäkyvyyttä
Jos kuva sisältää läpinäkyvyyttä, oikea tiedostomuoto on .png. PNG on häviötön kuvaformaatti, eli se säilyttää alkuperäisen kuvanlaadun pakkaamisesta huolimatta. Tämän vuoksi PNG-kuvista voi tulla suurikokoisia, erityisesti jos kuva on monivärinen tai yksityiskohtainen.
PNG sopii erityisesti tilanteisiin, joissa kuvan taustan on oltava läpinäkyvä, kuten esimerkiksi käyttöliittymien grafiikoissa, logoissa tai muissa verkkosivujen elementeissä. PNG tukee myös 24-bittistä väriavaruutta ja 8-bittistä alfa-kanavaa, mikä mahdollistaa pehmeät läpinäkyvyysliukumat ja tarkan visuaalisen lopputuloksen.
WebP – Verkkosivujen erityisyys
.webp on Googlen kehittämä moderni kuvaformaatti, joka julkaistiin vuonna 2010. Se tukee sekä häviöllistä että häviötöntä pakkausta ja mahdollistaa läpinäkyvyyden sekä animaatiot pienemmässä tiedostokoossa kuin GIF, JPG tai PNG.
WebP tarjoaa erinomaisen kompromissin kuvanlaadun ja tiedostokoon välillä, minkä vuoksi se on yleistynyt erityisesti verkkokäytössä. Käytännössä sama kuva voidaan tallentaa huomattavasti kevyempänä ilman silmin havaittavaa laadun heikkenemistä, mikä parantaa verkkosivujen latausnopeutta ja käyttökokemusta.
Selaimista kaikki modernit vaihtoehdot tukevat WebP-formaattia. Tuki puuttuu käytännössä vain Internet Explorerista sekä joistakin vanhemmista selainversioista. Tästä syystä verkkosivujen toteutuksessa voidaan joskus käyttää rinnakkain useita formaatteja, jolloin selain valitsee automaattisesti parhaiten tukemansa vaihtoehdon.
GIF – Animaatiot
.gif on vanha mutta yhä laajalti tuettu kuvaformaatti. Sen etuna on laaja yhteensopivuus lähes kaikkien grafiikkaohjelmien ja selainten kanssa. GIF tukee häviötöntä pakkausta, mutta vain 256 väriä, mikä rajoittaa sen käyttöä valokuvissa.
GIF soveltuu parhaiten yksinkertaisille, teräväreunaisille kuville, kuten kaavioille ja kuvakkeille. Sen merkittävin ominaisuus on kuitenkin animaatiotuki: GIF pystyy toistamaan yksinkertaisia, silmukkaan asetettuja animaatioita ilman erillistä videosoitinta.
Vaikka GIF on edelleen käytössä erityisesti verkon reaktiokuvissa ja pienissä animaatioissa, sitä on monessa tilanteessa korvannut tehokkaampi WebP, joka tuottaa saman lopputuloksen huomattavasti pienemmässä tiedostokoossa.
GIF-animaation muuntaminen WebP-muotoon
GIF-animaatio voidaan luoda Photoshopilla mutta sitä ei voi tallentaa WebP-muotoon. Sen voi kuitenkin muuntaa WebP-animaatioksi joko erillisellä ohjelmistolla tai suoraan selaimessa toimivilla verkkotyökaluilla. Muunnos on usein hyödyllinen, sillä WebP pystyy säilyttämään animaation samalla kun tiedostokoko pienenee ja värintoisto paranee.
Yksi helppo tapa tehdä muunnos on käyttää verkkopohjaista työkalua, kuten Ezgif. Palvelussa GIF-tiedosto ladataan selaimeen, jonka jälkeen se voidaan muuntaa animoiduksi WebP-tiedostoksi muutamalla klikkauksella ilman erillistä ohjelmistoa. Muunnoksen yhteydessä voidaan myös säätää pakkausta ja optimoida lopputulosta käyttötarkoituksen mukaan.
WebP-animaatiot tarjoavat usein selvästi pienemmän tiedostokoon verrattuna GIF-muotoon, jopa kymmeniä prosentteja pienempänä, samalla kun kuvanlaatu säilyy parempana ja värit tarkempina. Tämän vuoksi WebP on monessa tapauksessa suositeltava vaihtoehto erityisesti verkkosivujen suorituskyvyn kannalta.
Muunnoksessa on kuitenkin hyvä huomioida, että lopputulos riippuu alkuperäisen GIF:n laadusta, kuvien määrästä sekä valituista pakkausasetuksista. Joissakin tapauksissa animaation nopeus tai tiedostokoko voi muuttua, joten lopputulos kannattaa aina tarkistaa ennen käyttöä.
Photoshopin tiedostomuodot
Adobe Photoshopissa on käytössä kaksi tiedostomuotoa, jotka on tarkoitettu ennen kaikkea Photoshopin sisäiseen käyttöön. Niitä käytetään lähinnä muokattavien projektien tallentamiseen, ei varsinaiseen jakeluun. Kun kuva halutaan julkaista verkossa tai siirtää muualle, siitä tallennetaan yleensä erillinen versio perinteisissä kuvamuodoissa kuten JPG-, PNG- tai WebP-muotoon.
Photoshop-työskentelyssä onkin tyypillistä, että sama kuva on olemassa kahdessa muodossa:
- Alkuperäinen projektitiedosto, jossa kaikki muokkaukset säilyvät
- Erikseen tallennettu, optimoitu versio lopullista käyttöä varten.
PSD – Photoshopin perustyötiedosto
.psd on Adobe Photoshopin oma tallennusmuoto, joka säilyttää kaikki kuvan muokkaustiedot: tasot, maskit, säätökerrokset, polut, tekstielementit ja efektit. Se on häviötön tiedostomuoto, jota käytetään työskentelyvaiheessa silloin, kun kuvaan halutaan palata myöhemmin muokattavassa muodossa.
PSD-tiedosto voi sisältää myös Smart Object -kerroksia, linkitettyjä tiedostoja sekä useita artboardeja eli piirtoalueita. Koska tiedosto säilyttää kaiken muokkausdatan, sen koko voi kasvaa nopeasti suureksi, erityisesti monikerroksisissa projekteissa.
PSD ei ole tarkoitettu suoraan julkaistavaksi, vaan se toimii eräänlaisena “työtiedostona”. Lopullinen kuva tallennetaan erikseen sopivaan tiedostomuotoon käyttötarkoituksen mukaan. Tämä mahdollistaa sen, että alkuperäinen tiedosto säilyy muuttumattomana ja muokattavana, vaikka siitä tuotetaan useita eri versioita.
PSB – Suuret projektit
.psb (Photoshop Big) on Adobe Photoshopin tiedostomuoto erittäin suurikokoisille projekteille. Se toimii kuten PSD, mutta tukee huomattavasti suurempia tiedostoja: jopa 300 000 × 300 000 pikselin kuvia ja tiedostokokoja, jotka ylittävät PSD-muodon 2 gigatavun rajan.
PSB säilyttää kaikki samat ominaisuudet kuin PSD – tasot, maskit, säätökerrokset, efektit ja vektoripolut – mutta on suunnattu erityisesti suurikokoisiin kuviin, kuten painotuotteisiin, suurikokoisiin bannereihin tai erittäin yksityiskohtaisiin digimaalauksiin.
PSB-tiedostoja ei kuitenkaan tueta kaikissa ohjelmissa, eikä niitä voi käyttää suoraan verkkokäytössä. Ne ovat työskentelyvaiheen muotoja tilanteissa, joissa PSD:n tekniset rajat tulevat vastaan.
Raakakuvamuodot
Raakakuvamuodot, kuten RAW ja TIFF, poikkeavat perinteisistä kuvatiedostoista siinä, että ne on suunniteltu ensisijaisesti kuvanlaadun ja muokattavuuden säilyttämiseen, ei tiedostokoon minimointiin. Näitä formaatteja käytetään erityisesti valokuvauksessa ja kuvankäsittelyn työvaiheissa, joissa halutaan säilyttää mahdollisimman paljon alkuperäistä kuvadataa.
TIFF on häviötön tiedostomuoto, jota käytetään usein kuvankäsittelyn välimuotona tai valmiina korkealaatuisena tiedostona. TIFF tukee suurta bittisyvyyttä, useita värimalleja sekä kerroksia, ja se säilyttää kuvanlaadun ilman pakkaushäviöitä. Tämän vuoksi TIFF on yleinen valinta esimerkiksi painotuotteissa ja arkistoinnissa. Vaikka TIFF tarjoaa erinomaisen laadun, sen tiedostokoko on usein suuri, minkä vuoksi sitä ei käytetä esimerkiksi internetissä. Käytännössä TIFF sijoittuu työskentelyketjussa RAW:n ja kevyempien jakelumuotojen, kuten JPG:n ja PNG:n, väliin.
Kameravalmistajien RAW-tiedostot
Useimmat järjestelmäkamerat ja muut edistyneemmät kamerat tallentavat RAW-kuvat omissa valmistajakohtaisissa tiedostomuodoissaan. Näitä ovat esimerkiksi Canonin .CR2 ja .CR3, Nikonin .NEF sekä Sonyn .ARW. Vaikka tiedostopäätteet eroavat toisistaan, niiden perusajatus on, että ne tallentavat mahdollisimman paljon alkuperäistä kuvadataa suoraan kameran kennolta.
RAW ei ole yksittäinen tiedostomuoto, vaan yleisnimitys kameran tallentamalle raakadataksi. RAW-tiedosto ei ole sellaisenaan valmis kuva, vaan se vaatii aina käsittelyn erillisessä ohjelmassa ennen käyttöä. Käytännössä RAW toimii digitaalisena “negatiivina”, josta lopullinen kuva kehitetään.
Valmistajakohtaiset muodot voivat sisältää myös kamerakohtaista tietoa, kuten objektiivin asetuksia, väriprofiileja ja muita metatietoja, joita kuvankäsittelyohjelmat hyödyntävät kuvan avaamisen yhteydessä. Tämä voi vaikuttaa siihen, miltä kuva näyttää heti avattaessa, vaikka varsinainen kuvadata pysyy muokattavana.
Haasteena näissä formaateissa on yhteensopivuus. Kaikki ohjelmat eivät tue kaikkia RAW-muotoja suoraan, ja tuki voi riippua ohjelmiston versiosta. Tämän vuoksi kuvia saatetaan joskus muuntaa yleisempään DNG-muotoon, joka on Adoben kehittämä avoimempi raakakuvamuoto. Käytännössä kameran omat RAW-muodot ovat kuvausvaiheen tiedostoja, joita käytetään silloin, kun halutaan maksimaalinen kuvanlaatu ja muokkausvara. Lopullinen kuva tallennetaan lähes aina erilliseen formaattiin sen mukaan, mihin käyttöön se on tarkoitettu.
RAW-kuvat avautuvat Adobe Photoshopissa ensin Camera Raw -toiminnossa, jossa niitä voidaan säätää ennen varsinaista avaamista Photoshopiin jatkokäsittelyä varten.
Resoluutio ja pikselit
Digitaalisessa kuvassa kaikki rakentuu pikseleistä eli yksittäisistä kuvapisteistä. Kuvan resoluutio ilmoitetaan pikseleinä, esimerkiksi 1920 × 1080 (HD-resoluutio), joka tarkoittaa kuvan leveyttä ja korkeutta pikseleissä.
On tärkeää ymmärtää, että verkkokäytössä ratkaisevaa ei ole kuvan “painoresoluutio” (dpi tai ppi), vaan nimenomaan pikselimitat. Näyttölaitteet esittävät kuvat pikseleinä, joten esimerkiksi 1920 × 1080 pikselin kuva näkyy samankokoisena riippumatta siitä, onko sen resoluutioksi asetettu 72 ppi tai 300 ppi.
Kuvan fyysiset mitat kannattaa aina sovittaa siihen käyttötarkoitukseen, johon kuva on menossa.
Verkkosivuilla liian suuri kuva hidastaa sivun latautumista ilman näkyvää hyötyä. Siksi kuva kannattaa pienentää valmiiksi oikeaan kokoon ennen tallennusta. Usein esimerkiksi 1920 pikseliä leveä kuva riittää hyvin koko näytön levyiseen esitykseen.
Tulosteissa ja painotuotteissa kuvan koko kannattaa määrittää painettavan tai tulostettavan (esim. A4) mittojen mukaisesti sen kokoisena, kuin se julkaisuun tulee käytettäväksi.
Photoshopissa kuvan koon voi tarkistaa käyttöliittymän vasemmasta alakulmasta, ja kuvan kokoa voidaan muuttaa Image-valikon Image Size -toiminnolla. Samassa näkymässä voidaan hallita sekä pikselimittoja että resoluutiota, mutta verkkokäytössä huomio kannattaa kohdistaa ennen kaikkea pikselikokoon.
Kun kuva valmistellaan verkkoon, se tallennetaan usein erillisellä vientitoiminnolla (Save for Web), jossa tiedostokokoa ja laatua voidaan optimoida. Tavoitteena on löytää tasapaino kuvan laadun ja tiedoston koon välillä, jotta kuva näyttää hyvältä mutta latautuu nopeasti.
On hyvä huomioida, että kaikki tiedostomuodot eivät ole suoraan saatavilla Save for Web -toiminnossa. Esimerkiksi WebP voidaan tallentaa Photoshopissa uudemmissa versioissa Export As -toiminnon kautta tai lisäosien avulla. Tarvittaessa kuva voidaan muuntaa WebP-muotoon myös erillisillä työkaluilla, kuten XnConvert-ohjelmalla.
Lue lisää kuvan optimoinnista verkkosivuille artikkelista WordPress/5.1. Kuvat sivustolla.
Vaikka Photoshopin uudempi Export As -toiminto tukee moderneja tiedostomuotoja, Save for Web tarjoaa usein tarkemmat säätömahdollisuudet kuvan optimointiin. Erityisesti silloin, kun kuvia on paljon ja tiedostokoon minimointi on tärkeää, Save for Web voi tuottaa kevyempiä lopputuloksia.
Oma työnkulku verkkosivuille
Itse käytän verkkosivuilla kuvien optimointiin Photoshopin Save for Web -toimintoa. Käsittelen kuvat yksitellen ja tallennan ne tilanteesta riippuen joko .jpg- tai .png-muotoon. PNG soveltuu erityisesti grafiikoihin ja kuviin, joissa tarvitaan läpinäkyvyyttä tai teräviä reunoja, kun taas JPG toimii usein paremmin valokuvissa pienemmän tiedostokoon ansiosta.
Kun tietty määrä kuvia on käsitelty, suoritan massa-ajon muuntaen kuvat .webp-muotoon XnConvert-työkalulla. Muunnoksen yhteydessä voidaan asettaa kuville esimerkiksi tavoiteltu laatu tai maksimitiedostokoko, jolloin lopputulos pysyy kevyenä ja soveltuu hyvin verkkokäyttöön.
Paras mahdollinen kuvanlaatu saavutetaan, kun lopullinen pakkaus tehdään häviöttömästä lähdetiedostosta. Käytännössä JPG toimii kuitenkin usein riittävän hyvänä lähteenä verkkokäytössä, erityisesti kun kuvamäärä on suuri ja työnkulun tehokkuus korostuu.