Pidä huolta kuvakirjastostasi.
Kuvien optimointi jää monesti huomioimatta verkkosivulla, joka johtaa hitaisiin sivuihin ja huonoon käyttäjäkokemukseen. Monissa tapauksissa suurin osa sivusi latausajasta kuluu kuvien lataamiseen.
Isokokoiset kuvatiedostot, tai väärät tiedostomuodot johtavat hitaaseen sivuun. Tämän takia on tärkeää optimoida kuvat oikein, jotta ne eivät häiritse sivun käyttäjiä.
Kannattaa myös ottaa huomioon kuvien tiedostonimi. Sivullesi ladattujen kuvien tiedostonimet ovat näkyvissä kaikille, joten ne kannattaa pitää siistinä. Tämä helpottaa myös isojen kuvakirjastojen siistinä pitoa.
Mikä on paras tiedostomuoto?
Yleisimmät kuvamuodot ovat JPG ja PNG. Verkkosivuilla vastaan tulee myös WebP-tiedostoja.
JPG-tiedosto pakkaantuu pienempään kokoon, PNG-tiedostossa voit käyttää läpinäkyvää taustaa. Kumpaakaan näitä ei kuitenkaan kannata käyttää verkkosivuilla.
WebP-formaatti on luotu juuri verkkosivuilla käyttöä varten. Se yhdistää muiden tiedostomuotojen hyvät puolet, mutta pitää tiedostokoon silti pienenä.
Uusi AVIF-tiedostomuoto on myös tulossa laajamittaiseen käyttöön, joka tarjoaa vieläkin parempaa tiedostokokoa sekä laatua samanaikaisesti. Sen ominaisuuksia kannattaa kuitenkin tutkia ennen käyttöä. Täältä näet tuettujen selainten listan: caniuse.com/avif
Pidä resoluutio sopivana
Tarkat kuvat näyttävät paremmalta, ja mahdollistavat niiden käyttämisen monessa eri paikkaa sivuillasi. Mutta jos kuvasi ovat liian tarkkoja, ne vievät turhaa latausaikaa.
Kuvien resoluutio kannattaa pitää suunnilleen saman kokoisena, kuin sen lopullinen koko näytöllä. Jos esimerkiksi sivullasi on elementti jonka koko on 200x500px, ja kuvasi on 2000x4000px, ylimääräinen resoluutio menee hukkaan, sillä se skaalataan pieneksi.
Voit myös tehdä kuvastasi monta eri resoluutiota, jotta voit käyttää sitä isoissa ja pienissä elementeissä sivuillasi. Jotkin hallintajärjestelmät tekevät tämän automaattisesti.
Kuvien lataaminen viivästetysti
Oletuksena kaikki sivusi kuvat ladataan, kun käyttäjä saapuu sivulle.
Voit vaihtoehtoisesti lisätä kuviisi loading=”lazy” – tagin, joka lataa kuvan vasta silloin, kun käyttäjä kelaa sen kohdalle sivulla. Silloin Sivun yläosa lataa nopeammin, kun latausresursseja käytetään tärkeisiin elementteihin, eikä näkymän ulkopuolella oleviin kuviin.
WordPress ja monet muut työkalut mahdollistavat lataustavan asettamisen jokaiselle kuvalle sivullasi. Voit myös lisätä attribuutin manuaalisesti.