Näin optimoit valokuvia nettisivuillesi

Tässä blogipostauksessa kerron sinulle muutaman hyödyllisen neuvon koskien valokuvien optimointia nettisivuille. Uskaltaisin väittää, että hyvin moni meistä naisyrittäjistä (kenties jokainen?) on jossain kohtaa sortunut lataamaan verkkosivuilleen kuvan lainkaan miettimättä sen optimointia ensin. Saatamme ajatella että tämähän on ammattikuvaajan ottama laadukas brändikuva, liveksi vaan! Mutta ehei, muutama tärkeä asia tulisi ottaa huomioon ennen kuvien lataamista nettisivualustalle, kuten vaikkapa Squarespaceen. Sillä vaikka uniikit brändikuvat ovat tärkeä osa yrityksen visuaalista ilmettä, huonosti valmisteltuina ne voivat tehdä sivuillesi hallaa. Kun luet tämän blogipostauksen, tiedät mihin kaikkeen tulisi erityisesti kiinnittää huomiota.

Kuvien koko

Yksi suurimmista nettisivuille hallaa tekevistä asioista, on aivan liian suurikokoiset kuvat. Kuvan suuruudella en tarkoita sitä onko kuva isona bannerina etusivulla vaan puhun nyt kuvan kokonaiskoosta. Siitä, kuinka monta kilobittiä tai megaa valokuva on. Jos sivuillasi vilisee kymmeniä monen megatavun kuvia, on selvää, ettei sivut lataudu kovinkaan nopeasti selailijalle. Tämä heikentää selailukokemusta ja voi herkästi saada kävijän jopa suoraan poistumaan sivuiltasi. Myös hakukoneet, kuten Google, voi rankaista sivujasi hitaasta latautuvuudesta mikä tarkoittaa heikompaa näkyvyyttä.

On siis ensisijaisen tärkeää tutustua kuvien kokoon ja pakata niitä tarpeen vaatiessa pienemmiksi. Monilta ammattikuvaajilta voi myös saada suoraan nettisivuille optimoituja kuvia ja tätä kannattaakin etukäteen tiedustella. Tilanne voi kuitenkin olla myös se, että saat itsellesi vain alkuperäiset jättisuuret kuvat joita voi olla kiva painattaa vaikkapa tauluiksi huoneen seinälle, mutta nettisivuilla ne aiheuttavat sellaisenaan hitautta. Kuvien pakkaamiseen on monia erilaisia työkaluja ja itse brändisuunnittelijana käytän Adobe Photoshopia. Mutta jos kaipaat ilmaista työkalua niin sivusto nimeltä TinyPNG on vallan näppärä kuvien pakkaamiseen.

Nyrkkisääntönä ohjeistan omille asiakkailleni, että 500 kilobitin kuva on optimaalinen koko. Mikäli kuvan laatu ei meinaa kestää pakkaamista niin pieneksi, esim. vaaleasävyisessä kuvassa sävyt muuttuvat liikaa, voi rajaa hieman korottaa.

Mitä enemmän sinulla on kuvia nettisivuillasi, sitä tarkempi sinun tulisi olla optimoinnin kanssa. Jos olet valokuvaaja tai perustat Shopify verkkokauppaa, on kuvien määrä hyvin suurella todennäköisellä iso. Tällöin kuvien pakkaaminen tarpeeksi pieneksi kannattaa opetella heti alusta lähtien.

Tallennusmuodoista paras on .jpg ja pikselit voivat olla esimerkiksi 1500 px ja isommissa bannerikuvissa 2500 px. Muista, että suuri kuva ei aina tarkoita että se olisi automaattisesti parempi. Jos kuvaa käytetään pienenä neliönä, on täysin turhaa tallentaa sitä vaikkapa 6000 px kokoisena.

Kuvien nimeäminen

On erittäin tyypillistä, että verkkosivuille ladattavat kuvia ei ole nimetty optimaalisesti. Kuvan nimessä saattaa olla pitkä rimpsu numeroita ja kirjaimia, jotka eivät varsinaisesti auta Googlea ymmärtämään, mitä kuva esittää. Moni ei edes tiedä, että hakukoneet pystyvät tulkitsemaan myös tiedostonimiä.

