Nopeampi sivusto ja parempi käyttäjäkokemus WordPressissä

Oletko huomannut, että osa WordPress-sivustoista latautuu hitaasti? Yksi tavallisimmista syistä on liian raskas kuvamateriaali. Suuret, pakkaamattomat tai väärän kokoiset kuvat voivat kasvattaa sivun ladattavaa tietomäärää huomattavasti.

Kuvat ovat tärkeä osa verkkosivustoa. Ne tekevät sisällöstä kiinnostavampaa, havainnollistavat asioita ja voivat tukea myyntiä tai yhteydenottoja. Samalla ne ovat usein sivun raskaimpia elementtejä. Kun kuvat optimoidaan oikein, sivusto latautuu nopeammin, käyttää vähemmän mobiilidataa ja tuntuu kävijälle sujuvammalta.

Kuvien optimointi ei yksin ratkaise hakukonesijoituksia, mutta nopea ja teknisesti toimiva sivusto tukee hyvää käyttäjäkokemusta. Lisäksi oikein nimetyt ja kuvatut kuvat auttavat hakukoneita ymmärtämään niiden sisältöä. Google suosittelee käyttämään kuville kuvaavia tiedostonimiä ja tarkoituksenmukaisia alt-tekstejä. (Google for Developers)

Kuvien optimointi tarkoittaa käytännössä sitä, että:

• kuva tallennetaan tarkoitukseen sopivassa tiedostomuodossa
• kuvan mitat vastaavat mahdollisimman hyvin sen käyttökokoa
• tiedostokoko pidetään pienenä ilman näkyvää laadun heikkenemistä
• selaimelle tarjotaan sopivan kokoinen kuva eri laitteilla
• kuvilla on saavutettavat ja kuvaavat alt-tekstit

Miksi kuvien optimointiin kannattaa panostaa?

Nopeampi lataus: Pienemmät kuvat latautuvat nopeammin, mikä tekee sivusta miellyttävämmän käyttää.

Parempi käyttäjäkokemus: Kävijän ei tarvitse odottaa suurten kuvien latautumista, varsinkaan mobiiliyhteydellä.

Pienempi tiedonsiirto: Kevyemmät kuvat säästävät palvelimen resursseja ja kävijän mobiilidataa.

Parempi saavutettavuus: Kuvaavat alt-tekstit auttavat ruudunlukijan käyttäjiä ymmärtämään sivun sisältöä.

Parempi näkyvyys kuvahaussa: Selkeät tiedostonimet, alt-tekstit ja kuvan yhteydessä oleva asiayhteys helpottavat hakukonetta tulkitsemaan kuvaa. (Google for Developers)

Valitse kuvalle oikea tiedostomuoto

Kaikille kuville ei ole yhtä parasta formaattia. Valinta riippuu siitä, onko kyse valokuvasta, logosta, ikonista, piirroksesta vai esimerkiksi läpinäkyvällä taustalla olevasta grafiikasta.

JPEG sopii yleensä valokuville

JPEG eli JPG on edelleen hyvä vaihtoehto valokuville ja monivärisille kuville. Sen vahvuus on häviöllinen pakkaus: tiedostokokoa voidaan pienentää huomattavasti ilman, että kuvanlaatu näyttää tavallisessa verkkokäytössä selvästi huonommalta.

JPEG ei tue läpinäkyvyyttä. Siksi se ei ole paras vaihtoehto esimerkiksi logoille, joiden taustan pitää olla läpinäkyvä.

Kuvan tallennuslaadulle ei ole yhtä oikeaa prosenttilukua. Monissa tapauksissa noin 60–80 prosentin laatu tuottaa hyvän tasapainon tiedostokoon ja kuvanlaadun välillä, mutta lopputulos kannattaa aina tarkistaa silmämääräisesti.

PNG sopii logoille, grafiikoille ja läpinäkyville kuville

