Koolla on väliä – digikuvat op­ti­moi­mal­la luot miel­lyt­tä­vän kä­vi­jä­ko­ke­muk­sen

On hyvä perusteellisesti ymmärtää ne rakennuspalikat, joista kuva muodostuu, jotta jokainen voi tehdä parempia valintoja suunnitellessaan sivustonsa kuvitusta. Digitaalisen kuvan koolla on väliä – se vaikuttaa paitsi sivuston latautumisnopeuteen ja hakukonenäkyvyyteen, myös kävijäkokemukseen.

Bittejä vai vektoreita

Aloitetaan perusteista; otetaan suurennuslasi käteen ja tutkaillaan, mistä digitaalinen kuva ylipäätään rakentuu. Karkeasti sanottuna neliöistä tai kaarista. Aloitetaan neliöistä.

Kaikki tavanomaiset kuvatiedostot, kuten jpg, png, gif, tiff, raw-kuva, ovat bittigrafiikkakuvia. Bittigrafiikka on karttamainen kuva, joka muodostuu tuhansista pienistä neliöistä eli pikseleistä. Jokainen neliö on täytetty yhdellä yksittäisellä värillä. Väri voi olla jokaisessa pikselissä eri kuin viereisellä pikselillä, jolloin väriavaruus on hyvin laaja. Vierekkäisillä pikseleillä voi myös olla sama väri – useat samanväriset pikselit muodostavat yhtenäisen värialueen. Kun erivärisiä pikseleitä ladotaan satoja ja tuhansia vierekkäin ja päällekkäin, muodostuu niistä tarkkoja ja laajojakin kuvia. Mitä enemmän pikseleitä kuva sisältää, sitä tarkempaa kuvaa voidaan esittää.

Yksi pikseli voi siis sisältää vain yhtä väriä. Jos pikseleistä muodostuneen kuvan pikselikokoa kasvatetaan ylöspäin, täytyy jokainen pikseli monistaa eli yksi värialue muuttuu isommaksi. Kokonaisuudessaan näyttää siltä, että kuvassa on isoja, raemaisia värialueita. Yksittäiset pikselit eivät siis kasva, vaan vierekkäiset pikselit toistavat samaa väriä, tehden värialueesta laajemman.

Vektorigrafiikka taas on kuva, joka muodostuu ankkuripisteistä, pisteiden välisistä janoista ja niiden suhteista toisiinsa. Vektorikuva on siis käytännön tasolla matemaattinen kaava. Kuva muodostuu ankkuripisteistä, jotka yhdistetään toiseen janan avulla. Janan ei ole pakko olla suora, vaan sitä voidaan kaartaa: pisteen z ja pisteen y välissä on jana, jonka kaari taipuu x-astetta. Esimerkiksi neliö muodostetaan tyypillisesti neljästä ankkuripisteestä, jotka yhdistyvät suoralla janalla. Kun jokaista janaa kaartaa yhtä paljon, muodostuu neliöstä pallo. Jos yksi ankkuripiste poistetaan, muuttuu neliö suorakulmaiseksi kolmioksi. Kun pisteitä lisätään ja janojen kaaria käännetään, voidaan piirtää esimerkiksi sombrero-hattuinen manaatti, joka kelluu läppäri sylissään – piirtämäni maskotti Mañana Mañana -tiimillemme.

Koska kuva muodostuu käytännössä laskukaavan tuloksena, voidaan vektorikuvaa kasvattaa ja pienentää äärettömästi ilman, että kuvan laatu muuttuu tai kärsii. Sama vektorilogo voidaan tulostaa sekä kerrostalon seinän kokoiselle lakanalle että kuulakärkikynän klipsiin messumuistoksi. Vektoritiedostolla on myös se etu, että sen tiedostokoko on tavanomaisesti paljon pienempi kuin vastaava kuva bittigrafiikkatiedostona.

Vektoritiedostojen yleisimmät tiedostomuodot ovat svg, ai tai eps. Vektorikuva voidaan tallentaa myös pdf-tiedostona, ja useimmissa taitetuissa esitteissä esitteen elementit ovat vektorigrafiikkaa. Vektorikuvan näyttämiseen tarvitaan teknologiaa, joka osaa lukea ja tulkita kuvan matemaattista kaavaa. Tästä syystä vektorilogot lisätään nettisivuille svg-tiedostoina – svg-tiedosto on tämä matemaattinen laskutoimitus, jonka perusteella selain näyttää logon. Vektorikuva voidaan kääntää suoraan bittikarttakuvaksi, mutta bittikarttakuvaa ei voida kääntää vektorikuvaksi ilman, että vektorikuva piirretään uudelleen. Tästä syystä on erittäin tärkeää aina säilyttää myös vektoriversiot, vaikka ne eivät välttämättä näennäisesti toimisi tietokoneellasi.

