Kuvan tehtävä ratkaisee rajauksen
Aloita kysymällä, mitä asiakkaan pitäisi kuvasta havaita. Referenssikuva voi näyttää työn yksityiskohdan, henkilön kuva tunnistettavan yhteyshenkilön ja tuotekuva tuotteen ominaisuuden. Koristeellinen tunnelmakuva palvelee toista tehtävää. Sama rajaus ei sovi kaikkiin, vaikka sivuston kuvapaikat olisivat samankokoisia.
Tarkista rajaus sekä leveässä että kapeassa näkymässä. Työpöydällä reunoille mahtuva kohde voi kadota puhelimen pystymäisestä kuvasta. Jos kuvan päällä on tekstiä, sen luettavuus pitää varmistaa jokaisessa rajauksessa. Tärkeää tuotetietoa ei kannata jättää yksinomaan kuvan sisälle, sillä sitä on vaikea lukea pienessä koossa ja päivittää eri kielille.
Erota näyttökoko, pikselimäärä ja tiedostokoko
Näyttökoko tarkoittaa tilaa, jonka kuva vie sivun asettelussa. Pikselimäärä kuvaa kuvatiedoston tarkkuutta. Tiedostokoko kertoo siirrettävän tiedon määrän. Suuri pikselimäärä voi auttaa tarkalla näytöllä, mutta se voi myös siirtää turhaa tietoa, jos kuva näkyy vain pienenä korttina. Toisaalta liian pieni lähdekuva näyttää pehmeältä suureen tilaan venytettynä.
Sivuston toteutuksessa voidaan tarjota erikokoisia kuvaversioita eri näyttötilanteisiin. Sisällön päivittäjän kannalta olennaista on tietää, tuottaako järjestelmä nämä automaattisesti vai pitääkö ne valmistella itse. Ohjeista kuvapaikan tavoiteltu muoto ja tarvittava tarkkuus. Pelkkä vaatimus mahdollisimman hyvästä kuvasta ei kerro, millainen tiedosto kannattaa toimittaa.
Pakkaa kuvan sisällön mukaan
Valokuva, läpinäkyvä logo ja kuvakaappaus sisältävät erilaista tietoa. Valokuvassa hienoinen pakkaus voi olla huomaamaton, kun taas tekstin reunat kuvakaappauksessa voivat kärsiä nopeasti. Valitse siksi tiedostomuoto ja pakkaus vertaamalla todellista kuvaa sen lopullisessa käyttökoossa. Älä päätä kaikkea yhden yleisen kilotavurajan perusteella.
Säilytä alkuperäinen aineisto erikseen. Verkkokäyttöön pakattua kuvaa ei pidä käsitellä uutena alkuperäisenä jokaisessa päivityksessä. Toistuva häviöllinen tallentaminen voi heikentää laatua vähitellen. Nimeä toimitettavat versiot ymmärrettävästi ja erottele pääkuva sekä pienempi korttikuva, jos niiden rajaukset ovat erilaiset. Näin myöhempi päivittäjä ei valitse väärää tiedostoa vahingossa.
Vaihtoehtoinen teksti kertoo merkityksen
Vaihtoehtoinen teksti määräytyy kuvan tehtävästä siinä kohdassa, jossa se esiintyy. Olennaista sisältöä välittävä kuva tarvitsee ymmärrettävän kuvauksen. Pelkkä koristelu voidaan merkitä niin, ettei ruudunlukija toista sitä turhaan. W3C:n kuvien päätöspuu auttaa erottamaan nämä käyttötavat.
Älä täytä vaihtoehtoista tekstiä hakusanoilla tai kopioi tiedostonimeä sellaisenaan. Referenssikuvan kuvaus voi kertoa esimerkiksi, mikä työn osa näkyy, jos tieto on lukijalle merkityksellinen. Jos sama tieto on jo viereisessä tekstissä, tarpeeton toisto voi huonontaa kokemusta. Linkkinä toimivan kuvan kuvaus auttaa ymmärtämään myös linkin tarkoituksen, ei vain kuvan värejä.
Latausjärjestys pitää sovittaa sivuun
Ensimmäisessä näkymässä tärkeä kuva ja pitkän artikkelin lopussa oleva kuva eivät tarvitse samaa latauskäytäntöä. Alapuolisten kuvien latauksen lykkääminen voi säästää turhaa siirtoa. Pääkuvan tarpeeton viivästys taas hidastaa sivun olennaisen sisällön ilmestymistä. Tarkempi pääkuvan latauksen periaate löytyy LCP-optimoinnin ohjeesta.
Kuvan vaatima tila kannattaa varata jo ennen latautumista. Muuten teksti ja painikkeet voivat hypätä kuvan ilmestyessä. Erityisen häiritsevää tämä on, jos asiakas on juuri painamassa linkkiä. Testaa siksi sivu myös hitaammalla yhteydellä ja tyhjällä välimuistilla. Nopealla omalla yhteydellä tällainen virhe voi jäädä kokonaan huomaamatta.
Esimerkki: sama työnäyte kolmessa käyttötilanteessa
Kuvitellaan rakennusprojektin valokuva. Referenssisivun pääkuvassa asiakas arvioi tilan kokonaisuutta, joten leveä rajaus ja riittävä tarkkuus ovat perusteltuja. Referenssilistan pienessä kortissa sama kuva tarvitsee rajauksen, jossa kohde tunnistetaan nopeasti. Puhelimen kapeassa näkymässä kuvasta ei puolestaan saa leikkautua pois juuri se yksityiskohta, josta teksti puhuu.
Näille paikoille voidaan tehdä eri versiot samasta alkuperäisestä. Vertailussa tarkastetaan tiedostokoko, näkyvä terävyys ja rajauksen toimivuus. Pienintä tiedostoa ei valita automaattisesti, jos työn jälki muuttuu epäselväksi. Tämä on suunnitteluesimerkki, ei lupaus tietystä latausajan säästöstä. Mittaustulos edellyttää aina testin todellisia tiedostoja ja olosuhteita.
Tee päivittämisestä toistettavaa
Sopikaa, missä alkuperäiset kuvat säilytetään ja kuka tarkistaa käyttöoikeudet. Sivuston ylläpitoon kannattaa antaa muutama todellinen esimerkkikuva, joista näkee hyväksyttävän rajauksen ja laadun. Samalla kerrotaan, mihin kohtaan vaihtoehtoinen teksti kirjoitetaan ja mitä tapahtuu, jos kuva vaihdetaan myöhemmin.
Kun kuvapaikkojen toimintatapa on selvä, sivusto ei hidastu vähitellen uusista valtavista tiedostoista. Kuvien käsittely liittyy myös sivuston kokonaisnopeuteen, mutta sitä ei pidä jättää vain teknisen ylläpitäjän vastuulle. Sisällöntuotannon valinnat vaikuttavat lopputulokseen jokaisessa julkaisussa.
Logo, läpinäkyvyys ja eri taustapinnat
Logon kuvankäsittelyssä tärkein tavoite ei ole sama kuin valokuvassa. Reunojen pitää pysyä terävinä, kirjainten luettavina ja taustan sopia sivun pintaan. Jos logo on tarkoitettu läpinäkyväksi, valkoinen suorakulmio logon ympärillä näyttää virheeltä harmaalla taustalla. Tarkista siis itse tiedoston läpinäkyvyys ja lopullinen käyttökohde.
Sama logoversio ei välttämättä erotu kaikilla pinnoilla. Vaalealle taustalle valitaan yrityksen hyväksymä tumma versio ja tummalle vaalea, jos brändiaineistossa on tällaiset vaihtoehdot. Kuvaa ei kannata yrittää korjata arvaamalla sen värejä selaimen tehosteella, jos lopputulos muuttaa yrityksen tunnusta. Myös kuvan ympärillä oleva tyhjä tila vaikuttaa siihen, kuinka suurelta logo näyttää muiden logojen rinnalla.
Valokuvan ja logon tiedostot säilytetään erillään alkuperäisestä aineistosta. Näin seuraavaan käyttökohteeseen ei tarvitse tehdä uutta kuvaa jo valmiiksi pienennetystä versiosta. Nimeäminen voi kertoa käyttötarkoituksen, mutta julkiseen tiedostonimeen ei laiteta asiakkaan yksityisiä tietoja.
Kuvagallerian arviointi ilman pelkkää tiedostokokorajaa
Kuvagalleriassa yksittäinen kevyt kuva voi silti johtaa raskaaseen kokonaisuuteen, jos kaikki kuvat ladataan suurina samalla kertaa. Erottele listauksen esikatselut ja erikseen avattavat suuret kuvat. Asiakas tarvitsee ensimmäisessä näkymässä riittävän kuvan työn arviointiin, ei välttämättä jokaisen yksityiskohdan suurinta mahdollista versiota.
Tarkista kuvien laatu niiden todellisissa käyttökohdissa: kapea puhelin, tavallinen kannettava ja suuri näyttö. Rajaus voi toimia yhdellä leveydellä ja leikata olennaisen toisella. Erityisesti laitekuvissa, rakennusten julkisivuissa ja tuotekuvissa kokonaisuuden säilyminen voi olla näyttävää rajausta tärkeämpää.
Lopuksi tarkistetaan sivun viesti ilman kuvaa. Jos olennainen palveluehto tai yhteystieto on vain kuvaan kirjoitettuna, sen käyttö ja päivittäminen vaikeutuvat. Tällainen sisältö kannattaa esittää myös oikeana tekstinä. Kuva tukee ymmärtämistä, ja teksti kantaa ne tiedot, joiden pitää löytyä ja pysyä luettavina kaikissa tilanteissa.