PNG on hyvä valinta, kun tarvitset läpinäkyvän taustan tai kuvalta vaaditaan tarkkoja reunoja. Se sopii usein logoihin, kuvakkeisiin, kaavioihin ja yksinkertaisiin grafiikoihin.

PNG käyttää tavallisesti häviötöntä pakkausta. Kuvan laatu säilyy, mutta tiedostokoko voi olla huomattavasti JPEG-kuvaa suurempi, erityisesti valokuvissa.

PNG:tä ei kannata käyttää suurille valokuville vain siksi, että laatu säilyy täydellisenä. Verkkosivulla hyvin pakattu JPEG, WebP tai AVIF on usein käytännöllisempi vaihtoehto.

PNG-8, PNG-24 ja PNG-32

Kuvankäsittelyohjelmissa puhutaan usein PNG-8-, PNG-24- ja PNG-32-vienneistä. Ne eivät ole täysin erillisiä kuvaformaatteja, vaan tapoja tallentaa PNG-kuvan väritietoa.

PNG-8 käyttää enintään 256 väriä. Se sopii yksinkertaisiin kuvakkeisiin ja grafiikoihin, joissa ei tarvita laajaa väriskaalaa.

PNG-24 sopii kuville, joissa tarvitaan paljon värejä ja tarkkoja sävyjä.

PNG-32 sisältää yleensä myös alfa-läpinäkyvyyden, joten sitä käytetään usein logoissa ja grafiikoissa, joiden reunoissa tarvitaan pehmeää läpinäkyvyyttä.

Käytännössä tärkeintä on tarkistaa, että kuva näyttää hyvältä ja että tiedostokoko on tarkoitukseen nähden järkevä.

SVG on erinomainen logoille ja ikoneille

SVG on vektorigrafiikkaformaatti. Se ei perustu pikseleihin, vaan matemaattisiin muotoihin. Siksi SVG-kuva pysyy terävänä riippumatta siitä, näytetäänkö se pienenä kuvakkeena vai suurena logona.

SVG sopii erityisesti:

• logoihin
• ikoneihin
• yksinkertaisiin kuvituksiin
• viivoihin, muotoihin ja kaavioihin
• elementteihin, joiden väriä halutaan muuttaa CSS:llä

SVG ei sovellu tavallisiin valokuviin.

WordPress ei yleensä salli SVG-tiedostojen lataamista oletuksena turvallisuussyistä. SVG voi sisältää myös koodia, joten lataukset kannattaa sallia vain luotettavista lähteistä ja turvallisesti puhdistavan lisäosan avulla. (WordPress.org)

WebP ja AVIF ovat tehokkaita verkkokäyttöön

WebP on nykyaikainen kuvaformaatti, joka tukee sekä häviöllistä että häviötöntä pakkausta, läpinäkyvyyttä ja animaatioita. Se sopii moniin tilanteisiin, joissa aiemmin käytettiin JPEG- tai PNG-kuvaa.

AVIF on toinen moderni kuvaformaatti, joka voi tuottaa erittäin pieniä tiedostoja hyvällä kuvanlaadulla. Kaikilla sivustoilla sitä ei kuitenkaan tarvitse ottaa käyttöön, sillä käytännön toteutus, palvelinympäristö ja lisäosien tuki voivat vaihdella.

WebP ja AVIF voivat usein tarjota JPEG- ja PNG-kuvia paremman pakkauksen, mutta lopputulos riippuu aina kuvasta, asetuksista ja selaintuesta. (MDN Web Docs)

Useimmille WordPress-sivustoille WebP on hyvä lähtökohta. Hyvä kuvanoptimointilisäosa voi:

• luoda WebP- tai AVIF-versioita alkuperäisistä kuvista
• säilyttää alkuperäiset tiedostot varmuuskopioina
• tarjota sopivan tiedostomuodon selaimen tuen mukaan
• pakata myös vanhat Mediakirjaston kuvat joukkotoiminnolla

