Ota mikä tahansa verkkosivusto, joka menetti sinut ensimmäisten sekuntien aikana, ja vieritä takaisin alkuun. Todennäköisesti kuvilla oli osansa asiassa. Kuvapankkikuva hymyilevistä vieraista, jotka eivät näytä lainkaan niiltä ihmisiltä, joita yritys oikeasti palvelee. Pääkuva, joka on niin epämääräinen, että se voisi kuulua mille tahansa yritykselle millä tahansa alalla. Tai ei kuvia lainkaan, jolloin sivu tuntuu paljaalta ja keskeneräiseltä. Verkkosivuston kuvat eivät ole koristeita. Ne ovat viestintää. Tässä artikkelissa käydään läpi, mitä verkkosivuston kuvat oikeasti tekevät, miten valitset oikeat, minne ne kuuluvat kullakin sivulla ja mitä tapahtuu, kun erehdyt.
Kävijät käsittelevät kuvia nopeammin kuin sanoja. Ennen kuin kukaan lukee otsikkosi, hänen aivonsa ovat jo muodostaneet ensivaikutelman visuaalisesta. Se tarkoittaa, että kuvasi esittävät väitteen yrityksestäsi ennen kuin ehdit esittää omasi. Kysymys on siitä, onko tuo väite se, jonka haluat esittää.
Mitä verkkosivuston kuvat oikeasti tekevät?
Jokainen sivustosi kuva kertoo kävijälle jotain. Etusivusi pääkuva sanoo "tällainen yritys olemme ja tälle yleisölle olemme". Tietoa meistä -sivusi kuva sanoo "täällä on oikeita ihmisiä". Palvelusivusi tuotekuva sanoo "tämän saat, kun työskentelet kanssamme".
Kun nämä signaalit ovat selkeitä ja olennaisia, kävijät tuntevat olevansa orientoituneita. Kun ne ovat epämääräisiä tai yleisiä, kävijät eivät tunne mitään, mikä on pahin lopputulos. Kävijällä, joka ei tunne mitään, ei ole syytä jatkaa lukemista.
Kuvat ohjaavat myös sitä, minne katse menee. Tämä on sivun visuaalisen hierarkian ydin. Hyvin sijoitettu kuva vetää huomion tärkeään osioon. Huonosti sijoitettu kuva jakaa huomion ja tekee kävijästä epävarman siitä, minne katsoa seuraavaksi. Jokaisen kuvan pitäisi ansaita paikkansa auttamalla kävijää liikkumaan oikeaan suuntaan.
Oikeat kuvat vai kuvapankkikuvat: onko sillä väliä?
On. Enemmän kuin useimmat odottavat.
Kävijät tunnistavat kuvapankkikuvat paremmin kuin viisi vuotta sitten. Täydellisesti valaistu neuvotteluhuone, jossa neljä ammattilaista nyökkäilee kannettavalle. Kättely kaupunkimaiseman edessä. Hymyilevä nainen kahvikuppi kädessä. Nämä kuvat ovat niin yleisiä, että kävijöille on kehittynyt eräänlainen visuaalinen immuniteetti niitä kohtaan. He näkevät ne eivätkä huomaa mitään.
Oikeat kuvat tekevät päinvastoin. Kuva todellisesta liiketilastasi, todellisesta tiimistäsi, todellisesta valmiista työstäsi. Nämä kuvat ovat ominaisia sinulle ja vain sinulle. Kävijä, joka näkee ne, saa näyttöä siitä, että verkkosivuston takana on oikea yritys, mikä on yksi arvokkaimmista asioista, joita kuva voi viestiä. Jopa hyvässä valossa otettu puhelimella otettu kuva on usein tehokkaampi kuin kiillotettu kuvapankkikuva, koska se on aito.
Tästä huolimatta kuvapankkikuvilla on paikkansa. Blogiartikkeleihin, abstraktien käsitteiden havainnollistamiseen ja toissijaisiin kuvapaikkoihin, joissa täsmällisyydellä on vähemmän merkitystä, hyvin valittu kuvapankkikuva hoitaa tehtävänsä. Sääntö on: käytä oikeita kuvia, kun luottamus on pelissä, ja kuvapankkikuvia, kun kuva vain tukee sisältöä eikä esitä väitettä yrityksestäsi.
Miten valitset oikean kuvan kullekin sivulle?
Ennen kuin etsit kuvaa, kysy, mikä tehtävä sillä on kyseisellä sivulla.
Etusivullasi pääkuvan pitää viestiä, mitä teet ja kenelle, ennen kuin kukaan lukee sanaakaan. Jos kävijä voisi katsoa pelkkää pääkuvaasi eikä aavistaisi, millä alalla toimit, kuva ei hoida tehtäväänsä.
Tietoa meistä -sivullasi kuvan pitää olla henkilökohtainen. Näytä ihmiset. Näytä tila. Näytä jotain, mikä saa yrityksen tuntumaan inhimilliseltä ja täsmälliseltä eikä yritysmäiseltä ja nimettömältä.
Palvelu- tai tuotesivulla näytä lopputulos. Ennen ja jälkeen -kuvat remonttiyritykselle. Näyttökuva hallintapaneelista ohjelmistotyökalulle. Kuva valmiista ruoka-annoksesta pitopalvelulle. Lopputuloskuvat vakuuttavat enemmän kuin prosessikuvat, koska ne vastaavat kysymykseen, jota kävijä oikeasti esittää: mitä minulla on, kun tämä on tehty?
Kun tiedät tehtävän, etsi sitten kuva. Ei toisinpäin.
Mikä saa kuvan toimimaan sinua vastaan?
Epäolennaisuus
Kuva, jolla ei ole mitään täsmällistä sanottavaa yrityksestäsi, palvelustasi tai asiakkaastasi, kertoo kävijälle, ettei kukaan miettinyt huolellisesti sivuston visuaalista kokemusta. Tuo vaikutelma jää.
Epäsuhta
Jos tekstisi on lämmin ja keskusteleva mutta kuvasi ovat kylmiä ja yritysmäisiä, sivu tuntuu epäjohdonmukaiselta. Kävijät huomaavat tämän ristiriidan, vaikka eivät osaisi nimetä sitä. Kuvien tunnelman ja tekstin tunnelman pitää sopia yhteen.
Hitaat latausajat
Isot, pakkaamattomat kuvat ovat yleisin yksittäinen syy siihen, että verkkosivustot latautuvat hitaasti. Sivu, joka latautuu puhelimella yli kolme sekuntia, menettää merkittävän osan kävijöistä ennen kuin mitään on nähty. Jokainen lataamasi kuva pitäisi pakata verkkoa varten. Useimmat verkkosivustoalustat hoitavat osan tästä automaattisesti, mutta on hyvä tietää, mitä lataat. Katso, miten verkkosivuston nopeus vaikuttaa kävijöihin ja hakusijoituksiin, niin saat kokonaiskuvan.
Puuttuva alt-teksti
Jokainen sivustosi kuva tarvitsee lyhyen kuvauksen siitä, mitä se esittää, kirjoitettuna alt-tekstin kenttään. Sillä on merkitystä kahdesta syystä. Ruudunlukijoita käyttävät kävijät luottavat alt-tekstiin ymmärtääkseen, mitä kuva sisältää. Hakukoneet käyttävät alt-tekstiä kuvien indeksointiin. Sen ohittaminen on nopea tapa menettää sekä saavutettavuuspisteet että SEO-arvo.
Minne kuvien pitäisi sijoittua sivuillasi?
Kuvien sijoittamiseen ei ole yleispätevää sääntöä, mutta on muutama malli, joka toimii johdonmukaisesti.
Laita vahvin kuvasi sinne, mihin kävijät katsovat ensin. Useimmilla sivuilla se on yläosa, ilman vierittämistä näkyvä alue. Jos kävijä vierittää alas ennen kuin sitoutuu lukemaan, toinen kuvapaikka jossain sivun keskellä tavoittaa hänet vierittämisen aikana. Kolmas kuva pitkän sivun lopun lähellä sitouttaa uudelleen kävijät, jotka ovat lukeneet suurimman osan matkasta.
Käytä kuvia katkaisemaan pitkiä tekstiosioita, mutta vain silloin, kun kuva lisää jotain. Kuva, joka havainnollistaa viereisen kappaleen asiaa, tekee tehtävänsä. Kuva, joka on sijoitettu sinne vain siksi, että osio tuntui liian pitkältä, on täytettä, ja kävijät huomaavat sen.
Mobiilissa kuvien sijoittelu muuttuu, koska näyttö on kapea ja kuvat pinoutuvat pystysuunnassa. Kuva, joka on tekstin vieressä työpöydällä, näkyy sen ylä- tai alapuolella mobiilissa. Testaa, miltä kukin sivu näyttää puhelimella, ja varmista, että kuva on edelleen järkevä uudessa paikassaan. Tämä kuuluu sen varmistamiseen, että sivustosi noudattaa responsiivisen suunnittelun periaatteita jokaisella sivulla.
Mitä tiedostomuotoa kuviesi pitäisi käyttää?
Lyhyt versio:
- JPEG valokuville. Pieni tiedostokoko, korkea laatu, toimii kaikkialla.
- PNG logoille, kuvakkeille ja kaikelle, jossa on läpinäkyvä tausta tai terävää tekstiä.
- WebP molemmille, jos alustasi tukee sitä. Se tuottaa pienempiä tiedostoja kuin JPEG ja PNG samalla laatutasolla. Useimmat nykyaikaiset selaimet käsittelevät WebP:tä ongelmitta.
- SVG kuvakkeille ja yksinkertaisille kuvituksille. Skaalautuu täydellisesti mihin tahansa kokoon hyvin pienellä tiedostokoolla.
Tiedostokooksi kannattaa tavoitella alle 200 kilotavua tavallisille sivun kuville. Pääkuvat voivat olla noin 400 kilotavuun asti. Mikä tahansa suurempi pitää pakata ennen lataamista. Viiden megatavun kuvalla puhelimestasi ei ole sijaa verkkosivulla.
Mikä alt-teksti on ja miksi jokainen kuva tarvitsee sen?
Alt-teksti on kuvaan liitetty lyhyt kirjallinen kuvaus. Se sijaitsee sivun kuvatagissa, näkymättömänä näkeville kävijöille mutta ruudunlukijoiden ja hakukoneiden luettavissa. Molemmat tarvitsevat sitä ymmärtääkseen, mitä kuvasi sisältävät.
Saavutettavuuden kannalta alt-teksti on se, miten ruudunlukijoita käyttävät kävijät kokevat sivustosi kuvat. Ilman sitä he eivät kuule mitään kuvan latautuessa, mikä jättää aukon siihen, mitä aioit viestiä. SEO:n kannalta hakukoneet eivät näe kuvia kuten ihmiset. Alt-teksti on tapa, jolla ne ymmärtävät, mitä kuva esittää ja onko se olennainen sivulle, jota se tukee.
Alt-tekstin kirjoittaminen hyvin tarkoittaa sen kuvaamista, mitä kuvassa oikeasti on, täsmällisesti ja selkeästi. Kuva valmistuneesta keittiöremontista saa alt-tekstin kuten "valkoinen shaker-keittiö marmoritasoilla remontin jälkeen" eikä "keittiökuva" tai "kuva1". Jos avainsanasi sopii luontevasti kuvaukseen, ota se mukaan. Mutta kirjoita kuvaus ensin. Alt-teksti, joka on olemassa vain toistamassa avainsanoja, epäonnistuu molemmissa tarkoituksissa.
Jokaisella lataamallasi kuvalla pitäisi olla alt-teksti kirjoitettuna ennen kuin sivu julkaistaan. Se vie alle minuutin kuvaa kohden ja vaikuttaa siihen, kuka pääsee sisältöösi käsiksi ja miten sivusi sijoittuvat.
Miten WEMASY hoitaa kuvat
WEMASYn Websitebuilder sisältää kuvalohkoja, joita voit lisätä mihin tahansa sivun osioon. Lataat suoraan rakentimessa, sijoitat ja muutat kokoa koskematta koodiin ja lisäät alt-tekstin samassa vaiheessa. Kuvat tarjoillaan automaattisesti responsiivisesti, joten ne mukautuvat jokaiseen näyttökokoon ilman, että sinun tarvitsee tehdä erillisiä versioita työpöydälle ja mobiilille.
WEMASYn sivuosiot tukevat kuvia tekstin rinnalla joustavissa palstaasetteluissa tai täysleveinä taustoina osioissa, joissa vahva visuaali luo sävyn. Kummassakin tapauksessa kuva pysyy kiinni sisällössä, jota se tukee, eikä irtoa asettelusta.
Katso, mitä kaikkea mukana on, WEMASYn Websitebuilderista, tai vertaile vaihtoehtoja hinnastosta.
Usein kysytyt kysymykset verkkosivuston kuvista
Tarvitsenko ammattilaisen ottamia kuvia verkkosivustolleni?
Ammattilaisten ottamat kuvat tekevät todellisen eron tärkeillä sivuilla, erityisesti etusivulla ja Tietoa meistä -sivulla, joilla luottamusta muodostetaan. Toissijaisiin kuviin, blogiartikkeleihin ja tukeviin visuaaleihin riittää hyvässä valossa nykyaikaisella puhelimella otettu kuva. Tärkeintä on, että kuva on aito ja olennainen yrityksellesi, ei se, että sen on ottanut ammattilainen. WEMASYn Websitebuilderilla voit tehdä tämän suoraan omalla verkkosivustollasi.
Montako kuvaa etusivulla pitäisi olla?
Riittävästi tukemaan osioita, ei niin montaa, että sivu tuntuu sotkuiselta tai latautuu hitaasti. Vahva pääkuva, yksi tai kaksi kuvaa sivun rungossa ja halutessa tiimi- tai työtilakuva alempana on järkevä rakenne useimmille pienyritysten etusivuille. Jokaisen kuvan pitäisi ansaita paikkansa eikä vain täyttää tilaa.
Voinko käyttää kuvapankkien kuvia verkkosivustollani?
Kyllä, tietyin ehdoin. Kuvapankit tarjoavat kuvia lisensseillä, jotka sallivat kaupallisen käytön, mutta tarkista jokaisen kuvan ehdot ennen käyttöä. Käytännön rajoitus on, että nämä kuvat näkyvät monilla muilla sivustoilla, joten käytä niitä tukeviin ja toissijaisiin kuvapaikkoihin äläkä ensisijaisena visuaalina luottamusta herättävillä sivuilla kuten etusivulla tai Tietoa meistä -sivulla.
Minkä kokoisia kuvia minun pitäisi ladata verkkosivustolleni?
Pakkaa ennen lataamista. Tavoittele alle 200 kilotavua useimmille sivun kuville ja alle 400 kilotavua pääkuville. Käytä JPEGiä valokuville, PNG:tä logoille ja läpinäkyville kuville ja WebP:tä, jos alustasi tukee sitä. Muuta kuvan koko aina suurimpaan leveyteen, jolla se näytetään, ennen lataamista sen sijaan, että antaisit selaimen skaalata sen pienemmäksi.
Vaikuttavatko kuvat verkkosivustoni hakusijoituksiin?
Kyllä, kahdella tavalla. Isot pakkaamattomat kuvat hidastavat sivuasi, minkä hakukoneet ottavat huomioon sijoituksissa. Kuvat ilman alt-tekstiä jättävät käyttämättä tilaisuuden kertoa hakukoneille, mitä sivu sisältää. Oikein mitoitetut kuvat kuvaavilla alt-teksteillä edistävät sekä sivun nopeutta että hakunäkyvyyttä.