Harva asia lienee yhtä ärsyttävä, vaikkakin arkinen, kuin hitaasti aukeava nettisivu. Kuinka usein viimeisen kuukauden aikana olet ollut tilanteessa, jossa nettiyhteys on ollut heikko? Veikkaan, että useammin kuin kerran.
Nettiyhteys siis saattaa olla hidas ja pätkiä aika ajoin, etenkin liikkellä kun nettiä selaa kännykällä. Ja kun otetaan huomioon se, että edelleen yhä suurempi osa netinkäytöstä tapahtuu puhelimella, alkaa soppa olla valmis. Mutta mitä tekemistä sillä on kuvien kanssa?
Syvällisempi responsiivisuus
Web-suunnittelussa ja -kehityksessä on jo useita vuosia ollut käytäntönä se, että nettisivut tehdään sopivaksi myös puhelinten näytöille. Oletko koskaan miettinyt, että työpöydällä ja kännykällä katsoessa kuva saattaakin olla itse asiassa erilainen? Jos olet, hyvä; kymmenen pistettä ja papukaijamerkki. Jos et, ei hätää; nyt olet.
Responsiivisuudella siis ajatellaan yleensä ulkoasua ja sen sovittamista erilaisille näytöille. Siihen liittyy kuitenkin todella paljon muutakin, kuten esimerkiksi se, että tyyli- ja kuvatiedostoista ladataan erilaisia versioita näytön koon mukaan. Esimerkiksi kuvien lataamisen osalta tällaisesta menettelystä on valtavasti hyötyä sivuston nopeuden parantamisessa. Tällä tavalla on mahdollista ladata korkealaatuinen kuva silloin, kun vierailijalla on käytössään esimerkiksi pöytätietokone isolla näytöllä. Vastaavasti taas hänelle voidaan näyttää pienempi kuva silloin, kun vierailu tehdään pieniruutuisella kännykällä.
Samalla ajatuksella on mahdollista ladata periaatteessa kaikkia mahdollisia tiedostoja, jolloin käyttökokemus ja erityisesti sivuston nopeus paranee entisestään.
Monta eri tapaa pienentää
Edellisessä esimerkissä ladattiin erikokoinen kuva tietokoneen ja kännykän selaimelle, mutta mitä se oikeastaan tarkoittaa? Jokainen tiedosto, oli se kuva tai tyylitiedosto tai jokin muu, koostuu biteistä ja tavuista. Ne kertovat samalla myös sen, kuinka iso tiedosto on kyseessä. ”Fyysisesti” suurempi kuva sisältää paljon enemmän bittejä kuin pieni kuva, jolloin se loogisesti käyttää enemmän tilaa kiintolevyllä.
Tätä tietoa hyödyntämällä on mahdollista optimoida kuvien tiedostokokoa esimerkiksi käyttämällä jonkinlaista pakkausta ja pienentää kuvan tiedostokokoa poistamalla tiettyjä osia kuvasta. Joskus kuvan pakkauksen yhteydessä siitä tulee huonompilaatuinen, sillä pakatessa tiedostoa siitä poistetaan bittejä. Kuvien tapauksessa tämä voi tarkoittaa esimerkiksi pikselien määrän vähentämistä.
Kuvan tiedostokokoa on siis mahdollista pienentää pakkaamalla. Sen lisäksi kuvan tiedostokokoa voi pienentää myös yksinkertaisemmin – muuttamalla kuvan resoluutiota tai leikkaamalla kuvasta ei-tarpeellisia osia pois. Resoluution muuttaminen on erityisen hyödyllinen tapa optimoida kuvia helposti. Vaikka mobiililaitteet ovat yhä tarkempia näyttämään yksityiskohtia, on silti mahdollista käyttää varsin matalalaatuisia kuvia ilman, että eroa oikeastaan huomaa. Joskus raja tulee kuitenkin vastaan nopeammin, ja kuvaa ei vain voi pienentää enempää. Se tarkoittaa, että kuvan resoluutio on optimoitu niin hyvin kuin mahdollista.
Pienellä asialla on suuri vaikutus
Tärkeintä on muistaa se, että suurella näytöllä ja hyvällä nettiyhteydellä varustetulle vierailijalle voi usein näyttää huoletta melkein kuinka hyvälaatuisia kuvia tahansa, kun taas kännykällä vierailevalle on näytettävä pienempi versio kuvasta. Tässä asiassa vastuu on vain ja ainoastaan sivuston omistajalla tai ylläpitäjällä, sillä kävijä ei pysty sivustolta ladattavaan sisältöön vaikuttamaan. Kannetaanpa siis vastuumme siitä, että kaikkien nettiselailusta tulisi entistä miellyttävämpää, etenkin liikkeellä olevien.