Tuhoa ja hallitse tai kirjoita kaikki uudelleen – tämä on JPG:n ja PNG:n oleellisin ero

Toivon, että tässä kohtaa sinulla on jonkinlainen käsitys siitä, mitä eroa ylipäätään vektorigrafiikalla ja bittigrafiikalla on. Perehdytään nyt hieman tarkemmin kahteen internetin käytetyimpään tiedostomuotoon, bittigrafiikkatiedostoihin JPG ja PNG.

JPG tai JPEG on oletettavasti se kaikista yleisin. Tiedostomuoto käyttää häviöllistä pakkausmuotoa, minkä ansiosta jpg-kuvista voidaan tehdä kilokooltaan hyvin pieniä. Tämä on nettisivujen nopean latautumisen takaamiseksi tärkeä ominaisuus. Häviöllisellä pakkausmuodolla tarkoitetaan teknologiaa, jossa tiedostosta poistetaan informaatiota, jotta tiedostokoko saadaan pienemmäksi. Tiedoston pakkauksen yhteydessä tiedoston ulkomuoto alkaa muuttua niin, että tiedosto ei ole enää samanlainen, kuin ennen pakkausta. Kuvien kohdalla tämä näkyy esimerkiksi kuvatiedoston rakeisuutena, mutta se voi ilmetä myös esimerkiksi kuvan kiertosuunnan katoamisena, jos kuvan kierto on tallennettu osaan, joka pakatessa poistetaan. JPG-kuvia voidaan pakata manuaalisesti esimerkiksi Photoshop-ohjelmalla, jolloin kuvan laatu-kokosuhdetta voidaan tarkasti valvoa. Useimmat internetsivut pakkaavat myös kuvia automaattisesti prosentuaalisesti. Tästä syystä kuva saattaa muuttua rakeiseksi, kun sen on lisännyt sivustolle.

Tiesitkö muuten, mistä lyhennelmä JPEG tulee? JPEG eli Joint Photographic Experts Group on kansainvälinen komitea, joka kehittää stillikuvien koodausta. JPEG-komitea kokoontuu tavanomaisesti neljästi vuodessa kehittämään pysähtyneen kuvan pakkaus- ja prosessointistandardeja.

Toinen hyvin yleinen kuvatiedostomuoto on PNG eli Portable Network Graphics. PNG käyttää häviötöntä pakkausmuotoa, minkä ansiosta PNG-tiedostolla voidaan esittää esimerkiksi läpinäkyvää aluetta. Hyvin yksinkertaisesti selitettynä häviötön pakkausmuoto muuttaa tiedoston datan tiiviimmäksi, kuitenkaan poistamatta tietoa tiedostosta. Esimerkiksi, jos kuvassa on yksivärinen värialue, sen sijaan, että värialue koodattaisiin muodossa ”punainen pikseli, punainen pikseli, punainen pikseli…” kerrotaan se muodossa 45 punaista pikseliä. Kuvatiedoston sisällä on edelleen yhtä paljon dataa, mutta tiedostossa on vähemmän rivejä koodia.

Koska häviötöntä pakkausmuotoa hyödyntävistä PNG-kuvista ei poisteta alkuperäistä tietoa, ei tiedostoa voida pakata loputtomasti ja tuloksena on edelleen suhteellisen suuri tavukoko. Häviöllistä JPG-kuvaa taas voidaan pakata mielin määrin leikkaamalla viidakkoveitsellä dataa irti, saaden lopputuloksena pienen kilotavun tiedostoja (kuvan laatu toki matkalla kärsii).

