Kuvien optimointi ja hakukoneoptimointi

Julkaistu: 9 heinäkuun, 2021

Kuvat ovat laajalti yleishyödyllisessä käytössä ympäri verkkoa. Ne eivät ole enää pelkästään muistoja, joita keräämme vuosien aikana vaan niitä käytetään myös visuaalisessa tuotannossa. Kotisivut saavat kuvien avulla tarvitsemaansa tyylikkyyttä, sosiaalisessa mediassa ja sen ulkopuolella markkinoinnissa hyödynnetään kuvien käyttöä. Jopa blogiin päätyy kuvia erilaisista blogin aiheeseen liittyvistä asioista.

Kuvien optimointi ja varsinkin hakukoneoptimointi on tärkeää kotisivuja ajatellen.

Kuvien optimointi ja hakukoneoptimointi.

Tiesitkö, että Googlen hakukone kerää myös hakutulossivullensa kuvia? Googlen hakusivulla se tunnetaan kuvahakuna eli pystyt etsimään pelkästään kuvia tietyn hakusanan tai -lauseen perusteella. Hyvin hakukoneoptimoidut kuvat siis löytyvät helpommin kyseiseltä sivulta, mikä vaikuttaa myös osalta kotisivun näkyvyyteen.

Google kuvahaku löytää kuvat ja kotisivut, kuvien hakukoneoptimointi.

Yläkuvassa näkyy Googlen kuvahaun sivu. Hakusanana ”talon maalaus oulu”. Yläkuvaan on merkittynä punaisella kaikki kuvat kotisivuilta, joita me Kotisivusi.fi:ssä olemme toteuttaneet. Karkimaalaus.fi, Maalissa.fi ja OulunPintaPalvelu.fi sivustoilta löytyvät kuvat löytyvät siis kuvahaustakin erittäin korkealta – peräti ensimmäiseltä riviltäkin, sillä olemme optimoineet ja hakukoneoptimoineet kuvat hyvin.

Tähän on siis hyvä pyrkiä, kun kuvia optimoidaan ja hakukoneoptimoidaan.

Optimoi kuvat

Kuvien optimointi tapahtuu säätämällä kuvien kokoa ja tarvittaessa myös tiedostomuotoa. Verkossa löytyvillä kuvilla resoluutio eli tarkkuus on yleensä 72 ppi (pixels per inch, eli kuinka monta pikseliä on tuumalta) ja usein kuvat ovat JPG (tunnetaan myös JPEG eli Joint Photographic Experts Group) -tiedostomuodossa.
Kuvan koko ja tarkkuus eli resoluutio kotisivuilla, optimointia kuville.

Kuvapankeista usein esimerkiksi saa 72 ppi ja jopa 300 ppi kuvia. Painotuotteissa suositellaankin värikuvissa käytettävän vähintään 300 ppi, mutta verkossa riittää jopa 72 ppi. Todellisuudessa digitaalisen kuvan ei ole pakollista nykyään olla juuri se 72 ppi, kun sitä käyttää kotisivuilla, sosiaalisessa mediassa tai jopa blogissa.

Kuvan resoluutio 72 ppi, kuvien optimointi.
Kuvan resoluutio 300 ppi, kuvien optimointi.

Ylhäällä esimerkkinä kuvat 72 ppi ja 300 ppi resoluutiona (kuvat ovat samankokoiset). Eroa ei juurikaan näytöltä katsottuna löydy.

Tiedostokoon on suositeltavaa olla kotisivuilla ainakin se 100 kB tai alle. Toki 200 kB on myös hyvä, jos esimerkiksi juuri kotisivulla ei ole huomattava määrä kuvia, joita laitteen tai tietokoneen on ladattava, kun sivulle päätyy vierailemaan. Myös 500 kB kuvat ovat nykyisin hyväksyttäviä, mutta juuri harkiten mitä sivu jo sisältää ja kuinka paljon sivun sisältöä saa ladata ennen kuin se käy raskaaksi tietyillä laitteilla ja yhteyksillä.

JPG

Tiedostomuoto on suositeltua olla se JPG, sillä sitä tukee laajalti melkein jokainen taho ja se on tiedostokooltaan usein kevyempi kuin muut tiedostomuodot. Se tosin käyttää häviöllistä pakkausta bittikarttagrafiikan tallennusmuotona, joten kuvalaatu ei tietenkään ole PNG:n kaltainen.

PNG

PNG (Portable Network Graphics) ei ole huono idea kuvan tiedostomuotona myöskään, jos tahtoo häviötöntä bittikarttagrafiikkaa. Toisin kuin JPG-tiedostojen kanssa, PNG säilyttää kuvien korkean laadun. Tämän takia PNG on usein myös tiedostokooltaan raskaampia, joten PNG:tä kannattaa käyttää harkiten ja vain tietyissä kuvissa verkkosivustolla.

Kuvan ominaisuudet tietokoneella, kuvien optimointia.

