Kuvien optimointi verkkosivuille

Verkkosivujen kuvien optimointi on tärkeää, Design Inspis

Kuvat muodostavat noin 21% koko verkkosivuston koosta, joten niiden optimointi kannattaa.

Kuvien optimointi tarkoittaa lyhyesti sanottuna kuvien kompressointia, jolloin kuvan tiedostokoko pienenee. Pienemmät tiedostokoot tarkoittavat nopeampaa latautumista, ja se vaikuttaa koko verkkosivuston latautumisnopeuteen. Nykyään kuvat kattavat keskiarvolta noin 21% koko sivuston koosta, joten niiden optimointi todellakin kannattaa.

Miksi kuvien optimointi on tärkeää?

Ilman optimointia sivuston koko voi kasvaa todella suureksi ja tämä aiheuttaa koko sivuston latausajan kasvua. Tutkimusten mukaan yli neljän sekunnin sivulataus karkottaa osan sivun vierailijoista. Tämä ongelma on erityisen inhottava, sillä nykyään yli puolet verkkosivujen liikenteestä tulee mobiililaitteista, joilla verkon nopeus voi vaihdella radikaalisti riippuen mobiilidatan kentästä, alueesta sekä itse laitteen tehosta.

Optimoinnin hyödyt ja haitat

Optimoimalla kuvat sivuston latauskokoa voi pienentää ja palvelimen rasitusta keventää, sillä optimointi vähentää dataliikenteen määrää. Toimenpide parantaa sivuston rankingia nopeustesteissä – täten sivuston hakukonenäkyvyys paranee – ja ennen kaikkea sivusto toimii nopeammin. Se puolestaan parantaa käyttäjäkokemusta merkittävästi. Me kaikki olemme varmasti törmänneet sivuihin, jotka tuntuvat vain lataavan ja lataavan, emmekä jaksa odotella latauksen loppumista ja suljemme välilehden.

Haittapuolia optimoinnilla ei ole: sitä varten on tarjolla paljon automaattisia ja ilmaisia keinoja, joten ainoa “haitta” on optimointiin kuluva aika. Esimerkiksi WordPressiin on tarjolla monia lisäosia, jotka hoitavat tämän kuvien optimoinnin automaattisesti, kun ne lisätään sivuston mediakirjastoon. Tällöin optimointi ei kuluta lisäaikaa tai aiheuta vaivaa. Joissakin tapauksissa optimointi voi mennä kuitenkin “överiksi”, jolloin kuvan laatu kärsii. Näissä tapauksissa kannattaa vain vaihtaa käytettyä palvelua ja etsiä sopivampi optimointityökalu tai -sivusto.

Lossy vai lossless?

Kuvan optimointiin on kaksi yleistä keinoa: lossy- ja lossless-kompressointi. Lossy tarkoittaa, että alkuperäisen kuvan datasta häviää peruuttamattomasti osa, jolloin koko pienenee radikaalisti, mutta laatu kärsii. Lossless ei poista kuvan dataa, vaan käytännössä vain “siistii” kuvaa, pienentäen kuvan tiedostokokoa mutta säilyttää silti hyvän kuvanlaadun.

Keinoja optimointiin

Mikäli sivusto on aiemmin mainitulla WordPress -alustalla, on lisäosan asentaminen helpoin ja vaivattomin vaihtoehto. Ilmaisia lisäosia ovat esimerkiksi Smush, WP Optimize sekä EWWW Image Optimizer, muutaman mainitakseni. Uusimmassa WordPress -versiossa 5.3 on myös uusi oletusominaisuus, joka optimoi kuvat web-yhteensopivaan kokoon skaalaamalla kuvat maksimissaan 2560 pikseliä leveäksi.

Netti on kuvien optimointipalveluja pullollaan. Me voimme suositella tinypng ja tinyjpg-palveluita, joilta löytyy myös WordPress-lisäosa.

On olemassa myös edistyneempiä vaihtoehtoja, joissa kuvien optimointi, automaattinen kuvien eri resoluutiokokojen luominen sekä kuvien jakaminen hoidetaan oman palvelun kautta. Tällaisia palveluita ovat esimerkiksi ShortPixel, Imagify ja Optimole. Nämä ovat premium-vaihtoehtoja, ja kulut yleensä skaalautuvat optimoitujen kuvien määrään. Tässä kannattaa huomioida erityisesti thumbnail-kuvien luonti, jota WordPress tekee automaattisesti. Thumbnail kuvia tehdään useissa eri resoluutioissa, yhdestä kuvasta voi löytyä yli kymmenen eri versioita eri resoluutiossa. Kuvarikkailla sivuilla, esimerkiksi verkkokaupoissa, joissa on paljon tuotekuvia, premium-palvelun hinta voi nousta huomattavan korkeaksi.

Muita kuvatyyppejä

Myös vektoripohjaisten kuvien eli SVG-tiedostojen käyttö on lisääntynyt erityisesti logojen ja erilaisten grafiikoiden näyttämisessä. Näiden käytössä erityisenä etuna on huomattavasti pienempi tiedostokoko sekä skaalautuvuus.

Myös WebP on uusi tiedostotyyppi, jota modernit selaimet tukevat. WebP on käytännössä kuin tavallinen JPG, mutta paremmin kompressoituna. Kuvaraskailla sivustoilla WebP-kuvien käyttäminen pienentää sivuston latauskokoa ja täten toimii keinona nopeuttaa sivustoa.

Vinkkejä

  • Käytä JPG-muotoisia kuvia aina kun on mahdollista, sillä ne ovat kevyempiä ja optimoituvat paremmin kuin PNG-kuvatiedostot.
  • Älä käytä ylisuuria resoluutioita kuvissa. Sivustot harvoin tarvitsevat 4K resoluution tasoisia kuvia. Täysleveät kuvat voivat olla 2560x1440px resoluutiossa, tämä kattaa suurimman osan näytöistä. Sisältöön upotetut, suurehkot kuvat voivat olla kooltaan noin 1500px leveitä, isommille kuville on harvemmin tarvetta. Tässä kuitenkin kannattaa muistaa, että laitteiden näytöt paranevat jatkuvasti ja resoluutiot kasvavat, joten nämä “nyrkkisäännöt” kuvien kokojen suhteen muuttuvat ajan myötä.
  • Optimoidun kuvan lopullinen tiedostokoko olisi hyvä pitää alle 100 kilotavussa mikäli mahdollista, tämä kuitenkin riippuu alkuperäisestä kuvasta sekä kuvan resoluutiosta.
  • Automatisoi prosessi eli käytä hyväksesi lisäosia ja palveluita.
  • Jos sivustollasi on paljon kuvia, tutustu WebP-kuviin ja harkitse niiden käyttämistä lisäosan avulla. Jos kaipaat apua kuvien optimointiin verkkosivuillesi, ota rohkeasti yhteyttä Design Inspikseen. Tiimimme tuottaa tekstit ja kuvasisällöt laajankin verkkosivuston tarpeisiin!
Tsekkaa myös nämä artikkelit