Verkkosivujen optimointi kuvien avulla: nopeuta sivujen latausaikoja 50-80%
Kuvien optimointi verkkosivuille varmistaa, että sivut latautuvat nopeasti sekä kuvat näyttävät parhaimmalta mahdolliselta, kun valitaan oikea kuvaformaatti, tarkkuus sekä mahdolliset tiedostokokoon vaikuttavat väri- ja pakkausasetukset.
Lisäksi kuvilla on toki muukin funktio: ne tyypillisesti esittelevät mm. yrityksesi, tuotteesi ja henkilöstösi, eli pikselimössökuvien ansiosta imagosi voi vaikuttaa amatöörimäiseltä. Samoin käy jos kuvasi ovat 5-8 megatavua per kuva ja latautuvat hitaasti. Silloin kävijä lähtee pois sivustoltasi.
Tässä kirjoituksessa saat vinkit, miten optimoit kuvat paitsi näyttämään hyvältä, myös latautumaan nopeasti, jotta käyttäjäkokemus sivustollasi on hyvä. Mikäli olet vasta suunnittelemassa uuden sivuston/blogin rakentamista, tutustu myös kirjoitukseemme miksi WordPress saattaisi olla paras vaihtoehto blogin perustamiseen.
Tutustutaan ensin kuvaformaattien eroihin ja mihin ne soveltuvat parhaiten.
JPG sopii valokuville
JPEG eli JPG on verkon suosituin kuvaformaatti. Se pakkaa kuvan häviöllisesti, eli kuvainformaatiota katoaa pakkauksen myötä jonkin verran. Hyvä nyrkkisääntö onkin, ettei JPG-kuvaa pakattaisi useammin kuin kerran: jos pakkaat saman JPG-kuvan useamman kerran, kuvanlaatu heikkenee jokaisella kerralla. Myös ns. pakkausartefaktien määrä lisääntyy kuvassa.
Mikä on hyvä tarkkuus verkkoon?
Kameran muistikortilta tai kuvapankista ladattu kuva saattaa olla suuri, esim. 6000×4000 tarkkuudeltaan. Tarkkuuden pikselien määrä ilmoitetaan LxK eli leveys kertaa korkeus. Tiedostokooltaan tällaisen kuvan koko on pienellä JPG-pakkauksella useampi megatavu. Tällaisen käyttö verkkosivustolla ei ole järkevää. Kuva kannattaa valmistella käyttökohteensa perusteella, joista alla muutama esimerkki.
Mikäli kuva on käytössä verkkosivustollasi taustakuvana ja täyttää koko ruudun leveydeltä, kannattaa vaakapikselien määrä olla vähintään 1600 pikseliä, tai mieluusti jopa nykypäivänä 2048 pikseliä tai hieman enemmän. Tämä johtuu siitä, että monen tietokoneen ja tablet-tietokoneen näytön tarkkuus on kasvanut vuosien aikana. Monessa tablet-tietokoneessa ja kannettavan koneen näytössä tarkkuus on jo 2560-3000 pikseliin vaakatasossa ja tätä suurempia tarkkuuksia tarjoavat 4k-näytöt yleistyvät kovaa vauhtia.
Nyrkkisääntö: yli 2560-3000 pikseliä leveä kuva ei ole välttämättä järkevä tai käytännöllinen enää, sillä kuvan tiedostokoko kasvaa ja suuret kuvat vaativat myös muskeleita tietokoneelta: vanhemmilla tietokoneilla sivusi voi toimia hitaasti/nykien. Jos kuitenkin haluat parhaan mahdollisen laadun hieman suorituskyvyn ja tiedostokoon kustannuksella, voit taustakuvina käyttää harkinnan mukaan jopa 3000 pikselin leveyttä.
Vastaavasti jos kuva ei vie koko ruudun leveyttä ja täyttää vain puolet ruudusta, voi kuvan tarkkuus olla vastaavasti puolet pienempi, esim. 1024 pikseliä leveydeltään.
JPG-pakkaus vaikuttaa laatuun: parhaat käytännöt
Monessa kuvankäsittelyohjelmassa kerrotaan JPG-kuvan pakkaus asteikolla 0-12 tai 1-100. Alla esimerkeissämme käytämme 0-12 pakkausasteikkoa, jossa 12 on paras laatu ja 0 on huonoin laatu, suurimmalla pakkauksella.
Yleisesti ottaen kannattaa käyttää mieluummin verkossa tarkkuudeltaan suurempaa kuvaa, 5-7 pakkauksella, kuin pientä kuvaa parhaalla laadulla (pakkaus 12). Esimerkiksi 1024×768 kuva joka vie 400 kilotavua pakkauksella 12 ei sisällä niin paljoa kuvainformaatiota, kuin 2048×1536 kuva joka on pakkauksella 5-7 puristettu samaan 400 kilotavun kuvakokoon. Vaikka suuremmassa kuvassa on enemmän JPG-pakkauksesta johtuvia artefakteja, on todennäköistä, että kuva näyttää silti paremmalta katsojan silmään eri päätelaitteilla. Kuvan tiedostokoon ollessa sama, korkeammalla resoluutiolla oleva kuva monissa tilanteissa näyttää paremmalta, sillä pakkauksen artefaktit eivät näy häiritsevästi. Alla esimerkkikuvat.
Yllä: 600×400, pakkaus 12 (korkea laatu). Tiedoston koko 419 kilotavua.
Yllä: 600×400, pakkaus 7 (keskivertolaatu). Tiedoston koko 120 kilotavua.
Yllä: 600×400, pakkaus 0 (huono laatu). Tiedoston koko 53 kilotavua.
Yllä olevissa esimerkeissä on valittu JPG-pakkaukselle epäsuosiollinen punainen väri tarkoituksella, sillä usein yksityiskohtaiset kuvat joissa on vahvoja värikontrasteja paljastavat pakkauksen ongelmat kuvanlaadussa. Yleisenä ohjenuorana kannattaa kokeilla pakkausta 5-7 väliltä kuvaan ja tarkastaa kuvan tallentamisen jälkeen, riittääkö laatu käyttöösi. Yllä olevassa esimerkissä vaihtamalla pakkaus 12 (korkea laatu) keskivertoon 7 pakkaukseen pienensi tiedoston kokoa 70%.
Pelkästään kiinnittämällä huomiota pakkauksen ja tarkkuuden valintaan, voi helposti verkkosivujen kuvien kokoa vähentää 50-80 %. Koska kuvat ovat tyypillisesti suurimmat tiedostot verkkosivustolla, voit nopeuttaa sivujen latausaikoja lähes vastaavilla prosenteilla.
Poikkeus sääntöön: jos kuvassa on paljon tekstiä tai muita pakkauksen aiheuttamille artefakteille herkkiä yksityiskohtia kuten viivoja ja graafeja, voi pakkaus heikentää kuvan laatua liikaa. Eli testaa aina kuvakohtaisesti mikä on paras ratkaisu. Tekstiä tai viivagrafiikkaa varten kannattaa valita PNG kuvaformaatiksi, josta alla lisää.
GIF – klassikko elää enää lähinnä animaatioina
Kuvaformaattina legendaariseksikin muodostunut GIF rajoittuu maksimissaan 256 väriin. GIF mahdollistaa läpinäkyvyyden, mutta ei yhtä laadukkaasti kuin PNG. GIF nykypäivänä on monelle synonyymi GIF-animaatiolle, jossa toistetaan kuvaruutuja jatkuvalla toistolla. GIF-formaatin kuvakäytössä on korvannut pääosin PNG, joka tarjoaa paremmat ominaisuudet. Animaatiokäytössä GIF-formaatti elää varmasti vielä aikansa, sillä sen tuki on hyvä vanhemmillakin päätelaitteilla. GIF-formaatin animaatio-ominaisuuden liikakäytön muistavat varmasti kaikki 1990-luvulla internetissä seikkailleet, jotka löysivät GIF-animaatioin toteutetut vilkkuvat valot ja tanssivat banaanit. #neverforget #bananadance
PNG sopii tekstiin, viivagrafiikkaan ja tarjoaa läpinäkyvyyden
PNG-kuvaformaatti kehiteltiin alun perin GIF-formaatin korvaajaksi. PNG-8 ja PNG-24 kuvaformaatteihin sisältyy eri värimäärät: PNG-8 mahdollistaa maksimissaan 256 värin (8 bittiä) tallentamisen, jolloin kuvasta on mahdollista tehdä pienempi vähentämällä värien määrää. PNG-24 tukee 16 miljoonaa väriä (24 bittiä), mutta tiedostokoko on vastaavasti suurempi.
PNG tukee häviötöntä pakkausta, eli kuvaan ei synny pakkauksesta näkyviä artefakteja kuten JPG-kuvissa. Sen takia se on erinomainen valinta kuviin, joissa on tekstiä ja viivagrafiikkaa. Katso esimerkit:
Yllä: JPG-kuva infografiikasta, tiedoston koko 25 kilotavua.
Yllä: PNG-kuva infografiikasta, värien määrä: 32, tiedoston koko 26 kilotavua. Teksti ja grafiikkojen reuna ei mene mössöksi kuten JPG-pakkauksessa.
PNG on lisäksi suosittu formaatti kuvissa, joissa halutaan kuvaan ns. läpinäkyvyys (transparency). Tällöin esimerkiksi PNG-formaattiin tallennetun logon alla sivustolla näkyvä taustakuva/-väri näkyy logon alla.
Vinkki: ellet omista kuvankäsittelyohjelmaa jolla voit vähentää värien määrää PNG-kuvissa, kokeile verkossa toimivaa TinyPNG-palvelua, jolla voit pienentää PNG-kuvien kokoa helposti.
Yhteenveto
JPG-formaatti:
- käytä laajalti erilaisiin valokuviin
- pienennä tiedostokokoa valitsemalla keskiverto pakkaus 5-7 väliltä
- pienennä tarkkuutta 2048-3000 leveyteen maksimissaan verkkosivukäyttöön
PNG-formaatti:
- käytä tekstiä ja viivagrafiikkaa sisältäviin kuviin
- valitse kuviin, joihin et halua JPG-pakkauksen aiheuttamaa kuvanlaadun heikkenemistä
- käytä kuvissa, joissa haluat hyödyntää läpinäkyvyyttä (mm. logo)
WordPress-käyttäjät voivat säästää aikaa ja hermojaan asentamalla lisäosan (plugin) sivustolleen, joka tekee automaattisesti kuvan optimoinnit. Yksi tällainen on suosittu Smush-lisäosa. Lisäosan asentamisen jälkeen kuvien optimointi tapahtuu automaattisesti uusia kuvia lisätessä, eli ns. ”asenna ja unohda” periaatteella. LiteSpeed Cache lisäosa tarjoaa mahdollisuuden optimoida kuvat ja muuntaa ne WEBP-formaattiin jopa maksutta Quic.cloud palvelussa. Tällöin käyttäjälle, jonka selaimessa on tuki WEBP-formaatille, tarjotaan uuden sukupolven kuvaformaatti ja vanhemman selaimen omistajalle sen sijaan JPG- tai PNG-formaatilla toimiva versio. Tämä onkin yksi helpoimpia keinoja optimoida kuvat sivustolla etenkin, mikäli kuvia on runsaasti. Optimoimalla kuvat vähennät myös webhotellisi levytilan tarvetta, etenkin jos haluat tehdä sivustostasi varmuuskopioita paikallisesti palvelimelle.