Kuvat tekevät sivustosta houkuttelevan, mutta ne ovat myös tavallisin syy siihen, että sivu latautuu hitaasti. Yksi puhelimella otettu valokuva voi olla useita megatavuja, ja jos sellainen ladataan sivulle sellaisenaan, kävijä joutuu odottamaan. Hyvä uutinen on, että kuvien keventäminen on yksi helpoimmista tavoista nopeuttaa WordPress-sivustoa. Tässä artikkelissa käydään läpi, mihin kannattaa kiinnittää huomiota.
Oikea koko jo ennen latausta
Ensimmäinen ja usein tehokkain askel otetaan jo ennen kuin kuva päätyy WordPressiin. Jos sivuston sisältöalue on esimerkiksi noin 1 200 pikseliä leveä, ei ole järkeä ladata kuvaa, joka on monta kertaa leveämpi. WordPress luo kuvasta automaattisesti pienempiä versioita, mutta alkuperäinen tiedosto jää palvelimelle viemään tilaa, ja joissain teemoissa juuri se päätyy näkyviin. Kun kuvan pienentää sopivaan kokoon jo omalla koneella, säästää sekä tallennustilaa että latausaikaa.
Myös rajaus kannattaa tehdä etukäteen. Jos kuvasta näytetään vain keskiosa, turhat reunat kannattaa leikata pois ennen tallennusta.
Tiedostomuoto ratkaisee paljon
JPEG sopii valokuviin, PNG puolestaan grafiikoihin, logoihin ja kuviin, joissa tarvitaan läpinäkyvyyttä. Nykyään moni sivusto käyttää lisäksi WebP-muotoa, joka pakkaa kuvat yleensä selvästi pienemmiksi kuin JPEG tai PNG ilman, että ero näkyy silmällä. WordPress tukee WebP-kuvia, ja kaikki yleiset selaimet osaavat näyttää ne. Ikoneihin ja yksinkertaisiin kuvioihin sopii myös SVG-muoto, mutta sen lataaminen vaatii WordPressissä erillisen lisäosan, koska SVG-tiedostoja ei tietoturvasyistä sallita oletuksena.
Pakkaus ja lisäosat
Pakkauksessa kuvatiedostosta poistetaan tietoa, jota ihmissilmä ei juuri huomaa. Sen voi tehdä ennen latausta kuvankäsittelyohjelmalla, mutta WordPressissä työn voi myös automatisoida. Tarjolla on useita kuvien optimointiin tarkoitettuja lisäosia, jotka pakkaavat kuvat latauksen yhteydessä, muuntavat ne tarvittaessa WebP-muotoon ja käsittelevät myös mediakirjastossa jo olevat kuvat. Valitse yksi luotettava lisäosa ja vältä useampaa päällekkäistä, sillä ne voivat käsitellä samoja tiedostoja ristiin. Vinkkejä sopivien laajennusten valintaan löydät sivulta WordPress lisäosat.
Laiska lataus ja oikeat mitat
Laiska lataus eli lazy loading tarkoittaa, että selain lataa kuvan vasta, kun kävijä on vierittämässä sen kohdalle. WordPress lisää ominaisuuden kuviin automaattisesti, joten pitkillä sivuilla kaikkia kuvia ei ladata heti. Sivun yläosan pääkuvaa ei kuitenkaan kannata ladata laiskasti, koska se halutaan näkyviin mahdollisimman nopeasti.
Toinen helposti unohtuva asia ovat kuvan leveys- ja korkeusmääritteet. Kun selain tietää kuvan mitat etukäteen, se osaa varata kuvalle tilan, eikä sivun sisältö hypi latauksen aikana. Tämä parantaa käyttökokemusta ja näkyy myös Googlen Core Web Vitals -mittareissa.
Älä unohda alt-tekstejä ja tiedostonimiä
Optimointi ei ole pelkkää tiedostokokoa. Jokaiselle sisältökuvalle kannattaa kirjoittaa lyhyt vaihtoehtoinen teksti, joka kertoo, mitä kuvassa on. Alt-teksti auttaa ruudunlukijaa käyttäviä kävijöitä ja kertoo hakukoneille kuvan sisällöstä. Myös tiedoston nimi kannattaa muuttaa kuvaavaksi ennen latausta, esimerkiksi muotoon kahvila-terassi.jpg eikä kameran antamaa numerosarjaa.
Kuvien optimointi ei vaadi teknistä erityisosaamista, mutta se kannattaa tehdä järjestelmällisesti. Kun uudet kuvat pienennetään, pakataan ja nimetään heti oikein, sivusto pysyy kevyenä myös vuosien päästä. Jos haluat tietää, mitkä muut tekijät vaikuttavat latausaikaan, lue myös sivumme nettisivun nopeudesta.