Tietokoneella kuvan ominaisuuksista löytää helposti kuvien tiedot. Hieman ylempää artikkelissa näkyneen ”kuva-resoluutio-72ppi” nimisen kuvan tiedot ovat sellainen yli 500 kt (kilotavua eli kilobyte = kB), joka ei tietenkään ole optimaalinen kotisivuille jo sen yli 200 kB tiedostokoon takia, mutta koska halusin sen olevan mahdollisimman tarkka ilman, että vaihtaisin kuvan PNG-tiedostomuotoon, päätyi se tuollaiseksi.

WebP

WebP on yksi nykyisistä kuvatiedostomuodoista, jonka Google suunnitteli korvaamaan JPG:n. Ja sitä on jo käytetty jonkun verran erilaisilla sivuilla. Siinä voi käyttää häviötöntä ja häviöllistä pakkausta. Sitä mainostetaan myös kotisivusuunnittelijoille hyödylliseksi, sillä WebP pakkaa kuulemma häviöttömät kuvatiedostot peräti 26% pienemmäksi kuin PNG:n. Häviölliset kuvatiedostot pakkautuvat jopa 25-34% pienemmäksi kuin tietyt JPG:t.

Kuvankäsittelyohjelmat ja muut optimointityökalut apuna

Kuvia tosiaan voi optimoida eli kuvan koon voi säätää ja kuvan voi uudelleen tallentaa toisella tiedostomuodolla kuvankäsittelyohjelmilla. Myös verkosta löytyy nopea tapa pakata kuvia kevyempään muotoon muun muassa Optimizilla ja kun käytät WordPressiä kotisivujen tai blogin julkaisualustana, optimoi WordPress versio 5.3 ja uudemmat versiot liian suuria kuvia automaattisesti sopivankokoisiksi. Kyseisellä alustalla voi kuvien kokoa säätää myös sen omassa mediakirjaston kuva-asetuksissa. Kuvien optimoimiselle saa WordPressissä myös käyttöön lisäosia, kuten EWWW Image Optimizer tai WP-Optimize.

Kuvien hakukoneoptimointi

Miten sitten hakukoneoptimoimme kuvia? No, ideana siis on, että kuvista löytyy otsikko (title) ja alt-teksti. Tämä siis tarkoittaa, että esimerkiksi auringonkukkaa esittävälle kuvalle lähdekoodiin kannattaa kirjoittaa kuvan kohtaan seuraavasti:

<img src=”https://verkkotunnus.fi/auringonkukka.jpg” title=”Auringonkukka” alt=”Kuva auringonkukasta Oulussa.”>

Tässä kohta src on url-osoite, josta kyseinen kuva haetaan sivulle. Title on otsikko ja alt kuvan vaihtoehtoinen teksti, joka kuvaa lyhyesti mitä kuvassa on tai tapahtuu. Paikkakuntakin kannattaa ovelasti sinne aina piilottaa, jos yritys esimerkiksi sitä näkyvyyttä tarvitsee tietylle alueelle.

Toki jos käytämme tässä WordPress julkaisualustaa, niin sieltä löytyy jo valmiiksi hyvät työkalut kuvien hakukoneoptimoimiselle.

Kuvan hakukoneoptimointia WordPressillä.

Kun WordPressin mediakirjastossa painaa jotakin mediakirjastossa sisältämää kuvaa, avautuu siihen ”Liitteen tiedot”-näkymä. Eli siinä näkyy se kuva, jota painettiin ja oikealla on itse kuvan tiedot. Ideana siis on tosiaan vain kirjoittaa lyhyt kuvaava teksti ”vaihtoehtoinen teksti”-kohtaan ja sitten kuvalle sopiva otsikko. Varmistaa vain, että muutokset tallentuvat tietoihin ja näin kuvat on hakukoneoptimoitu. Ne voi sitten lisätä sivulle.

Muista kuitenkin ensin nimetä kuvatiedostot

Mutta huomio! Muistithan nimetä ensin kuvat ennen kuin latasit ne kotisivutilaan tai WordPressin mediakirjastoon? Kuvilla on omat tiedostonimet. Auringonkukka kuvalla se voi olla auringonkukka.jpg. Nimeäminen kannattaa olla lyhyt ja kuvaa kuvaava. Sen jälkeen sen voi ladata mediakirjastoon, jonka jälkeen sille tehdään loput hakukoneoptimoimisen tärkeät asiat.

Yhteystiedot ja yhteydenottolomake

Kotisivut yritykselle logo, Kotisivusi fi tekee kotisivut yrityksille ympäri Suomen, Oulu Helsinki Turku Joensuu Kuopio Tampere Jyväskylä Rovaniemi.

Asiakaspalvelu ja myynti

Joona Tuomivaara

+358 40 5902072

Kotisivut yritykselle tekee Joona Tuomivaara

Vuotta kokemusta

Toteutettua kotisivuprojektia

Kotisivujen hinta alkaen