Käytä oikeankokoisia kuvia

Yksi yleisimmistä virheistä on ladata WordPressiin paljon suurempi kuva kuin sivulla tarvitaan.

Esimerkiksi 4000 pikseliä leveä kamerakuva on turhan suuri, jos se näytetään artikkelissa enintään 800 pikselin levyisenä. Selain joutuu lataamaan suuren tiedoston ja pienentämään sen näytölle sopivaksi.

Kuvan ei tarvitse olla täsmälleen saman levyinen kuin sen näkyvä koko, sillä suuritarkkuuksiset näytöt hyötyvät hieman suuremmasta lähdekuvasta. Hyvä käytännön sääntö on käyttää kuvalle noin 1–2 kertaa sen suurin näkyvä leveys.

Jos kuva näkyy sivulla enintään 800 pikselin levyisenä, noin 1200–1600 pikselin levyinen alkuperäinen kuva riittää usein hyvin.

Selvitä sivustosi tavallisimmat kuvakoot

Sivustolla voi olla useita erilaisia kuvapaikkoja:

• artikkelien sisältökuvat
• artikkelien nostokuvat
• verkkokaupan tuotekuvat
• galleriakuvat
• hero-kuvat ja bannerit
• sivupalkin kuvat
• logot ja ikonit

Kaikille kuville ei tarvitse käyttää samaa kokoa. Hero-kuva tarvitsee yleensä suuremman tiedoston kuin artikkelin keskellä näkyvä kuva.

WordPress luo kuville automaattisesti useita eri kokoja. Tavallisissa WordPress-kuvissa selain voi valita srcset– ja sizes-attribuuttien avulla laitteelle sopivan kuvatiedoston. Tämä toimii kuitenkin parhaiten silloin, kun kuvat lisätään WordPressin omilla työkaluilla eikä esimerkiksi taustakuvina tai ulkopuolisella koodilla. (WordPress Developer Resources)

Rajaa kuva ennen lataamista

Kuvan rajaaminen on usein tehokkaampi keino pienentää tiedostokokoa kuin pelkkä pakkaus.

Jos kuvassa on paljon tyhjää taivasta, tarpeetonta taustaa tai kohteen kannalta merkityksetöntä aluetta, rajaa kuva ennen WordPressiin lataamista. Näin kuva voi näyttää paremmalta ja latautua nopeammin.

Kuvan voi käsitellä esimerkiksi:

• Photoshopilla
• GIMPillä
• Affinity Photolla
• Macin Esikatselu-ohjelmalla
• Windowsin Kuvat- tai Paint-sovelluksella
• verkkopohjaisella kuvankäsittelytyökalulla

Tarkista aina lopputulos. Liian voimakas pakkaus näkyy usein epätarkkuutena, väripintoihin ilmestyvinä häiriöinä tai tekstin ja yksityiskohtien sumentumisena.

Kuvien pakkaaminen WordPressissä

Vaikka kuva olisi oikean kokoinen, se voi silti olla tarpeettoman raskas. Kuvanoptimointilisäosa auttaa pienentämään tiedostokokoa automaattisesti.

Hyvä lisäosa voi pakata uudet kuvat heti latauksen yhteydessä sekä käsitellä myös Mediakirjastossa jo olevia tiedostoja.

Lisäosaa valitessa kannattaa tarkistaa ainakin nämä asiat:

• tukeeko se JPEG-, PNG-, WebP- ja mahdollisesti AVIF-kuvia
• säilyttääkö se alkuperäiset kuvat varmuuskopioina
• voiko vanhat kuvat optimoida joukkotoiminnolla
• tuottaako se tarvittaessa eri kuvatiedostot eri selaimille
• onko palvelussa riittävästi kuukausittaista kuvakiintiötä
• toimiiko lisäosa luotettavasti käyttämäsi välimuisti- ja CDN-ratkaisun kanssa

Häviöllinen ja häviötön pakkaus

