Kuvat ovat olennainen osa nykyaikaisia verkkosivuja. Ne tekevät sisällöstä mielenkiintoisempaa ja helpommin ymmärrettävää, mutta samalla ne voivat joko parantaa tai heikentää sivustosi hakukonenäkyvyyttä. Kuvien optimointi on yksi niistä asioista, jotka jäävät helposti tekemättä, vaikka se voi tuoda merkittävää hyötyä.
Miksi kuvien optimointi on tärkeää?
Hakukoneet eivät ”näe” kuvia samalla tavalla kuin ihmiset. Ne lukevat kuviin liittyviä tietoja, kuten tiedostonimiä, alt-tekstejä ja ympäröivää sisältöä. Hyvin optimoidut kuvat auttavat hakukoneita ymmärtämään sivujesi sisällön paremmin, mikä voi parantaa sijoituksia hakutuloksissa. Lisäksi kuvahaku on oma mahdollisuutensa saada lisää kävijöitä sivustollesi.
Toisaalta huonosti optimoidut kuvat voivat hidastaa sivuston latausnopeutta merkittävästi. Kun sivusto latautuu hitaasti, kävijät kyllästyvät odottamaan ja hakukoneetkin rankaisevat hitaita sivustoja heikentämällä niiden sijoituksia.
Tiedostomuoto ja koko
Ensimmäinen askel kuvien optimoinnissa on oikean tiedostomuodon valinta. JPEG sopii hyvin valokuviin ja yksityiskohtaisiin kuviin, kun taas PNG on parempi vaihtoehto grafiikkaan ja kuviin, joissa tarvitaan läpinäkyvyyttä. WebP-formaatti on uudempi vaihtoehto, joka tarjoaa usein pienemmän tiedostokoon ilman laatutappioita, mutta vanhemmat selaimet eivät välttämättä tue sitä.
Tiedostokoko on kriittinen tekijä. Itse opin tämän kantapään kautta, kun huomasin asiakkaan sivuston latautuvan tuskallisen hitaasti. Syynä olivat suoraan kamerasta ladatut, useiden megatavujen kokoiset kuvat. Kun pakkasimme ne järkevään kokoon, latausnopeus parani huomattavasti ja sivuston pomppuprosentti laski.
Nyrkkisääntönä voi pitää, että yksittäisen kuvan ei pitäisi olla yli 100-200 kilotavua, ellei kyseessä ole joku erityisen tärkeä laatukuva. Verkossa on lukuisia ilmaisia työkaluja kuvien pakkaamiseen, kuten TinyPNG tai ImageOptim.
Alt-tekstit – hakukoneiden silmät
Alt-teksti eli vaihtoehtoinen teksti on kuvaan liitettävä kuvaus, joka näkyy, jos kuva ei lataudu tai jos käyttäjä käyttää ruudunlukijaa. Hakukoneet lukevat nämä tekstit ymmärtääkseen, mitä kuvassa on.
Hyvä alt-teksti on kuvaava mutta tiivis. Sen ei tarvitse olla kokonainen lause, mutta sen pitää kertoa oleellinen. Esimerkiksi sen sijaan, että kirjoittaisit ”kuva”, kirjoita ”punainen sohva modernissa olohuoneessa” tai ”leipuri koristamassa hääkakkua”. Vältä kuitenkin avainsanojen täyttämistä – kirjoita ihmisille, ei vain hakukoneille.
Tiedostonimi ja kuvatekstit
Myös tiedostonimellä on merkitystä. Sen sijaan, että tallentaisit kuvan nimellä ”IMG_1234.jpg”, anna sille kuvaava nimi kuten ”moderni-keittio-valkoinen.jpg”. Käytä väliviivoja sanojen erotteluun, ei alaviivoja tai välilyöntejä.
Kuvatekstit (captions) eivät ole yhtä kriittisiä kuin alt-tekstit, mutta nekin kannattaa käyttää, kun se on luontevaa. Ne parantavat käyttäjäkokemusta ja antavat hakukoneille lisätietoa kontekstista.
Responsiivisuus ja lazy loading
Nykyään sivustoja katsotaan monentyyppisillä laitteilla. Varmista, että kuvat mukautuvat eri näyttökokoihin. Voit myös käyttää lazy loading -tekniikkaa, jossa kuvat ladataan vasta, kun ne tulevat näkyviin ruudulla. Tämä nopeuttaa sivun ensimmäistä latautumista huomattavasti.
Kuvien optimointi saattaa tuntua pieneltä yksityiskohdalta, mutta se on yksi niistä helposti toteutettavista asioista, jotka todella tekevät eron verkkosivujen suorituskyvyssä ja hakukonenäkyvyydessä.