Johdanto
Kuvien suuri koko on yksi yleisimmistä syistä verkkosivujen hitaaseen latautumiseen. Tehokkaasti optimoidut kuvat ovat avain nopeampaan sivulataukseen, parantuneeseen käyttäjäkokemukseen ja tehokkaaseen hakukoneoptimointiin (SEO). Nopea sivuston lataus on myös ympäristöyställisempää! Vähemmän datan lähetystä palvelimen ja selaimen välillä tarkoittaa maltillisempaa sähkönkäyttöä.
Tässä artikkelissa käymme läpi, kuinka voit tehokkaasti parantaa sivustosi suorituskykyä ja hakukonelöydettävyyttä kuvien avulla.
Rajaa kuvat sopivaan kuvasuhteeseen
Liian suuret kuvat hidastavat sivujen latautumista, ja voi muutenkin olla tarpeen leikata tarpeeton sisältö kuvien reunoilta pois. Ennen sivustolle lataamista säädä siis kuvien fyysinen koko (leveys ja korkeus) vastaamaan sivustosi tarpeita croppaamalla kuvasti haluamaasi suhteeseen. Vaaka toimii tyypillisesti parhaiten, mutta voi olla tapauksia jossa haluat nimenomaa pysty- tai neliömuotoisia kuvatiedostoja.
Tallenna kuvat oikeaan formaattiin
Kuvan formaatti on keskeinen tekijä, joka vaikuttaa sen tiedostokokoon ja laatuun. JPEG ja PNG ovat kaksi suosituinta formaattia: JPEG on usein valittu valokuvien käsittelyyn, sillä se tarjoaa tasapainoisen yhdistelmän hyvää laatua ja kohtuullista tiedostokokoa. PNG puolestaan on ihanteellinen valinta, kun tarvitaan korkealaatuisia kuvia, joissa on läpinäkyvyyttä. Molempien formaattien ongelmana on, että niitä ei ole pakattu tehokkaasti pieneen kokoon. Printtimediaa varten tarkoitetut korkealaatuiset formaatit kuten TIFF eivät kuulu webbiin!
WebP, joka on suhteellisen uusi formaatti, tarjoaa erinomaisen pakkaustehokkuuden säilyttäen samalla kuvan korkean laadun. Se suorittaa sekä häviöttömän että häviöllisen kuvien pakkaamisen paremmin kuin perinteiset PNG ja JPEG -formaatit. 92% kaikista selaimista tukee tällä hetkellä AVIF-formaattia, mutta voit tarkistaa ajantasaisen tilanteen tästä linkistä: https://caniuse.com/avif.
Bonus: Videoformaatit
Artikkelin kirjoittamishetkellä kaikki suositummat selaimet tukevat AV1 videoformaattia. https://caniuse.com/av1 Lisäksi monet vanhemmat versiot tukevat WEBM videoformaattia. Molemmat näistä pakkaavat reippasti paremmin kuin perinteiset formaatit. Näitä hyödyntäessä minimityö on huolehtia verkkosivulla videot olemaan WEBM muodossa, edistyneemmät toimenpiteet ovat ulkoistaa webhotellista pois videoiden hostaus esim. Vimeo-palveluun ja AV1 formaatin käyttö omana <source> lähteenä videoelementeille. Ulkoista palvelua käyttäessä siihen erikoistunut palvelu huolehtii parhaan mahdollisen formaatin verkkokehyksessään toistettavaksi.
Käytä lisäosaa kuvaversioiden tuottamiseen
Jotta et joudu itse tallentamaan kuvia useisiin eri versioihin (esim. pieni, keskikokoinen, iso) kuvankäsittelyohjelmassa, voit käyttää lisäosaa eli pluginia. Lisäosa luo WEBP -formaatin kuvia alkuperäisistä kuvista (esim. JPG) ja käyttää tätä parempaa formaattia sivustolla automaattisesti. WordPress-käyttäjille on tarjolla useita lisäosia WEBP-kuvien tuottamiseen. Tällä hetkellä suosittelemme tähän Converter for Media -pluginia. Lisäosa on tarjolla ilmaiseksi, mutta sen maksullisessa versiossa voi luoda myös AVIF -formaatin tiedostoja.
Bonus: Taaksepäin yhteensopivuus
Joskus moderni formaatti on liian moderni. Vanhemmat iOS Safari-selaimet saattavat esimerkiksi vieläkin tarvita perinteisen H.264 version videoista ja JPG version kuvista, kun samojen elementtien AV1 videot ja AVIF kuvat lataavat sitä tukevat modernit selaimet. Jos taaksepäin yhteensopivuus on huoli, sekä <picture> että <video> elementti tukee eri lähdeformaattien erittelyä sisäisten <source> tägien mukaan, jolloin loppukäyttäjän selain valitsee automaattisesti sille selaimelle parhaan version.
Pakkaa tarvittaessa manuaalisesti
Kuvien pakkaaminen on tärkeää latausnopeuden parantamiseksi, riippumatta tiedostoformaatista. Jos automaattinen pakkaaminen ei jostain syystä ole optio, voit tehdä sen myös manuaalisesti. Kun pakkaat kuvia manuaalisesti, voit käyttää työkaluja kuten Adobe Photoshop, GIMP tai verkossa toimivia työkaluja kuten TinyPNG tai Compressor.io, jotka vähentävät kuvan tiedostokokoa vaikuttamatta merkittävästi sen laatuun. Työkaluilla säädetään kuvan laatua. Yleisesti kuvan laatua pystyy laskemaan 70% luokkaan, ilman että se näkyvästi vaikuttaa kuvaan. Huomioi kuitenkin että kerran menetettyä dataa on varsin vaikeaa saada takaisin, eli laadun skaalaaminen paremmaksi ei lähtökohtaisesti onnistu – joskin generatiiviset tekoälyratkaisut muuttavat tilannetta tältä osin.
Välimuistita kuvasi
Välimuistittamalla kuvat saatat nopeuttaa sivustosi lataamista merkittävästi. Kyseinen tekniikka tarkoittaa sitä, että kun esimerkiksi lataat kerran sivuston logon, niin siirryttyäsi toiselle sivulle latautuukin logo välimuistista. Se siis ladataan sinun koneeltasi eikä tässä tarvitse uudelleen käyttää verkkoyhteyttä palvelimen ja selaimen välillä. WordPressissä on paljon lisäosia, jolla voi helposti toteuttaa välimuistituksen sivuilla. Näitä ovat esimerkiksi W3 Total Cache ja WP Super Cache. Myös monet kehittyneet palvelin- ja webhotelliympäristöt tekevät tämän puolestasi. Yleensä välimuistituksen yhteydessä hyödynnetään CDN:ää, jota käydään läpi alempana.
Käytä Lazy Loading -tekniikkaa ja ennaltalataamista
Lazy Loading on tekniikka, joka lataa kuvat vasta kun ne tulevat näkyviin käyttäjän näytöllä. Tämä vähentää alkuperäisen sivulatauksen aikaa, koska sivusto ei lataa kaikkia kuvia samantien. Nykyinen kuvalohko hoitaa laiskalataamisen automaattisesti. Muiden kuvien osalta asia täytyy hoitaa koodin puolella kuntoon erikseen.
Bonus: Tarkemmin laiskalataamisesta
Vanhoina hyvinä aikoina viritettiin omat, JavaScript-pohjaiset järjestelmät jossa kuvien ”data-src” muuttui ”src” attribuutiksi tai vastaavaa. Nykyään selaimet tukevat automaattista laiskalatausta käyttämällä loading="lazy" attribuuttia kuvaelementissä. Kuvat jotka näkyvät heti ruudulla sivuston avautuessa, kuten Hero-taustakuvat, kuuluu omata päinvastaisen määrityksen eli loading="eager". Tällä tavoin ilmaistaan selaimelle että sitä kyseistä kuvaa tullaan tarvitsemaan välittömästi. Myös välittömästi ladattaville kuville voi selainta varten määritellä ennaltalataamisen <link rel="preload" href="/kuva.avif" as="image" /> HTML dokumentin <head> osiossa jolloin sivulta toiselle liikkuessa selain osaa linkkien perusteella ennaltaladata jo ”seuraavan sivun” kuvat!
Hyödynnä CDN:ää
Kuvien tallentaminen sisällönjakeluverkostoon (CDN) voi merkittävästi nopeuttaa kuvien latautumista. CDN tallentaa kuvat useille palvelimille eri puolilla maailmaa, mikä nopeuttaa niiden latautumista eri sijainneissa oleville käyttäjille. CDN palvelut ovat maksullisia, esimerkiksi näitä tarjoaa: BunnyCDN, Cloudflare CDN, Fastly, Amazon CloudFront. WordPress tarjoaa myös lisäosia, joilla helpotat kuvien tallentamista CDN palveluun. Esimerkiksi BunnyCDN:llä on oma lisäosa, sen löytää täältä. CDN on tarpeellinen lähinnä suurille sivustoille joilla on globaali käyttäjäkunta.
Optimoi Alt-tekstit
Alt-teksti on tekstimuotoinen kuvaus kuvan sisällöstä. Alt-tekstin käyttötarkoituksia ovat näkörajoitteisten käyttäjien palveleminen sekä sellaiset tilanteet joissa kuva ei jostain syystä lataudu. Vaikka Alt-tekstit eivät suoraan vaikuta kuvien latausnopeuteen, ne ovat olennaisia hakukonenäkyvyyden ja -optimoinnin kannalta: Alt-tekstit auttavat hakukoneita ymmärtämään kuvan sisällön, mikä parantaa sivustosi hakukonenäkyvyyttä. Pitämällä Alt-tekstit ajan tasalla parannat myös sivustosi saavutettavuutta merkittävästi.
Tiedosta tekijänoikeudet
Kuvilla on yleensä kuvaaja, joka omistaa kuvan käyttöoikeudet. Ennen kuvan lisäämistä sivuille on tärkeää olla tietoinen siitä millaiset käyttöoikeudet sinulla ja organisaatiollasi on kuvaan.
Yhteenveto
Kuvien optimointi on tärkeää verkkosivujen nopeuden ja käyttäjäkokemuksen kannalta. Mitä enemmän sivustolla on käyttäjiä ja siis sivulatauksia, sitä merkityksellisemmäksi tämä muodostuu. Kuvien optimointi ja ajan tasalla pitäminen on jatkuva prosessi, joka vaatii pitkäjänteistä työtä.