Kuvanpakkaus voi olla häviöllistä tai häviötöntä.

Häviöllinen pakkaus poistaa kuvasta tietoa, jota ihmissilmä ei yleensä helposti huomaa. Sen avulla tiedostokoko voi pienentyä paljon. Se sopii hyvin valokuviin, kun asetukset ovat kohtuulliset.

Häviötön pakkaus pienentää tiedostokokoa muuttamatta kuvan sisältöä. Tiedosto pienenee yleensä vähemmän, mutta kuvanlaatu säilyy täysin samana.

Valokuvissa kevyt häviöllinen pakkaus on usein järkevin ratkaisu. Logoissa, kuvakkeissa ja tarkkaa tekstiä sisältävissä grafiikoissa häviötön pakkaus voi olla turvallisempi vaihtoehto.

Alt-tekstit ja kuvien hakukonenäkyvyys

Alt-teksti on kuvan tekstivastine. Se auttaa ruudunlukijan käyttäjiä ymmärtämään, mitä kuvassa on, ja tarjoaa hakukoneelle lisätietoa kuvan sisällöstä.

Hyvä alt-teksti kuvailee olennaisen asian, jonka kuva välittää käyttäjälle.

Huono alt-teksti:

kuva, WordPress, WordPress-kuva, hakukoneoptimointi, SEO

Parempi alt-teksti:

WordPressin Mediakirjasto, jossa käyttäjä lisää kuvalle alt-tekstin.

Alt-tekstiin ei tarvitse väkisin tunkea avainsanoja. Kirjoita mieluummin luonnollinen ja kuvaava teksti.

Jos kuva on vain koristeellinen eikä tuo sisältöön mitään uutta, alt-tekstin voi jättää tyhjäksi. Esimerkiksi pelkkä taustakoriste, jakoviiva tai visuaalinen tunnelmakuva ei aina tarvitse kuvausta.

Google suosittelee kuvaavia alt-tekstejä ja varoittaa avainsanojen tarpeettomasta toistamisesta. (Google for Developers)

Käytä kuvaavia tiedostonimiä

Tiedostonimi kannattaa miettiä ennen kuvan lataamista WordPressiin.

Huono tiedostonimi:

IMG_4728.jpg

Parempi tiedostonimi:

wordpress-kuvien-optimointi.jpg

Käytä sanojen välissä tavallista väliviivaa. Älä käytä välilyöntejä, erikoismerkkejä tai pitkää satunnaista numerosarjaa.

Kuvaava tiedostonimi antaa hakukoneelle pienen lisävihjeen kuvan sisällöstä, mutta se ei korvaa hyvää alt-tekstiä, kuvan ympärillä olevaa tekstiä tai laadukasta sisältöä. (Google for Developers)

Kuvan kuvaus ei korvaa alt-tekstiä

WordPressin Mediakirjastossa voi lisätä kuvalle otsikon, kuvatekstin, vaihtoehtoisen tekstin ja kuvauksen.

Näistä alt-teksti on saavutettavuuden kannalta tärkein. Kuvateksti kannattaa lisätä silloin, kun kävijän pitää nähdä kuvan yhteydessä lisätietoa. Kuvakenttään voi kirjoittaa esimerkiksi kuvan paikan, kuvaajan nimen, käyttöoikeuden tai tarkemman selityksen.

Kuvaus-kenttä ei yleensä ole merkittävä SEO-tekijä, eikä sitä tarvitse täyttää jokaiselle kuvalle.

Harkitse kuvalinkkejä

WordPressissä kuvan voi linkittää esimerkiksi mediatiedostoon, liitesivuun, omaan URL-osoitteeseen tai jättää kokonaan ilman linkkiä.

Useimmissa artikkeleissa hyvä lähtökohta on joko:

• kuva ei ole linkki mihinkään
• kuva avautuu suurempana lightbox-näkymässä
• kuva linkittää vain silloin, kun linkki palvelee kävijää selvästi