PNG-kuvatiedosto on hyödyllinen yksinkertaisissa kuvissa, joissa on esimerkiksi läpinäkyvä tausta ja sulavalinjaisia graafisia elementtejä, sekä tilanteissa, joissa kuvan laadusta ei voida tinkiä. Tällaisia ovat esimerkiksi erilaiset diagrammit, logot ja alunperin vektorigrafiikkana tehdyt tuotekuvat. Valokuvissa sen sijaan värialueiden vaihtelevuus ja pikseleiden määrä on niin laajaa, että tiedon pakkaaminen häviöttömänä tuottaa edelleen suurta määrää dataa. JPG-tiedostoista voi poistaa tietoa hyvinkin paljon, ennen kuin ihmissilmä todellisuudessa havaitsee datan vähentymisen. Lisäksi on hyvä pitää mielessä, missä kuvaa käytetään. Taustakuvana, kun kuvan päälle nostetaan elementtejä, ei kannata panostaa kuvan täydelliseen laatuun, vaan latausnopeuteen – pientä rakeutumista tuskin huomaa, kun huomio on tarkoitus kiinnittää muihin elementteihin. Sen sijaan rakeinen ja epäselvä tuotekuva voi hankaloittaa tuotteen tunnistettavuutta ja antaa nuhjuisen kuvan sivustosta.

Digikuvan mittasuhteet

Kuvatiedoston kokoon vaikuttavat tiedostomuodon eli pakkausteknologian lisäksi kuvan mittasuhteet. Bittigrafiikkakuvat eli JPG- ja PNG-kuvatiedostot koostuvat siis vierekkäin ja päällekäin asetetuista pikseleistä. Pikselirivien pituus ja korkeus muodostaa kuvan mittasuhteen. Esimerkiksi, jos kuvapaikan koko on ilmoitettu muodossa ”2000 px x 500 px”, tulisi kuvan olla vähintään 2000 pikseliä leveä ja 500 pikseliä korkea. Kuvan voi rajata tähän kokoon ennakkoon, jotta kuvassa ei ole ylimääräistä kuva-alaa ja pikseleitä, eli kuvan koko voidaan optimoida täsmällisesti. Pienempää kuvaa ei kannata kuvapaikalle lisätä (eikä aina voikaan, jos se on estetty), sillä kuvapaikka kasvattaa kuvaa automaattisesti isommaksi. Kasvatus ei kuitenkaan tapahdu kovin fiksusti, vaan pikseleitä suurennetaan – lopputuloksena on rakeinen kuva.

Joskus kuitenkin kuvapaikan koko ilmaistaan paljon isompana, kuin näkyvä kuvapaikka sivustolla on. Tällöin on kyse niin sanotusta Retina-kuvasta. Retinakuvalla tarkoitetaan kuvaa, jonka pikselidimensio on kaksi kertaa suurempi kuin näkyvä kuva-ala. Tällaisia kuvia käytetään pienillä kuvapaikoilla, kuten listaus- ja henkilökuvien kohdalla. Tarve johtuu siitä, että erityisesti mobiililaitteet hyödyntävät teknologiaa, jossa näytön pikselitiheys on kaksinkertainen näytön fyysiseen mittasuhteeseen verrattuna. Pikseleistä muodostuvan kuvan täytyy siis olla niin ikään kaksi kertaa isompi, jotta kuva ei näytä rakeiselta.

Kuvaa rajatessa ja valitessa onkin tärkeää ymmärtää kuvapaikan kuvasuhteen merkitys. Useimmilla sivustoilla kuvat rajataan ja leikataan automaattisesti kuvapaikkaan sopivaksi, joten aivan välttämätöntä kuvan ennakkorajaaminen ei ole. Esimerkiksi, jos sivustolla on 150×150 pikselin kokoinen kuvapaikka, voi kuvapaikalle lisätä isomman neliönmuotoisen kuvan ja kuvasta ei rajaudu pois mitään. Toisaalta, jos vaakakuvapaikalle lisää pystykuvan, leikkaantuu kuvasta luonnollisesti suurin osa pois ja kuva ei näytä järkevältä kuvapaikalla – esimerkiksi henkilökuvasta voi ikävästi leikkaantua pää pois, jos kuvaa ei ennalta rajaa oikeaan kuvasuhteeseen. Jos tarkoituksena on lisätä jonkinlainen dekoratiivinen taustakuva, jossa ei niinkään haittaa, että jotain rajautuu pois, ei kuvan rajaaminen aina ole välttämätöntä. Kuitenkin on edelleen hyvä kiinnittää huomiota kuvan kokoon – 5000 pikseliä leveä kuva on hyvin todennäköisesti todella iso kilotavuissa, eikä ylimääräisistä pikseleistä ole kuvan laadun kannalta erityisesti hyötyä.