Muista siis tästä lähtien muokata kuvatiedostojesi nimet. Alla muutama esimerkki:

Jos olet valokuvaaja ja kuvassasi on hääpari Helsingin Tuomiokirkon edustalla, tiedostonimi voisi olla:

haakuvaus-helsinki-tuomiokirkko.jpg

Jos taas olet graafikko ja kyseessä on kuva omasta työtilastasi, nimeksi voisi kirjata:

graafinen-suunnittelija-tyotila-espoo.jpg

Itse tykkään yleensä lisätä ihan alkuun myös yrityksen nimen. Tärkeää on pitää tiedostonimi selkeänä ja kuvaavana. Käytä mieluummin pieniä kirjaimia ja väliviivoja kuin pitkiä rimpsuja, erikoismerkkejä tai ylimääräisiä numeroita. Kun kuvia alkaa olla paljon, on sinunkin helpompi tulkita kuvakirjastoasi vaikkapa Squarespacen omassa Assets kansiossa.

Lisää alt-teksti

Kuvan tiedostonimi ei ole sama asia kuin alt-teksti. Alt-teksti eli vaihtoehtoinen teksti kertoo tekstimuodossa, mitä kuvassa on. Sitä hyödynnetään muun muassa saavutettavuudessa ja tilanteissa, joissa kuva ei jostain syystä lataudu. Kun lisäät alt-tekstit kuvillesi, parantaa se samalla myös näkyvyyttäsi hakukoneissa. Hyvä alt-teksti on ennen kaikkea kuvaileva.

Jos kuvassa on esimerkiksi nainen työskentelemässä kannettavan tietokoneen äärellä, alt-tekstiksi voisi kirjoittaa:

"Yrittäjä työskentelee kannettavalla tietokoneella valoisassa työtilassa."

Alt-tekstiä ei ole tarkoitettu avainsanojen väkisin ujuttamiseen, vaan kuvan sisällön kuvaamiseen. On tärkeä myös tiedostaa, ettei kaikille kuville voi lisätä alt-tekstiä Squarespacessa. Esimerkiksi taustakuvat ovat sellaisia.

Haluatko ymmärtää paremmin, miten voit parantaa Squarespacen nettisivujesi näkyvyyttä?

Tilaa kokoamani Squarespace SEO opas tästä.

Lopuksi

Kuvien optimoinnista puhutaan usein SEO:n yhteydessä, eikä syyttä. Mutta itse ajattelen asiaa kuitenkin hieman laajemmin. Kuvien optimoinnin tarkoitus ei ole ainoastaan miellyttää Googlea. Sen tarkoitus on tehdä nettisivuistasi paremmat ihmisille. Kun sivut latautuvat nopeasti, kuvat ovat teräviä, sisältö toimii mobiilissa ja kokonaisuus näyttää ammattimaiselta, paranee myös vierailijan käyttökokemus. Ja loppujen lopuksi juuri sillä on väliä. Google voi tuoda potentiaalisen asiakkaan sivuillesi, mutta nettisivujesi tehtävä on saada hänet viihtymään siellä.

Kuvien optimointi ei todellakaan ole niitä kaikkein jännittävimpiä työvaiheita nettisivuprojektissa. Se on kuitenkin juuri niitä pieniä asioita, jotka kannattaa tehdä kunnolla heti alussa. Silloin sinun ei tarvitse myöhemmin käydä koko sivustoa läpi ja miettiä, miksi latausajat ovat hitaita ja miksi sivujen suorituskyky näyttää punaista. Ja jos kerran olet investoinut laadukkaaseen brändikuvaukseen, haluat varmasti myös antaa kuville niiden ansaitseman mahdollisuuden loistaa nettisivuillasi.

Kun yrityksellä on tarve laadukkaille valokuville, mutta käytössä vain pieni budjetti, apu voi löytyä kuvapankeista. Saat alla olevalla linkillä 15% alennuksen laadukkaan Haute Stock kuvapankin jäsenyydestä.