Liitesivu ei ole tavallisissa sisältökuvissa yleensä tarpeellinen. Se voi johtaa kävijän sivulle, jossa näkyy vain kuva ja vähän muuta sisältöä.

Jos taas kyseessä on esimerkiksi portfolio, tuotekuva tai yksityiskohtainen kartta, suurempana avautuva kuva voi olla kävijälle hyödyllinen.

Lazy loading: lataa kuvat vasta tarvittaessa

Lazy loading tarkoittaa sitä, että sivun alaosassa olevia kuvia ei ladata heti, vaan vasta kun kävijä vierittää lähemmäs niitä.

Tämä voi nopeuttaa sivun ensimmäistä latausta erityisesti pitkissä artikkeleissa, gallerioissa ja verkkokauppasivuilla.

Hero-kuvaa, ensimmäistä suurta sisältökuvaa tai muuta heti näkyvää kuvaa ei kuitenkaan pidä lazy-loadata. Jos tärkein sivun yläosassa näkyvä kuva latautuu liian myöhään, sivun suorituskykymittarit voivat heikentyä. (web.dev)

Tarkista erityisesti:

• latautuuko sivun yläosan pääkuva heti
• ovatko pitkän artikkelin alemmat kuvat lazy load -tilassa
• käytetäänkö hero-kuvassa tarpeettoman suurta tiedostoa
• onko sivulla useita samankaltaisia kuvia, joita kävijä ei todennäköisesti koskaan näe

Tarkista sivuston nopeus säännöllisesti

Kuvien optimoinnin vaikutusta kannattaa seurata käytännössä. Testaa tärkeimmät sivut ennen muutoksia ja niiden jälkeen.

Hyödyllisiä työkaluja ovat esimerkiksi:

• Google PageSpeed Insights
• Lighthouse
• GTmetrix
• WebPageTest

Kiinnitä erityisesti huomiota siihen:

• kuinka suuri sivun kokonaiskoko on
• mitkä kuvat ovat raskaimpia
• latautuuko suurin näkyvä kuva nopeasti
• tarjoaako sivusto kuvia tarpeettoman suurina
• puuttuuko kuvista leveys- ja korkeusmittoja
• latautuvatko kuvat tehokkaassa formaatissa

Käytännön tarkistuslista ennen kuvan julkaisemista

Ennen kuin lataat uuden kuvan WordPressiin, käy läpi nämä kohdat:

1. Onko kuva rajattu tarkoituksenmukaisesti?
2. Onko kuvan leveys sopiva sen näkyvään käyttökokoon?
3. Onko tiedostomuoto oikea: JPEG, PNG, WebP, AVIF tai SVG?
4. Onko tiedostonimi kuvaava?
5. Onko kuvalla hyvä alt-teksti, jos kuva välittää olennaista sisältöä?
6. Onko kuva pakattu ilman näkyvää laadun heikkenemistä?
7. Tarvitseeko kuvan avautua suurempana vai onko linkitys tarpeeton?
8. Onko kuvan tarkoitus näkyä heti sivun yläosassa vai voiko se latautua vasta vierityksen yhteydessä?

Yhteenveto

Kuvien optimointi WordPressissä ei vaadi koodarin tai graafikon taitoja. Tärkeintä on muodostaa selkeä rutiini: rajaa kuva, pienennä se oikeaan kokoon, valitse sopiva tiedostomuoto, pakkaa tiedosto ja lisää tarvittaessa hyvä alt-teksti.

Aloita tärkeimmistä sivuista ja suurimmista kuvista. Jo muutaman raskaan hero-kuvan, artikkelikuvan tai tuotekuvan optimointi voi pienentää sivun ladattavaa tietomäärää selvästi.

Kun kuvien käsittelystä tulee osa normaalia julkaisuprosessia, sivusto pysyy nopeampana, miellyttävämpänä käyttää ja helpompana ylläpitää.