WordPress-kuvien optimointi käytännössä
Kuvat ovat tärkeä osa toimivaa verkkosivustoa. Ne tekevät sisällöstä kiinnostavampaa, havainnollistavat asioita ja voivat tukea brändiä. Samalla liian suuret tai huonosti optimoidut kuvat ovat yksi tavallisimmista syistä hitaasti latautuviin WordPress-sivustoihin.
Kuvien optimointi ei kuitenkaan vaadi syvällistä teknistä osaamista. Kun valitset oikean tiedostomuodon, muutat kuvat sopivan kokoisiksi, pakkaat ne järkevästi ja lisäät niille kuvaavat alt-tekstit, sivusto latautuu nopeammin ja toimii paremmin myös mobiilissa.
Tässä artikkelissa käydään läpi käytännön keinot, joilla voit optimoida kuvat WordPress-sivustollasi.
Miksi kuvien optimointi on tärkeää?
Kuvat vaikuttavat suoraan siihen, kuinka nopeasti sivu latautuu. Jos sivulla on useita suuria kuvatiedostoja, kävijän selain joutuu lataamaan paljon dataa ennen kuin sisältö näkyy kunnolla.
Hidas latautuminen heikentää käyttäjäkokemusta. Osa kävijöistä voi poistua sivulta jo ennen kuin sisältö ehtii avautua. Tämä voi vaikuttaa esimerkiksi yhteydenottoihin, ostoksiin, sivustolla vietettyyn aikaan ja muuhun käyttäjien toimintaan.
Nopea sivusto ei yksin takaa hyviä hakukonesijoituksia, mutta sivuston suorituskyky ja käyttökokemus ovat osa hyvää teknistä hakukoneoptimointia. Kuvien optimointi on siksi järkevä perustoimenpide lähes jokaisella WordPress-sivustolla.
Kuvien optimoinnista on hyötyä erityisesti näissä asioissa:
- sivut latautuvat nopeammin
- mobiilikäyttö paranee
- palvelimen ja kävijän verkkoyhteyden kuormitus vähenee
- käyttäjäkokemus paranee
- sivuston tekninen SEO on helpompi pitää kunnossa
1. Valitse kuvalle oikea tiedostomuoto
Oikea tiedostomuoto vaikuttaa merkittävästi kuvan tiedostokokoon ja kuvanlaatuun. Eri muodot sopivat eri käyttötarkoituksiin.
JPEG tai JPG valokuville
JPEG on edelleen yleinen ja toimiva valinta valokuville sekä kuville, joissa on paljon värejä, varjoja ja pehmeitä värisiirtymiä.
JPEG-pakkaus pienentää tiedostokokoa poistamalla osan kuvadatan yksityiskohdista. Hyvin säädettynä ero alkuperäiseen kuvaan on usein verkkokäytössä hyvin pieni, mutta tiedostokoko voi pienentyä huomattavasti.
JPEG sopii esimerkiksi luonto-, henkilö-, tuote- ja maisemakuviin.
PNG grafiikoille ja läpinäkyville kuville
PNG sopii erityisesti kuviin, joissa tarvitaan läpinäkyvyyttä. Tällaisia ovat esimerkiksi logot, kuvakkeet, yksinkertaiset grafiikat ja kuvat, joissa on teräviä reunoja tai tekstiä.
PNG säilyttää yksityiskohdat tarkasti, mutta tiedostokoko voi olla huomattavasti suurempi kuin vastaavassa JPEG- tai WebP-kuvassa. Siksi PNG ei yleensä ole paras vaihtoehto suuriin valokuviin.
WebP on hyvä yleiskäyttöinen vaihtoehto
WebP on nykyaikainen kuvatiedostomuoto, joka tarjoaa usein JPEG- ja PNG-kuvia pienemmän tiedostokoon hyvällä kuvanlaadulla. Se tukee myös läpinäkyvyyttä ja animaatioita.
WebP-tuki on nykyisin laaja moderneissa selaimissa, joten se on monelle WordPress-sivustolle hyvä oletusmuoto. Monet kuvien optimointilisäosat voivat muuntaa aiemmin ladatut JPEG- ja PNG-kuvat automaattisesti WebP-muotoon.
AVIF voi pienentää tiedostokokoa vielä lisää
AVIF on WebP:täkin uudempi kuvatiedostomuoto. Se voi tarjota erittäin hyvän kuvanlaadun pienellä tiedostokoolla, erityisesti valokuvissa.
AVIF ei ole aina paras ratkaisu kaikkiin tilanteisiin, sillä sen luominen voi olla palvelimelle raskaampaa ja lisäosan tai webhotellin on tuettava muotoa. Jos sivustosi optimointityökalu tukee AVIF-kuvia luotettavasti, sitä kannattaa harkita erityisesti suurilla ja paljon kuvia sisältävillä sivustoilla.
SVG logoille ja ikoneille
SVG on vektorimuoto, joka sopii erityisesti logoihin, kuvakkeisiin ja yksinkertaisiin graafisiin elementteihin. SVG-kuva säilyy terävänä kaikissa kokoluokissa, koska se ei perustu pikseleihin.
WordPress ei salli SVG-tiedostojen lataamista oletuksena, koska SVG voi sisältää myös haitallista koodia. Käytä SVG-kuvia vain luotettavista lähteistä ja varmista, että ne puhdistetaan turvallisesti ennen lataamista sivustolle.
2. Pakkaa kuvat ennen tai jälkeen lataamisen
Oikea tiedostomuoto auttaa paljon, mutta pakkaaminen on yleensä seuraava tärkein vaihe. Pakkaamisella voidaan pienentää kuvan tiedostokokoa ilman, että kuvanlaatu heikkenee verkkokäytössä merkittävästi.
Häviöllinen pakkaus
Häviöllinen pakkaus poistaa kuvasta osan datasta, jota ihmissilmä ei yleensä helposti huomaa. Se tarjoaa usein pienimmän tiedostokoon, mutta liian voimakas pakkaus voi tehdä kuvasta pehmeän, rakeisen tai pikselöityneen.
Valokuvissa verkkokäyttöön sopii usein noin 75–85 prosentin laatuasetus. Sopiva arvo riippuu kuitenkin kuvasta: yksityiskohtainen luontokuva voi vaatia korkeampaa laatua kuin yksinkertainen taustakuva.
Häviötön pakkaus
Häviötön pakkaus poistaa kuvasta turhaa teknistä tietoa, mutta säilyttää kuvan alkuperäiset pikselit muuttumattomina. Se sopii erityisesti grafiikoille, logoille ja kuville, joissa pienet yksityiskohdat ovat tärkeitä.
Tiedostokoko ei yleensä pienene yhtä paljon kuin häviöllisessä pakkauksessa, mutta kuvanlaatu säilyy täysin ennallaan.
Kuvien pakkaaminen WordPressissä
Kuvia voi pakata jo ennen niiden lataamista WordPressiin tai automaattisesti lisäosan avulla.
Suosittuja WordPressin kuvien optimointityökaluja ovat esimerkiksi Smush, ShortPixel ja EWWW Image Optimizer. Niillä voi yleensä pakata uusia kuvia automaattisesti, optimoida jo mediakirjastossa olevia kuvia sekä muuntaa kuvia WebP- tai AVIF-muotoon.
Jos haluat pakata kuvan ennen WordPressiin lataamista, voit käyttää esimerkiksi TinyPNG-, TinyJPG- tai Compressor.io-palveluita.
Valitse yksi selkeä työnkulku. Kuvan pakkaaminen usealla eri palvelulla tai lisäosalla peräkkäin voi heikentää kuvanlaatua tarpeettomasti.
3. Muuta kuvan koko oikeaksi jo ennen lataamista
Yksi yleisimmistä virheistä on ladata sivustolle paljon suurempi kuva kuin sivulla todella tarvitaan.
Esimerkiksi kamerasta ladattu kuva voi olla 5 000 pikseliä leveä, vaikka se näkyisi artikkelissa vain noin 800 pikselin levyisenä. Selain joutuu silti lataamaan koko suuren tiedoston, vaikka se näyttäisi sen lopulta paljon pienempänä.
Tämä kasvattaa sivun latausaikaa turhaan.
Ennen kuvan lataamista mieti, missä sitä käytetään:
- näkyykö se pienenä esikatselukuvana
- onko se artikkelin sisältökuva
- käytetäänkö sitä koko näytön levyisenä hero-kuvana
- näkyykö se verkkokaupan tuotekuvana
- tarvitseeko se toimia myös suurilla näytöillä
Jos kuva näkyy sivulla enintään 1 200 pikseliä leveänä, ei yleensä ole järkevää ladata siitä 5 000 pikselin levyistä versiota.
WordPress luo ladatuista kuvista automaattisesti eri kokoisia versioita. Tämä auttaa responsiivisessa kuvien lataamisessa, mutta alkuperäisen kuvan kannattaa silti olla järkevän kokoinen. Liian suuri alkuperäinen kuva kasvattaa mediakirjaston tilankäyttöä ja voi tehdä varmuuskopioista tarpeettoman suuria.
Hyvä työnkulku on yleensä tämä:
- valitse sopiva tiedostomuoto
- rajaa kuva tarvittavaan sommitteluun
- muuta kuva sopivan kokoiseksi
- pakkaa kuva
- lataa kuva WordPressiin
4. Kirjoita kuvaavat alt-tekstit ja tiedostonimet
Hakukoneet eivät tulkitse kuvia samalla tavalla kuin ihminen. Ne tarvitsevat tekstimuotoista tietoa kuvan sisällöstä. Tässä alt-teksti ja tiedostonimi ovat hyödyllisiä.
Alt-teksti auttaa saavutettavuudessa ja SEO:ssa
Alt-teksti eli vaihtoehtoinen teksti kuvailee kuvan sisältöä. Ruudunlukijat lukevat sen näkövammaisille käyttäjille, ja se voi näkyä myös silloin, jos kuva ei lataudu.
Hyvä alt-teksti kertoo olennaisen asian, joka kuvassa on. Sen ei tarvitse kuvailla jokaista yksityiskohtaa, vaan sen tulisi palvella sivun sisältöä ja asiayhteyttä.
Esimerkiksi:
Huono alt-teksti:
koira koiran kuva kultainen noutaja koirat
Parempi alt-teksti:
Kultainennoutaja leikkii pallolla puistossa
Jos kuva on vain koristeellinen eikä tuo sisältöön mitään olennaista, alt-tekstin voi jättää tyhjäksi. Tällöin ruudunlukija ei lue turhaa kuvausta käyttäjälle.
Alt-tekstiin voi sisällyttää sivun avainsanan silloin, kun se sopii kuvaukseen luonnollisesti. Avainsanoja ei kuitenkaan kannata toistaa väkisin.
Käytä kuvaavia tiedostonimiä
Nimeä kuva jo ennen WordPressiin lataamista. Tiedostonimi IMG_4821.jpg ei kerro kuvasta mitään, mutta esimerkiksi kultainennoutaja-puistossa.webp kertoo.
Käytä tiedostonimissä pieniä kirjaimia ja väliviivoja. Vältä välilyöntejä, erikoismerkkejä ja pitkää avainsanojen luettelointia.
5. Hyödynnä CDN:ää, kun se on tarpeen
CDN eli sisällönjakeluverkko voi nopeuttaa erityisesti paljon kuvia sisältävää sivustoa tai sivustoa, jolla on kävijöitä eri puolilta maailmaa.
CDN tallentaa sivuston staattisia tiedostoja, kuten kuvia, CSS-tiedostoja ja JavaScriptiä, useille palvelimille eri maantieteellisissä sijainneissa. Kun kävijä avaa sivuston, kuvat voidaan toimittaa hänelle lähimmältä palvelimelta.
Tämä voi pienentää viivettä ja tehdä sivustosta nopeamman etenkin silloin, kun kävijä sijaitsee kaukana varsinaisesta webhotellista.
Monet webhotellit tarjoavat CDN-palvelua osana pakettiaan tai lisäpalveluna. Tunnettuja vaihtoehtoja ovat esimerkiksi Cloudflare, Amazon CloudFront ja erilaiset WordPressiin integroituvat optimointipalvelut.
CDN ei kuitenkaan korjaa liian suuria tai huonosti pakattuja kuvia. Kuvat kannattaa optimoida ensin, ja CDN kannattaa nähdä lisäkeinona niiden nopeaan toimittamiseen.
6. Hyödynnä lazy loadingia
Lazy loading eli viivästetty lataus tarkoittaa, että sivun alempana olevia kuvia ei ladata heti. Ne ladataan vasta, kun käyttäjä vierittää sivua lähemmäs kyseistä kohtaa.
Tämä voi nopeuttaa sivun ensimmäistä latausta erityisesti pitkissä artikkeleissa, kuvagallerioissa ja verkkokauppojen tuoteluetteloissa.
WordPress tukee kuvien lazy loadingia oletuksena nykyaikaisissa versioissa. Joissakin välimuisti- ja optimointilisäosissa on lisäksi kehittyneempiä asetuksia, joilla voidaan hallita esimerkiksi ensimmäisen näkymän kuvien lataamista.
Tärkeää on, ettei sivun tärkeintä yläosan kuvaa viivästetä tarpeettomasti. Hero-kuvan tai ensimmäisessä näkymässä näkyvän suuren kuvan pitäisi yleensä latautua mahdollisimman nopeasti.
7. Varmista, että kuvat toimivat eri näytöillä
WordPress luo automaattisesti useita kuvakokoja ja käyttää srcset-tekniikkaa, jonka avulla selain voi valita sopivan kokoisen kuvan eri laitteille ja näyttöresoluutioille.
Tämä toimii parhaiten, kun teema käyttää WordPressin omia kuvatoimintoja oikein ja kuvat lisätään sivuille normaalisti mediakirjaston kautta.
Responsiiviset kuvat ovat erityisen tärkeitä mobiilikäytössä. Puhelimella ei yleensä kannata ladata yhtä suurta tiedostoa kuin leveällä työpöytänäytöllä.
Jos käytät sivunrakentajaa, kuvagalleriaa tai erikoisteemaa, tarkista silloin tällöin, että sivusto ei tarjoile mobiilikävijöille tarpeettoman suuria kuvia.
8. Huolehdi selaimen välimuistista
Selaimen välimuisti tallentaa osan sivuston tiedostoista kävijän laitteelle. Kun sama kävijä palaa sivustolle myöhemmin, selain voi käyttää jo tallennettuja kuvia ja muita staattisia tiedostoja sen sijaan, että ne ladattaisiin uudelleen palvelimelta.
Tämä nopeuttaa erityisesti toistuvia käyntejä.
Välimuistiasetuksia voidaan hallita webhotellin, CDN-palvelun tai välimuistilisäosan avulla. WordPressissä suosittuja välimuistiratkaisuja ovat esimerkiksi WP Super Cache, W3 Total Cache ja WP Rocket.
Usein kannattaa ensin selvittää, tarjoaako oma webhotelli jo palvelintason välimuistia. Kahden päällekkäisen välimuistiratkaisun käyttö voi joskus aiheuttaa ongelmia.
9. Tarkista sivuston kuvat säännöllisesti
Kuvien optimointi ei ole kertaluonteinen työ. Uusia kuvia lisätään usein jatkuvasti, joten sivuston suorituskyky kannattaa tarkistaa aika ajoin.
Voit käyttää esimerkiksi Google PageSpeed Insightsia, GTmetrixiä tai WebPageTestiä. Raporteissa kannattaa kiinnittää huomiota erityisesti huomautuksiin, jotka liittyvät liian suuriin kuviin, moderneihin tiedostomuotoihin, lazy loadingiin tai kuvien tehokkaaseen lataamiseen.
Testaa ainakin tärkeimmät sivut, kuten etusivu, suosituimmat artikkelit, palvelusivut ja verkkokaupan tuotesivut.
Yhteenveto
Kuvien optimointi on yksi tehokkaimmista tavoista nopeuttaa WordPress-sivustoa. Suurimmat hyödyt syntyvät yleensä jo perusasioista: käytä oikeaa tiedostomuotoa, muuta kuva sopivan kokoiseksi, pakkaa se järkevästi ja lisää kuvaava alt-teksti.
WordPressin optimointilisäosat, responsiiviset kuvat, lazy loading, välimuisti ja CDN voivat täydentää tätä kokonaisuutta. Ne eivät kuitenkaan korvaa huolellista kuvatyötä ennen lataamista.
Kun kuvien optimoinnista tulee osa normaalia julkaisurutiinia, sivusto pysyy nopeampana, miellyttävämpänä käyttää ja teknisesti paremmassa kunnossa myös pitkällä aikavälillä.