3 + 1 tärkeintä syytä miksi teksti kuvassa on huono idea

Responsiiviset nettisivut

Sivustot, joiden tulee toimia luontevasti niin valtavilla iMaceilla, tableteilla kuin pienillä älypuhelimilla ovat ehkä suurin kompastuskivi. Kun teksti on kiinni staattisessa kuvassa, vaatii melkoisia taikavoimia, jotta teksti on luettavissa niin 21,5 tuuman Retina 4K -näytöllä, kuin 4 tuuman älypuhelimellakin. Kun kuvatiedosto pienenee ruudun mukana, muuttuu teksti helposti lukukelvottoman pieneksi kärpäsen jätökseksi. Jos kuva rakennetaan mobiili edellä, muuttuu teksti taasen valtavan kokoiseksi isoilla näytöillä. Tämän lisäksi pitää vielä ajatella fontin paksuutta, väriä ja fonttia ylipäätään. Kultainen keskitie on siis ohuempi, kuin nuorallakävelijällä.

Eri kokoisten näyttöjen lisäksi sivustot eivät useinkaan näytä täysin samalta mobiilikoossa ja pöytäkoneella. Kun pöytäkoneella sisältöalueen leveys on yleensä 1200 pikseliä tai enemmän, liikutaan mobiilissa pienimmillään 320 pikselin tienoilla. Mobiilikokoiset pääkuvat ovat useinkin korkeampia kuin leveällä näytöllä, jossa taasen pääkuvat ovat useimmiten kapeita, jotta sivun sisältö ei valuisi liian alas. Nyt kuvittelepa millainen banneri tulee luoda, jotta kuva näyttäisi hyvältä kaikilla mahdollisilla näytöillä. Niinpä. Tämä karsii heti niin tekstin määrää, sen sijoittelua kuin ylipäätään kuvan motiivia. Tietysti ongelman voi kiertää tekemällä jokaiselle kokoluokalle erillisen kuvan, mutta toisaalta jokaisella kokoluokalla on myös laaja määrä erikokoisia näyttöjä, joten mikään vedenpitävä ratkaisu tämäkään ei ole. Lisäksi se tarkoittaa väistämättä kolminkertaista työmäärää.

Isot tiedostokoot vs. Pikselimössö

Responsiivisuuden tuomien haasteiden lisäksi vastaan tulee kuvatiedoston koko tai vaihtoehtoisesti kuvien rakeisuus (josta jaarittelin aiemmin täällä). Mitä enemmän elementtejä ja erilaisia värejä kuvassa on, sitä suuremmaksi kasvaa kuvatiedoston koko. Näin ollen kuvassa oleva teksti voi kasvattaa kuvan kokoa huomattavastikin.

JPG on tiedostomuoto, jota on kannattaa suosia netissä, sillä sitä on mahdollista pakata huomattavasti. JPG-kuva muodostuu tuhansista pikseleistä. JPG:n pakkaaminen tarkoittaa sitä, että kuvasta leikataan pikseleitä ronskilla kädellä pois. Pikselimäärän pienentäminen johtaa siihen, että tarkkarajaiset objektit, kuten tekstit tai muu grafiikka, muuttuvat epätarkoiksi ja sumeareunaisiksi, jolloin lopputulos on epäsiisti tai jopa lukukelvoton. Monet sivustot pakkaavat kuvia automaattisesti, jotta suuret kuvatiedostot eivät rasittaisi sivujen lataamista. JPG-kuvaan upotettu teksti ei saattaa siis joka tapauksessa muuttua huonolaatuiseksi, vaikka kuvan pakkaisi valmiiksi.

JPG-kuvien pakkaamisesta aiheutuvien ongelmien vuoksi suositellaankin usein, että kuvat, joissa on graafisia elementtejä kuten tekstiä tai logoja, tallennetaan PNG:nä. PNG-kuvaa ei yleensä pakata ollenkaan vaikka se on mahdollista – se vaatii oman tekniikkansa, ja pakkaaminen on huomattavasti rajallisempaa. Voidaan siis taata, että grafiikka kuvissa pysyy terävänä ja lukukelvollisena. PNG-kuvan ongelma taas on, että kuvatiedostot muuttuvat luvattoman suurikokoisiksi. Tämä taas hidastaa sivun latautumista.

