Kuvien optimointi tarkoittaa teknisten ja sisällöllisten säätöjen tekemistä verkkosivujen kuville, jotta ne latautuvat nopeammin ja parantavat sekä käyttäjäkokemusta että hakukonenäkyvyyttä. Oikein toteutettu kuva SEO sisältää tiedostokoon pienentämisen, sopivien kuvaformaattien valitsemisen ja alt-tekstien kirjoittamisen. Tässä oppaassa käsitellään tärkeimmät kysymykset kuvien optimoinnista verkkosivuille.
Mitä tarkoittaa kuvien optimointi ja miksi se on tärkeää?
Kuvien optimointi on prosessi, jossa verkkosivujen kuvat säädetään teknisesti ja sisällöllisesti mahdollisimman tehokkaiksi. Se sisältää tiedostokoon pienentämisen, oikeiden kuvaformaattien käytön, alt-tekstien lisäämisen ja responsive-toteutuksen. Optimointi parantaa sivuston latausnopeutta, käyttäjäkokemusta ja hakukonenäkyvyyttä merkittävästi.
Hakukoneoptimoinnin kannalta kuvien optimointi on välttämätöntä, koska hakukoneet eivät voi ”nähdä” kuvia samalla tavalla kuin ihmiset. Alt-tekstit ja kuvatiedostojen nimet auttavat hakukoneita ymmärtämään kuvien sisältöä ja indeksoimaan ne oikein. Tämä parantaa sivuston yleistä SEO-arvoa ja voi tuoda lisää liikennettä kuvahakujen kautta.
Teknisestä näkökulmasta optimoidut kuvat vähentävät sivuston latausaikaa, mikä on yksi Googlen ranking-tekijöistä. Hitaat sivustot menettävät kävijöitä ja sijoituksia hakutuloksissa. Kuvien optimointi on usein helpoin tapa parantaa sivuston Core Web Vitals -arvoja.
Mitkä kuvaformaatit ovat parhaat verkkosivuille?
WebP on nykyään paras kuvaformaatti useimmille verkkosivuille, koska se tarjoaa parhaan suhteen kuvanlaadun ja tiedostokoon välillä. JPEG sopii valokuville, PNG läpinäkyviä alueita sisältäville kuville ja AVIF on uusin, tehokas formaatti moderneihin selaimiin. Valinta riippuu kuvan tyypistä ja kohderyhmän selaimista.
JPEG on edelleen hyvä valinta valokuville ja monivärisille kuville, joissa ei tarvita läpinäkyvyyttä. Se pakkaa tehokkaasti, mutta menettää hieman kuvanlaatua. JPEG toimii kaikissa selaimissa ja on luotettava valinta.
PNG on välttämätön, kun kuva tarvitsee läpinäkyvän taustan tai sisältää tekstiä ja teräviä reunoja. Se säilyttää kuvanlaadun täydellisesti, mutta tuottaa suurempia tiedostoja kuin JPEG.
WebP yhdistää molempien edut: se tukee läpinäkyvyyttä ja tuottaa 25-35% pienempiä tiedostoja kuin JPEG tai PNG. Lähes kaikki nykyselaimet tukevat WebP:tä, joten se on usein paras valinta.
AVIF on uusin formaatti, joka tuottaa vielä pienempiä tiedostoja kuin WebP. Selaintuki on vielä rajallinen, mutta se kannattaa ottaa käyttöön moderneihin projekteihin varmuuskopioformaattien kanssa.
Miten kirjoitat tehokkaat alt-tekstit kuville?
Tehokas alt-teksti kuvaa kuvan sisällön selkeästi ja ytimekkäästi 125 merkin sisällä. Se palvelee sekä saavutettavuutta että hakukoneoptimointia. Hyvä alt-teksti kertoo, mitä kuvassa näkyy, mikä sen merkitys on sisällön kannalta, ja sisältää luonnollisesti asiaan liittyviä avainsanoja pakottamatta.
Huono alt-teksti: ”kuva1.jpg” tai ”kuva”. Nämä eivät kerro mitään kuvan sisällöstä eivätkä auta ketään.
Hyvä alt-teksti: ”Nainen kirjoittaa kannettavalla tietokoneella kahvilassa” tai ”Sininen hakukoneoptimoinnin kaavio, joka näyttää sivuston liikenteen kasvun”. Nämä kuvaavat kuvan sisällön selkeästi.
Saavutettavuuden kannalta alt-tekstit ovat välttämättömiä näkövammaisille käyttäjille, jotka käyttävät ruudunlukuohjelmia. Hyvin kirjoitettu alt-teksti antaa heille saman informaation kuin kuva näkeville käyttäjille.
Hakukoneoptimoinnissa alt-tekstit auttavat hakukoneita ymmärtämään kuvien sisältöä ja yhteyttä sivun aiheeseen. Älä kuitenkaan täytä alt-tekstiä avainsanoilla – kirjoita aina ihmisille, ei hakukoneille.
Mikä on optimaalinen kuvakoko verkkosivuille?
Optimaalinen kuvakoko riippuu käyttötarkoituksesta: hero-kuvat voivat olla 1920px leveitä, sisältökuvat 800-1200px ja pikkukuvat 300-400px. Tiedostokoko tulisi pitää alle 100kt useimmissa tapauksissa. Responsive-toteutuksessa tarvitaan useita kokoja eri laitteille srcset-attribuutin avulla.
Fyysisten mittojen osalta kannattaa noudattaa näitä ohjeita:
- Hero-kuvat ja banneri-kuvat: 1920x1080px tai 1600x900px
- Sisältökuvat artikkeleissa: 800x600px tai 1200x800px
- Tuotekuvat: 800x800px tai 1000x1000px
- Pikkukuvat ja galleriat: 300x300px tai 400x400px
Responsive-kuvien toteutus on nykyään välttämätöntä. Käytä srcset-attribuuttia tarjotaksesi eri kokoisia kuvia eri laitteille. Näin mobiililaitteet lataavat pienempiä kuvia eivätkä turhaan kuluta dataa tai latausaikaa.
Tiedostokoon tavoitteet kuvaformaateittain: JPEG-kuvat alle 100kt, PNG-kuvat alle 200kt, WebP-kuvat alle 80kt. Nämä ovat yleisiä ohjearvoja – tärkeintä on löytää tasapaino kuvanlaadun ja tiedostokoon välillä.
Miten kuvien optimointi vaikuttaa sivuston nopeuteen?
Kuvien optimointi vaikuttaa sivuston nopeuteen suoraan, koska kuvat muodostavat usein 60-80% sivun kokonaisdatasta. Optimoidut kuvat parantavat Core Web Vitals -mittareita, erityisesti Largest Contentful Paint (LCP) ja Cumulative Layout Shift (CLS) arvoja. Nopeat latausajat parantavat käyttäjäkokemusta ja hakukonenäkyvyyttä.
Core Web Vitals ovat Googlen tärkeitä mittareita sivuston suorituskyvylle. LCP mittaa suurimman sisältöelementin latausaikaa – usein tämä on kuva. Tavoitteena on alle 3 sekuntia. CLS mittaa sivun elementtien odottamatonta liikkumista latauksen aikana.
Käytännön vinkkejä nopeuden parantamiseen:
- Käytä lazy loading -tekniikkaa kuvien lataamiseen vasta kun ne tulevat näkyviin (ei hero-kuvalle kuitenkaan)
- Pakkaa kuvat aggressiivisesti menettämättä oleellista laatua
- Käytä CDN-palvelua kuvien nopeampaan jakeluun
- Määritä kuvien korkeus ja leveys CSS:ssä layout shift -ongelmien välttämiseksi
Oikein toteutettu kuvien optimointi on yksi nopeimmista tavoista parantaa sivuston suorituskykyä ja hakukonenäkyvyyttä.
Muista, että kuvien optimointi ei ole kertaluontoinen tehtävä. Säännöllinen kuvien tarkistus ja optimointi pitää sivustosi nopeana ja tehokkaana. Aloita tärkeimmistä sivuista ja etene systemaattisesti koko sivuston läpi.
Me autamme yrityksiä näkymään hakukoneissa tuottamalla hakuintentiota vastaavaa hyvin rakennettua sisältöä. Autamme myös tarvittaessa asiakkaitamme teknisessä optimoinnissa. Jos haluat näkyä paremmin Googlessa ja tekoälyissä, ota yhteyttä ja keskustellaan lisää!
