Yksi yleisimmistä verkkosivujen hidastumisen syistä ei liity WordPressiin, palvelimeen tai lisäosiin. Syy löytyy usein mediakirjastosta.
Törmään tähän jatkuvasti asiakkaideni sivustoilla. Sivustolle lisätään uusia blogiartikkeleita, referenssejä tai palvelusivuja, ja samalla WordPressiin ladataan kuvia suoraan puhelimesta, kamerasta tai kuvapankista. Kuvien lisääminen ei ole ongelma, mutta jos niitä ei valmistella verkkosivuille sopiviksi, ne voivat hidastaa sivustoa yllättävän paljon.
Hyvä uutinen on, että kuvien optimointi ei vaadi erityisiä teknisiä taitoja. Jo muutaman perusasian ymmärtäminen auttaa pitämään sivuston nopeampana ja käyttökokemuksen parempana.
Miksi liian suuret kuvat hidastavat verkkosivustoa?
Jokainen verkkosivulla näkyvä kuva täytyy ladata kävijän selaimeen. Mitä suurempi kuva on, sitä enemmän dataa täytyy siirtää.
Jos sivulla on useita suuria kuvia, niiden vaikutus alkaa nopeasti näkyä latausajassa. Tämä korostuu erityisesti mobiililaitteilla ja hitaammilla verkkoyhteyksillä.
Hitaat sivut eivät ole pelkästään käyttäjäkokemuksen ongelma. Ne voivat lisätä poistumisprosenttia, heikentää konversioita ja vaikuttaa myös hakukonenäkyvyyteen.
Siksi kuvien optimointi on yksi helpoimmista tavoista parantaa verkkosivujen suorituskykyä.
Kuvan resoluutio kertoo kuvan mitat
Kun puhutaan kuvan koosta, tarkoitetaan usein kahta eri asiaa. Ensimmäinen niistä on kuvan resoluutio.
Kuvan resoluutio kertoo, kuinka monta pikseliä kuvassa on. Esimerkiksi puhelimella otettu kuva voi olla kooltaan 3936 × 2624 pikseliä. Ensimmäinen luku kertoo kuvan leveyden ja toinen korkeuden.
Mitä enemmän pikseleitä kuvassa on, sitä tarkempi kuva yleensä on. Samalla myös tiedostokoko kasvaa. Verkkosivuilla näin suurille kuville on kuitenkin harvoin tarvetta.
Vertailun vuoksi tavallisen Full HD -näytön resoluutio on 1920 × 1080 pikseliä. Jos käytät verkkosivulla koko näytön levyistä bannerikuvaa, noin 1920 pikselin leveys riittää useimmissa tapauksissa hyvin.
Jos kuva näkyy vain puolen sivun levyisenä, riittää usein noin 960 pikselin leveys. Blogiartikkelien sisältökuvissa ja henkilöstökuvissa riittää usein 800–1200 pikseliä. Mitä pienemmällä alueella kuva näkyy, sitä pienempi resoluutio sille yleensä riittää.
Minkä kokoisia kuvia verkkosivuille kannattaa ladata?
Tarkat mitat riippuvat sivuston rakenteesta, mutta useimmilla yrityssivustoilla seuraavat koot toimivat hyvin:
| Käyttötarkoitus | Suositeltu leveys |
| Hero-kuva tai banneri | noin 1920 px |
| Blogiartikkelin pääkuva | 1200–1600 px |
| Sisältökuva | 800–1200 px |
| Henkilökuva | 600–1000 px |
| Verkkokaupan tuotekuva | 800–1500 px |
Jos et ole varma, kuinka suuri kuva kannattaa ladata, on yleensä parempi valita hieman liian pieni kuin moninkertaisesti liian suuri.
Poikkeuksiakin toki on. Esimerkiksi valokuvaajien portfoliot ja muut kuvapainotteiset sivustot voivat vaatia tavallista suurempia kuvia.
Kuvan tiedostokoko kertoo, kuinka paljon dataa siirretään
Resoluutio ja tiedostokoko liittyvät toisiinsa, mutta ne eivät ole sama asia. Tiedostokoko kertoo, kuinka paljon levytilaa kuva vie ja kuinka paljon dataa kävijän selaimen täytyy ladata.
Tiedostokoko ilmoitetaan yleensä kilotavuina (kt) tai megatavuina (Mt).
Esimerkiksi:
| Kuva | Tiedostokoko |
|---|---|
| Optimoitu sisältökuva | 200 kt |
| Suoraan puhelimesta ladattu kuva | 5 Mt |
Vaikka kuvat näyttäisivät verkkosivulla lähes samanlaisilta, jälkimmäinen on 25 kertaa suurempi. Jos samalla sivulla on viisi vastaavaa kuvaa, selain joutuu lataamaan noin 25 megatavua dataa yhden megatavun sijaan.
Moni yllättyy siitä, kuinka paljon tiedostokoko vaikuttaa verkkosivujen nopeuteen. Käyttäjä ei näe tiedostokokoa, mutta selain joutuu lataamaan jokaisen tavun.
Hyviä suuntaa-antavia tavoitteita ovat:
- sisältökuvat alle 300 kt
- pääkuvat alle 500 kt
- mahdollisuuksien mukaan kaikki kuvat alle 1 Mt
Tiedostokokoa voi pienentää esimerkiksi pienentämällä kuvan resoluutiota, tallentamalla kuvan sopivassa tiedostomuodossa ja optimoimalla kuvan siihen tarkoitetulla työkalulla. Optimointi tarkoittaa käytännössä sitä, että kuvasta poistetaan ylimääräistä tietoa ja tiedostokoko pienenee ilman näkyvää vaikutusta kuvan laatuun. Useimmiten jo pelkkä resoluution pienentäminen tuo merkittävän parannuksen.
JPEG, PNG vai WebP?
Oikean tiedostomuodon valitseminen vaikuttaa yllättävän paljon kuvan kokoon.
JPEG
JPEG on yleensä paras vaihtoehto valokuville. Se tarjoaa hyvän kuvanlaadun suhteellisen pienellä tiedostokoolla ja sopii useimpiin verkkosivujen kuviin.
PNG
PNG kannattaa yleensä varata tilanteisiin, joissa tarvitaan läpinäkyvää taustaa tai erittäin tarkkoja graafisia elementtejä. Valokuvissa PNG kasvattaa tiedostokokoa usein tarpeettoman paljon.
WebP
WebP on uudempi tiedostomuoto, joka tarjoaa usein saman kuvanlaadun huomattavasti pienemmällä tiedostokoolla. Monet nykyaikaiset WordPress-sivustot käyttävätkin WebP-kuvia joko suoraan tai automaattisesti optimointilisäosien avulla.
Ilmaiset työkalut kuvien optimointiin
Kuvien optimointiin ei tarvitse hankkia Photoshopia tai muita maksullisia ohjelmia.
Photopea
Photopea toimii suoraan selaimessa eikä vaadi asennusta. Sen avulla voit muuttaa kuvan kokoa, rajata kuvaa ja tallentaa sen verkkosivuille sopivassa muodossa.
Squoosh
Squoosh on yksi parhaista ilmaisista työkaluista tiedostokoon pienentämiseen. Voit vertailla alkuperäistä ja optimoitua kuvaa rinnakkain ja nähdä heti, kuinka paljon tiedostokoko muuttuu.
Tinify
Tinify on erittäin helppokäyttöinen palvelu kuvien pakkaamiseen. Vedä kuva selaimeen, odota hetki ja lataa pienempi versio takaisin koneellesi.
Muista myös kuvan nimi ja alt-teksti
Kuvan optimointi ei tarkoita pelkästään tiedostokoon pienentämistä.
Sen sijaan että kuvan nimi olisi esimerkiksi:
IMG_4827.jpg
on parempi käyttää kuvaavaa nimeä, kuten:
verkkosivujen-kuvien-optimointi.jpg
Tämä ei yksinään nosta sivustoa hakutulosten kärkeen, mutta auttaa hakukoneita ymmärtämään sivun sisältöä hieman paremmin. Myös alt-teksti kannattaa lisätä WordPressissä kuvan lataamisen jälkeen. Alt-teksti auttaa ruudunlukijoita käyttäviä henkilöitä ja antaa hakukoneille lisätietoa kuvan sisällöstä.
Jos haluat perehtyä aiheeseen tarkemmin, lue myös artikkelini Optimoi WordPressin mediakirjaston kuvatekstit ja paranna SEO:ta.
Tarkistuslista kuvan lisäämisen yhteydessä
Ennen kuin lisäät kuvan verkkosivuille, käy läpi nämä viisi kohtaa:
✔ Kuvan leveys on käyttötarkoitukseen sopiva
✔ Tiedostokoko on mahdollisimman pieni
✔ Tiedostomuoto on oikein valittu
✔ Kuvan nimi kuvaa sisältöä
✔ Alt-teksti on lisätty WordPressissä
Näiden tarkistamiseen kuluu yleensä alle minuutti, mutta vaikutus verkkosivujen suorituskykyyn voi olla huomattava.
Yhteenveto
Liian suuret kuvat ovat yksi yleisimmistä syistä verkkosivujen hidastumiseen, mutta samalla myös yksi helpoimmin korjattavista ongelmista.
Kun pienennät kuvat oikeaan kokoon ennen lataamista, valitset sopivan tiedostomuodon ja pidät tiedostokoon kohtuullisena, sivusto latautuu nopeammin ja käyttäjäkokemus paranee.
Muutaman minuutin työ ennen kuvan lataamista voi säästää paljon aikaa myöhemmin – sekä sinulta että verkkosivujesi kävijöiltä.
Tarvitsetko kuvia verkkosivuillesi? Kokosin toiseen artikkeliin omat suosikkini ilmaisista kuvapankeista sekä vinkkejä kuvien valintaan: Parhaat ilmaiset kuvapankit yrityksen verkkosivuille
