Mitä responsiivisuus merkitsee kuvien kannalta?

responsiiviset-kuvat2

Keskimäärin 62 prosenttia verkkosivuilta ladattavasta tiedosta on kuvia ja jaettavien kuvatiedostojen määrä lisääntyy verkossa jatkuvasti. Tästä bittivirrasta suurin osa menee nykyään hukkaan, sillä verkkoa selataan yhä enemmän pienikokoisilta näytöiltä, vaikka kuvat ovat edelleen mitoitettuja suuremmille näytöille.

Nykyaikana laadukas verkkosivusto toimii responsiivisesti. Käyttäjän päätelaitteelle tarjoillaan sisältö mahdollisimman hyvin luettavana ja katsottavana. Kuten aiemmassa kirjoituksessani totesin, responsiivisessa suunnittelussa sisällön tulee olla keskiössä. Kuviin kannattaa panostaa, koska ne muodostavat datavirrasta niin suuren osan.

Kun verkkosivustoa ja sen kuvitusta suunnitellaan, kannattaa vastata muun muassa seuraaviin kysymyksiin:

  • Halutaanko kuvia skaalata?
  • Halutaanko näyttää eri kuvia kontekstista riippuen?
  • Halutaanko ottaa huomioon tarkkojen resoluutioiden näytöt?
  • Halutaanko kuvia jakaa eri mimetyypeillä? 

Varmista kuvien sopiva skaalautuminen

Kuvien skaalaus voidaan suorittaa selaimella niin, että käytetään yhtä ja samaa kuvaa ja kerrotaan selaimelle, minkä kokoisena kuva näytetään. Tämä on tyypillinen ja nopea ratkaisu, mutta suorituskyvyn kannalta varsin kehno. Parempi vaihtoehto on toimittaa kuva fyysisesti järkevässä koossa. Tällöin kuva latautuu mobiililaitteilla nopeammin ja kaistaa säästyy. Tämä on tärkeää erityisesti niissä tilanteissa, joissa kuvat ovat suuremmilla näytöillä suuria ja sisältöä ladataan usein. Tyypillisesti tällöin on kyseessä sivuston etusivu tai ns. laskeutumissivu. 

Jotta kuvat näkyvät tarkkoina myös uusilla näytöillä, niiden tulee olla tarpeeksi hyvälaatuisia.

Valitse kuvat kontekstin mukaan

Iso näyttö antaa luonnollisesti mahdollisuuden isommille kuville. Tällöin varsinaisen fokuksen lisäksi kuvaan saa jäädä reilusti ympäröivää tilaa. Pienemmällä näytöllä kuvalle jäävä ala on huomattavasti pienempi, mutta myös kuvasuhde erilainen. Tällöin kuvasta kannattaa tarjota kokonaan erilainen rajaus. Tämä on tyypillistä tilanteissa, joissa kuvassa on selkeä fokus esimerkiksi henkilöön tai esineeseen. Joskus kuva vaihdetaan täysin erilaiseksi kontekstista riippuen. Esimerkiksi isommalla näytöllä voi olla henkilö osana maisemaa ja pienellä näytöllä näytetään esimerkiksi vain kasvokuva, joka on otettu sisätiloissa paremmassa valaistuksessa.

Ota huomioon eri näyttöjen resoluutiot

Ennen oli nyrkkisääntönä, että painotöissä käytetään hyvälaatuisia kuvia ja verkkoon käy lähes minkä laatuinen kuva tahansa. Näyttöpaneelien kehittyessä eri valmistajat ovat alkaneet tuottaa tarkemmalla resoluutiolla toimivia näyttöjä, joissa on tuumaa kohti enemmän pikseleitä. Jotta kuvat näkyvät tarkkoina myös uusilla näytöillä, niiden tulee olla tarpeeksi hyvälaatuisia. Kuvien huono tarkkuus tulee esiin myös logoissa ja erilaisissa symboleissa, joita sivuilla käytetään. Varsinkin logoista on tärkeää tarjota terävä versio, koska logo on keskeinen osa sivuston brändiä. Symbolien kohdalla, kuten hakutoiminnon suurennuslasissa tai vaikka niin sanotussa hampurilaisessa (mobiilivalikko), kannattaa nykyisin käyttää symbolikirjaisimia esimerkiksi Font Awesome -kirjastosta. Niiden avulla symbolit saadaan näkymään terävinä missä tahansa näytössä.

Muista eri mimetyypit

Verkossa etsitään jatkuvasti uusia tapoja toimittaa sisältöä tehokkaammin käyttäjille. Sivustoilla, joissa on paljon liikennettä, on todella tärkeää saada ladattava bittimäärä mahdollisimman pieneksi. Perinteiset verkossa käytettävät kuvatiedostoformaatit ovat PNG, JPEG ja GIF. Näiden rinnalle selainvalmistajat, kuten Google ja Microsoft, ovat työstämässä uusia kuvatiedostoformaatteja, jotka tarjoavat parempia kuvapakkausmenetelmiä: Google työstää WebP-formaattia ja Microsoft JPEG-XR-formaattia. Kaikki selaimet eivät tue näitä uusia formaatteja. Onneksi niiden tarjoiluun on kuitenkin nykyään menetelmä, jossa mimetyyppien määrittelyn avulla selaimelle voidaan vanhan kuvaformaatin sijaan tarjota tuoreempi formaatti, jota se tukee.

Paras etu uusista formaateista saadaan ruuhkaisissa sivustoissa, joissa käytetään paljon kuvia. Googlen kehittäjäblogissa formaatin kerrotaan tuovan päivätasolla Chrome Web Storessa useiden terabittien säästön tiedonsiirrossa. 

Mitä tämä kaikki merkitsee?

Mitä merkittävämpi rooli kuvilla on verkkosivuston sisällöissä sitä tärkeämpää on huolehtia niiden toimivuudesta kaikilla päätelaitteilla. Hyvä sisältöstrategia ja ammattitaitoinen suunnittelu kuvien käytössä takaa sujuvan ja miellyttävän käyttökokemuksen loppukäyttäjälle, joka on päivä päivältä yhä tietoisempi verkkosivustojen laatuvaatimuksista. Toki kuvien koolla on myös merkitystä sivuston nopeuden kannalta ja sitä kautta myös hakukonenäkyvyydessä.

Lauri Saarni

Toimin Valussa web-kehittäjänä. Asiakasprojektien ohella osallistun myös yrityksemme tuotekehitykseen. Koulutukseltani olen ohjelmistotekniikan insinööri.

JÄTÄ KOMMENTTI