Kuvatyypin lisäksi oman kortensa kekoon kantaa näyttöjen vauhdilla yleistyvä teräväpiirtotekniikka eli ns. Retina-näyttö. Retina-näytön pikselimäärä on kaksi kertaa näytön koon verran. Jotta kuva näyttää hyvältä Retina-näytöllä, tulee myös kuvatiedoston olla kaksi kertaa isompi, mistä päästään taas samaan oravanpyörään eli suuriin tiedostokokoihin. Kuva, jossa on tekstiä, mutta joka ei myöskään ole retinakoossa, muuttuu retinanäytöillä lukukelvottomaksi pikselihirviöksi.

Googlea ei kiinnosta, mitä kuvassa lukee

Kaikessa viisaudessaan ja ylijumalallisuudessaan Google osaa lukea tekstiä, joka on kirjoitettu suoraan kuvatiedostoon, mutta siitä ei silti ole todennäköisesti hakukoneoptimoinnin kannalta juurikaan hyötyä – vielä. Google tunnistaa kuvissa olevan tekstin ainakin, kun se on selkeästi tulkittavissa, kuten paperilta skannatusta PDF-tiedostosta. Mitä vaikeammin eroteltavissa teksti on kuvassa, sitä epätodennäköisempää on, että hakukoneet erottelisivat tekstin kuvapinnasta. Ei myöskään ole juurikaan todisteita, että botit aktiivisesti tulkitsisivat kuvapintaa indeksoinnissaan. Huomattavasti tehokkaampaa on kirjoittaa halutut hakusanat sivustolle tekstimuodossa, jolloin sanat ovat helposti ja nopeasti Googlen bottien saatavilla.

Tähän saattaa silti tulla muutos – kiitos teinien! Internetin suurkuluttajat kommunikoivat kokoajan enemmän ja enemmän kuvin, eikä vain perinteisillä kauniilla kiiltokuvilla vaan niin sanotuilla memeillä. Memet ovat käytännössä kuvia, joissa on tekstiä – erilaisia hokemia yhdistettynä esimerkiksi kuvakaappaukseen kulttielokuvan kohtauksesta. Kovinkaan moni memetaiteilija tuskin muistaa lisätä kuvilleen hakukoneoptimoituja alt-tekstejä ja nimeä, joten kuvaan upotetun tekstin indeksointi alkaa olla jo kovaa valuuttaa ja todennäköisesti tulevaisuudessa totta. Kuvillahan voi jo googlailla.

+1: Bannerisokeus

Tutkimusten mukaan me internetsurffaajat välttelemme tietoisesti tai tiedostamatta bannereiden tai bannerin kaltaisten elementtien lukemista. Mainosten täyttämässä verkossa käyttäjä turtuu niin nopeasti ylimääräiseen informaatioon, joita yleisesti mainoksissa viljellään, että todennäköisesti olennainenkin informaatio, joka on bannerimuodossa jää huomaamatta. Olemme tottuneet, että olennainen informaatio löytyy sivujen sisällöstä, joten aikaa säästääksemme emme edes vilkaise bannereita, koska uskomme, että todennäköisesti olennainen informaatio ei löydy niistä. Mitä enemmän sivulla oleva kuvaelementti muistuttaa banneria, sitä vähemmän se saa huomiota. Luultavasti Googlen hakutulosten kolmatta sivua parempi paikka piilottaa ruumis on nimenomaan banneriin.

Bannerisokeus on tietysti laajempi aihe, kuin pelkkä teksti kuvassa, mutta se kannattaa ehdottomasti pitää mielessä. Aihetta on tutkittu jo vuonna 1998 – melkein 20 vuotta sitten – eikä sokeudesta todennäköisesti ole ainakaan parannuttu.

Staattinen kuva ei ole ketterä. Kuvan sisältö ei osaa muuta, kuin olla ja möllöttää – sen sisältö ei vaihda paikkaa riippuen mitä sen ympärillä tapahtuu. Jos taas tekstin sijoittaa kuvan päälle, voidaan tekstiä pakottaa paljon vapaammin ja tällöin myös tekstin luettavuus erikokoisilla näytöillä voidaan taata. On turha rajoittaa mielikuvitustaan vanhalla mallilla, sillä nykytekniikalla melkeinpä kaikelle löytyy todennäköisesti kestävä, mutta joustava ratkaisu.