Nettisivujen tekniikka

Kuvien optimointi: pienemmät tiedostot, nopeampi sivusto

Kuvat ovat lähes aina verkkosivun raskain osa. Yksi suoraan kamerasta ladattu valokuva voi painaa 5–10 megatavua, kun hyvin optimoitu versio samasta kuvasta painaa alle 200 kilotavua ja näyttää silmään täsmälleen samalta. Kuvien optimointi on siksi nopein yksittäinen tapa keventää sivustoa: se ei vaadi koodaamista, ja hyöty näkyy heti latausajoissa.

Kuvien optimointi tarkoittaa kuvan tiedostokoon pienentämistä niin, ettei laatu heikkene silmin nähden. Siihen kuuluu kolme vaihetta: kuvan koon muuttaminen oikeisiin pikselimittoihin, tehokkaan tiedostomuodon kuten WebP:n valinta ja pakkaus ilmaisella työkalulla. Optimoidut kuvat latautuvat nopeammin, säästävät kävijän datansiirtoa ja parantavat sivuston näkyvyyttä hakutuloksissa.

Kun opit tämän ketjun kerran, jokaisen uuden kuvan optimointi vie alle minuutin. Samalla kannattaa laittaa kuntoon kuvien nimeäminen ja alt-tekstit, jotka auttavat hakukonenäkyvyydessä.

Miksi kuvien optimointi kannattaa

Selain lataa jokaisen kuvan koko tiedoston, vaikka kuva näkyisi ruudulla pienenä. Jos sivullasi on viisi optimoimatonta valokuvaa, kävijän puhelin voi joutua lataamaan kymmeniä megatavuja ennen kuin sivu on valmis. Mobiiliverkossa se tarkoittaa sekuntien odottelua, ja moni kävijä ehtii poistua sitä ennen.

Nopeus vaikuttaa myös hakukonenäkyvyyteen: Google mittaa sivujen latausnopeutta ja käyttökokemusta, ja kuvat ovat useimmilla sivustoilla suurin hidastaja. Kuvien optimointi onkin yleensä ensimmäinen toimenpide, kun sivustoa lähdetään nopeuttamaan kokonaisuutena.

Hyvä muistisääntö: pyri siihen, että yksittäinen sisältökuva painaa alle 200 kt ja koko sivun kuvat yhteensä alle 1 Mt.

Kuvan koon muuttaminen: oikeat pikselimitat ennen latausta

Suurin yksittäinen virhe on ladata kuva palvelimelle isompana kuin se koskaan näytetään. Kuvan koon muuttaminen ennen latausta on tehokkaampaa kuin mikään pakkaustyökalu, koska ylimääräiset pikselit ovat puhdasta hukkaa.

  1. Selvitä, kuinka leveänä kuva näkyy sivulla. Useimpien sivustojen sisältöalue on 700–1200 pikseliä leveä, joten sisältökuvaksi riittää yleensä 1200–1600 pikseliä leveä kuva. Koko ruudun levyinen bannerikuva voi olla 1920–2560 pikseliä.
  2. Muuta kuvan koko ennen latausta. Macissa se onnistuu Esikatselu-sovelluksella (Työkalut → Muuta kokoa), Windowsissa Valokuvat-sovelluksella. Myös selainpohjainen Squoosh muuttaa kuvan mitat samalla kun pakkaa sen.
  3. Lataa palvelimelle vain tämä pienennetty versio. Alkuperäinen täysikokoinen kuva kannattaa säilyttää omalla koneella arkistossa.

WordPress tarjoaa turvaverkon: se pienentää yli 2560 pikseliä leveät tai korkeat kuvat automaattisesti niin sanotuksi scaled-versioksi ja käyttää sitä sivuilla. Turvaverkkoon ei silti kannata nojata, koska alkuperäinen jättitiedosto jää palvelimelle viemään tilaa ja 2560 pikseliä on yhä tarpeettoman suuri useimpiin paikkoihin.

Valitse oikea tiedostomuoto