Iso kuva painaa monta kiloa

Internetsivusto on käytännössä mapillinen erilaisia tiedostoja, jotka keskustelevat keskenään. Aivan kuten tietokoneen kovalevyllä, vievät nämä tiedostot tilaa palvelimilla. Ja aivan kuten kovalevyltä tiedostoja avatessa; mitä isompi tiedosto, sitä hitaammin se avautuu. Yleensä yksittäisiä, suurimpia tiedostoja ovat päivittäjien sivustolle tuomat tiedostot, kuten kuvat ja PDF-tiedostot. Jokaisen päivittäjän onkin syytä kiinnittää huomiota sivustolle lataamansa kuvatiedoston kilotavukokoon. Sivulla näytettävien kuvatiedostojen koko vaikuttaa suoraan sivuston latausnopeuteen, millä taas on suora vaikutus sivuston hakukonenäkyvyyteen. Digitaalisen kuvan koko ilmoitetaan tavanomaisesti kilotavuissa. Olisi kovin hienoa, jos voisin antaa tässä tarkan lukeman kuvan optimaaliselle koolle, mutta valitettavasti se on kovin tapauskohtaista. Kuvia optimoidessa pidän kuitenkin mielessä kolme sääntöä:

1. Pyri niin lähelle nollaa, kuin silmämääräisesti mahdollista. 0 kilotavun kuva ei sisällä mitään tietoa, joten siihen ei toki voi todellisuudessa päästä, mutta alle 100 kilotavua on hyvä tavoite.
2. Ainakin alle 500 kiloon. Vaikka alle 100 kilotavun olisi ihanteellista päästä, ei se aina ole mahdollista. Jos pääkuvapaikka on vaikkapa 1920 pikseliä leveä ja 800 pikseliä korkea ja kuvassa on paljon värivariaatiota ja yksityiskohtia, alkaa kuvanlaatu varmasti kärsiä 100 kilotavussa. Kuvaa, jonka on tarkoitus esittää sivuston sisällön kannalta oleellista informaatiota, ei kannata pakata sisällöstä piittaamatta – kuva on tärkeä elementti sivustolla, ja joskus koosta on pakko tinkiä kuvan laadun takaamiseksi.
3. Tiedosto ei saa olla yli 1 megatavun kokoinen. Näin iso kuvatiedosto todennäköisesti hidastaa sivuston latautumista jo huomattavasti. Luultavasti kuvassa on paljon ylimääräistä dataa, jota voisi surutta leikata pois. Jos kuvaa ei mitenkään ole mahdollista saada alle 500 kilotavun, voi harkita, olisiko toinen vaihtoehto parempi, tai voisiko kuvan pikselikoosta vielä karsia.

Miksi koolla on väliä?

Digikuvien optimoinnilla on merkitystä sivuston hakukonenäkyvyyden kannalta, sillä sivuston latautumisnopeus on yksi Googlen hakukonearvon mittareista. Sivustoja ei kuitenkaan rakenneta botteja, vaan ihmisiä varten – optimoiduista kuvista on hyötyä nimenomaan ihmisille.

Nopeasti latautuva sivusto on käyttäjäystävällinen. Isokokoiset kuvat hidastavat sivuston latautumista, mikä on käyttäjän kannalta ärsyttävää. Käyttäjällä ei ole kiinnostusta odotella sivun latautumista kovin montaa sekuntia, joten potentiaalinen asiakas todennäköisesti palaa takaisin edelliselle sivulle tai sulkee koko välilehden, jos sivun latautuminen kestää aivan liian kauan. Oikein optimoidut kuvat myös tukevat sivuston käyttökokemusta paitsi latautumisnopeuden, myös käytön kannalta. Esimerkiksi sisältöalueelle upotettu, korkea kuva katkoo tekstisisällön flown ja loppuosa tekstistä jää todennäköisesti huomaamatta.

Kuvien optimoinnilla voi myös olla edes hitusen ilmastollisia vaikutuksia. Internetin hiilijalanjälki ei ole erityisen pieni, sillä alati kasvava palvelinkapasiteetin tarve kasvattaa myös energian kulutusta. Jos digitaalinen hiilijalanjälki kiinnostaa laajemmin, kirjoitin siitä vuonna 2019 jutun blogiimme.