Tiedostomuoto vaikuttaa kokoon jopa enemmän kuin pakkausaste. Nykyaikaiset muodot selkokielellä:

  • WebP on Googlen kehittämä muoto, joka tuottaa tyypillisesti selvästi pienempiä tiedostoja kuin JPEG samalla laadulla. Kaikki nykyselaimet tukevat sitä, ja WordPress on hyväksynyt WebP-kuvien lataamisen mediakirjastoon versiosta 5.8 (2021) alkaen. Tämä on useimmiten paras valinta.
  • AVIF on vielä uudempi muoto, joka pakkaa usein WebP:täkin pienemmäksi. Selaintuki on nykyään kattava, ja WordPress tukee AVIF-latauksia versiosta 6.5 (2024) alkaen. Haittapuoli: kaikki kuvankäsittelyohjelmat eivät vielä avaa AVIF-tiedostoja.
  • JPEG on edelleen kelvollinen valokuville, jos työkalusi eivät tue uudempia muotoja. Häviää WebP:lle koossa, mutta toimii kaikkialla.
  • PNG sopii vain kuviin, joissa on läpinäkyvyyttä tai tarkkoja graafisia elementtejä (logot, kuvakaappaukset tekstillä). Valokuvana PNG on moninkertaisesti JPEG:iä ja WebP:tä suurempi, joten älä käytä sitä valokuviin.

Yksinkertainen nyrkkisääntö: valokuvat WebP-muodossa, logot ja grafiikat PNG- tai SVG-muodossa.

Pakkaa kuvat ilmaisilla työkaluilla

Kun mitat ja muoto ovat kunnossa, pakkaus viimeistelee työn. Nämä kolme ilmaista työkalua riittävät lähes kaikkiin tilanteisiin:

  • Squoosh (squoosh.app) on Googlen Chrome Labsin selainpohjainen työkalu. Vedä kuva selainikkunaan, valitse muodoksi WebP, säädä laatua liukusäätimellä ja vertaa alkuperäistä ja pakattua versiota vierekkäin. Kuvia ei lähetetä millekään palvelimelle, vaan kaikki tapahtuu omassa selaimessasi. Paras valinta, kun haluat nähdä ja säätää lopputuloksen itse.
  • TinyPNG (tinypng.com) pakkaa PNG-, JPEG-, WebP- ja AVIF-kuvat automaattisesti ilman säätöjä. Ilmaisversiolla voit pakata 20 kuvaa kerralla, enintään 5 Mt per kuva. Nopein valinta, kun kuvia on monta eikä hienosäädölle ole tarvetta.
  • ImageOptim (imageoptim.com) on ilmainen Mac-sovellus, johon pudotetaan kuvat ja joka pakkaa ne paikallisesti. Se myös poistaa kuvista metatiedot, kuten GPS-sijainnin ja kameran tiedot, mikä on sekä tiedostokoko- että yksityisyysetu.

Laatuasetukseksi riittää valokuvissa yleensä 70–80 % taso. Ero alkuperäiseen ei näy normaalikatselussa, mutta tiedostokoko putoaa murto-osaan.

Mitä WordPress tekee automaattisesti

Moderni WordPress hoitaa osan optimoinnista puolestasi, joten kaikkea ei tarvitse tehdä käsin:

  • Useat kuvakoot: WordPress luo jokaisesta ladatusta kuvasta automaattisesti useita eri kokoja ja tarjoilee selaimelle sopivimman. Siksi oikean koon lataaminen kannattaa: pienemmästä lähtökuvasta syntyy pienemmät versiot.
  • Suurten kuvien pienennys: yli 2560 pikselin kuvista syntyy automaattisesti pienennetty scaled-versio käyttöön.
  • Laiska lataus: WordPress lisää kuviin automaattisesti loading="lazy"-attribuutin (versiosta 5.5 alkaen), jolloin selain lataa ruudun ulkopuoliset kuvat vasta kun käyttäjä vierittää niiden kohdalle. Erillistä lazy load -lisäosaa ei siis enää tarvita.
  • WebP ja AVIF kelpaavat: voit ladata modernit muodot suoraan mediakirjastoon ilman lisäosia.

WordPress ei kuitenkaan pakkaa kuvia tehokkaasti eikä muunna vanhoja JPEG-kuvia WebP-muotoon. Siihen tarvitset joko yllä mainitut työkalut ennen latausta tai lisäosan.

Lisäosa hoitamaan optimoinnin puolestasi

Jos sivustolla on satoja vanhoja optimoimattomia kuvia tai sisältöä lataa moni käyttäjä, lisäosa on käsityötä järkevämpi ratkaisu. EWWW Image Optimizer on ilmainen vaihtoehto: se pakkaa kuvat palvelimella rajattomasti, muuntaa ne WebP-muotoon ja voi pienentää liian suuret kuvat automaattisesti jo latauksen yhteydessä. Lisäosan massaoptimointi (Media → Bulk Optimize) käsittelee myös kaikki mediakirjastossa jo olevat kuvat.

Lisäosa ei silti poista tarvetta ladata kuvat järkevässä koossa: pienempi lähtötiedosto tarkoittaa aina pienempiä lopputuloksia ja vähemmän levytilan kulutusta.

Kuvien hakukoneoptimointi: nimeäminen ja alt-tekstit

Optimoitu kuva voi tuoda myös hakukonenäkyvyyttä, kun kerrot Googlelle mitä kuvassa on. Kuvien hakukoneoptimointi alkaa kahdesta perusasiasta:

  1. Nimeä tiedosto kuvaavasti ennen latausta: punainen-talvitakki-naisille.webp kertoo enemmän kuin IMG_4382.webp. Käytä pieniä kirjaimia ja väliviivoja, älä ääkkösiä tai välilyöntejä.
  2. Kirjoita jokaiselle sisältökuvalle alt-teksti (vaihtoehtoinen teksti) mediakirjastossa tai kuvaa lisätessä. Kuvaile kuvan sisältö lyhyesti ja luontevasti, ikään kuin kertoisit sen puhelimessa. Alt-teksti on ensisijaisesti saavutettavuusominaisuus ruudunlukijoiden käyttäjille, mutta se on myös Googlen tärkein vihje kuvan sisällöstä.
  3. Älä tunge avainsanoja alt-tekstiin väkisin. Yksi luonteva kuvaus riittää.

Alt-tekstit ja kuvien nopeus ovat molemmat osa sivuston teknistä hakukonekuntoa, jota käsitellään laajemmin WordPressin hakukoneoptimoinnin oppaassa.

Yleiset virheet

  • Kuva ladataan suoraan kamerasta tai puhelimesta. Tuloksena on 4000–8000 pikseliä leveä monen megatavun tiedosto. Muuta koko ja pakkaa aina ennen latausta.
  • Valokuva tallennetaan PNG-muodossa. PNG tekee valokuvasta helposti viisi kertaa tarpeellista suuremman. Käytä valokuviin WebP- tai JPEG-muotoa.
  • Luotetaan pelkkään lisäosaan. Lisäosa auttaa, mutta jos lähtökuva on 8 Mt, lopputulos on silti tarpeettoman suuri ja palvelimen levytila täyttyy.
  • Alt-tekstit jäävät kokonaan kirjoittamatta. Tämä on yksi yleisimmistä löydöksistä, kun sivuston tekninen kunto käydään läpi SEO-auditissa.
  • Sama laatuasetus kaikkiin kuviin katsomatta lopputulosta. Tarkista pakattu kuva ainakin kerran silmämääräisesti: liian kova pakkaus näkyy suttuna erityisesti teksteissä ja terävissä reunoissa.

Usein kysyttyä

Mitä tarkoittaa kuvan optimointi?

Kuvan optimointi tarkoittaa tiedostokoon pienentämistä ilman näkyvää laadun heikkenemistä. Siihen kuuluu kolme asiaa: kuvan mittojen muuttaminen todellista käyttöä vastaaviksi, tehokkaan tiedostomuodon kuten WebP:n valinta ja pakkaus. Pelkkä pakkaaminen ei riitä, jos kuva on mitoiltaan moninkertaisesti tarpeeseen nähden liian suuri.

Miten muuttaa kuvan tiedostomuotoa?

Helpoin tapa on selainpohjainen Squoosh: vedä kuva selainikkunaan, valitse muodoksi WebP ja tallenna pakattu versio. Muunnos ja pakkaus hoituvat siis samalla kertaa. WordPress-sivustolla EWWW Image Optimizer -lisäosa muuntaa myös mediakirjaston vanhat JPEG- ja PNG-kuvat WebP-muotoon massana.

Mihin valokuvat kannattaa tallentaa?

Säilytä alkuperäiset täysikokoiset kuvat omassa arkistossasi: tietokoneella, ulkoisella levyllä tai pilvipalvelussa. Verkkosivulle ladataan vain pienennetty ja pakattu versio. Näin palvelimen levytila ei täyty, ja voit aina tehdä alkuperäisestä uuden version, jos sivuston ulkoasu tai kuvakoot muuttuvat.

Linkit