Kuvia sivustolle
Kuvat ovat keskeinen osa verkkosivuston ilmettä, mutta niiden laatu, koko ja formaatti vaikuttavat suoraan sivuston nopeuteen ja käyttökokemukseen. Tässä artikkelissa käymme läpi tärkeimmät kuvaformaatit, perusperiaatteet kuvien optimointiin sekä käytännön työkalut, joilla varmistat, että WordPress-sivustosi kuvat latautuvat nopeasti ja näyttävät teräviltä kaikilla laitteilla. Mukana myös XnConvert, helppokäyttöinen ilmaisohjelma, jolla muunnat kuvat tehokkaasti moderniin ja suositeltuun WebP-muotoon.
Kuvaformaatit verkkosivustolla
Kuvaformaatin valinta vaikuttaa ratkaisevasti sivuston latausnopeuteen, kuvan laatuun ja selainten yhteensopivuuteen. Eri formaatit käyttävät erilaisia pakkausmenetelmiä, tukevat eri ominaisuuksia ja soveltuvat eri käyttötarkoituksiin. Alla käydään läpi yleisimmät verkkokäytössä esiintyvät formaatit teknisine yksityiskohtineen.
JPEG/JPG (Joint Photographic Experts Group)
JPEG on pitkään ollut verkkosivujen yleisin kuvaformaatti. Se käyttää häviöllistä pakkausta, jossa osa kuvainformaatiosta poistetaan tiedostokoon pienentämiseksi. JPEG soveltuu erityisesti valokuville ja monivärisille kuville, joissa ei tarvita läpinäkyvyyttä.
JPEG tukee 8-bittistä värisyvyyttä per kanava (24-bittinen RGB), ja sen pakkaussuhde on säädettävissä laadun ja tiedostokoon välillä. Suurena etuna on laaja selain- ja laitetuki, mutta haittapuolena pakkausartefaktit, jotka näkyvät erityisesti terävissä reunoissa ja grafiikoissa.
PNG (Portable Network Graphics)
PNG on häviötön kuvaformaatti, joka säilyttää alkuperäisen kuvan laadun ilman pakkausvirheitä. Se tukee alfakanavaa, eli läpinäkyvyyttä, ja soveltuu erityisesti grafiikoille, logoille, kuvakkeille ja kuville, joissa tarvitaan teräviä reunoja.
PNG-24 tarjoaa 24-bittisen värisyvyyden ja täyden läpinäkyvyyden, kun taas PNG-8 on kevyempi versio, joka käyttää 256 värin palettia. PNG-tiedostot ovat usein suurempia kuin JPEG- tai WebP-kuvat, mikä voi vaikuttaa sivuston suorituskykyyn.
GIF (Graphics Interchange Format)
GIF on vanha mutta edelleen käytössä oleva formaatti, joka tukee animaatiota ja 256 värin palettia. Se on häviötön, mutta rajoitettu värimäärä tekee siitä huonon vaihtoehdon valokuville. GIF tukee yksibittistä läpinäkyvyyttä (ei osittaisia läpinäkyvyyksiä).
Nykyisin GIF-animaatiot korvataan usein videoilla tai APNG/WebP-animaatioilla paremman laadun ja pienemmän tiedostokoon vuoksi.
WebP
WebP on Googlen kehittämä moderni kuvaformaatti, joka tukee sekä häviöllistä että häviötöntä pakkausta. Se tarjoaa huomattavasti pienemmän tiedostokoon kuin JPEG ja PNG, usein ilman näkyvää laadun heikkenemistä. WebP tukee myös läpinäkyvyyttä ja animaatiota.
WebP on nykyään laajasti tuettu kaikissa moderneissa selaimissa, ja se on suositeltu formaatti WordPress-sivustoille. Kuvien muuntaminen WebP-muotoon onnistuu esimerkiksi ilmaisohjelmalla XnConvert.
AVIF (AV1 Image File Format)
AVIF on uudempi ja teknisesti erittäin kehittynyt formaatti, joka perustuu AV1-videokoodekkiin. Se tarjoaa erinomaisen pakkaustehokkuuden, usein jopa WebP:tä paremman, sekä tuen laajalle värialueelle (HDR, 10–12 bittiä per kanava).
AVIF tukee läpinäkyvyyttä ja animaatiota, mutta sen selaintuki ei ole vielä yhtä kattava kuin WebP:llä. Lisäksi AVIF-kuvien pakkaaminen voi olla hitaampaa, mikä vaikuttaa työskentelyprosessiin.
SVG (Scalable Vector Graphics)
SVG on vektorimuotoinen kuvaformaatti, joka ei perustu pikseleihin vaan matemaattisiin muotoihin (vektorigrafiikka). Se skaalautuu täydellisesti ilman laadun heikkenemistä ja on erittäin kevyt. SVG soveltuu logoihin, kuvakkeisiin, kaavioihin ja muihin graafisiin elementteihin.
SVG-tiedostoja voidaan myös muokata CSS:llä ja JavaScriptillä, mikä tekee niistä joustavia käyttöliittymäelementtejä. Turvallisuussyistä WordPress ei oletuksena salli SVG-tiedostojen lataamista ilman lisäasetuksia tai lisäosia.
WEBP vai AVIF?
WebP ja AVIF ovat moderneja verkkokuvien formaatteja, joiden tavoitteena on pienentää tiedostokokoja ilman näkyvää laadun heikkenemistä. WebP on Googlen kehittämä formaatti, joka on tällä hetkellä erittäin laajasti tuettu kaikissa moderneissa selaimissa ja sisällönhallintajärjestelmissä. Se tarjoaa hyvän tasapainon kuvanlaadun, tiedostokoon ja suorituskyvyn välillä, minkä vuoksi se on käytännössä turvallinen oletusvalinta useimmille verkkosivustoille.
AVIF on uudempi formaatti, joka perustuu AV1-videopakkaustekniikkaan. Se mahdollistaa usein vielä WebP:tä pienemmät tiedostokoot samalla kuvanlaadulla, erityisesti valokuvissa ja väriliukuvissa. AVIF-formaatin heikkoutena on kuitenkin tällä hetkellä raskaampi enkoodaus ja dekoodaus sekä vielä hieman vaihteleva tuki eri ympäristöissä. Tästä syystä AVIF toimii parhaiten täydentävänä formaattina WebP:n rinnalla, ei välttämättä sen suorana korvaajana.
| Ominaisuus | WebP | AVIF |
|---|---|---|
| Selain ja laitetuki | Erittäin laaja (myös vanhemmat selaimet) | Hyvä (vaatii uudemmat selaimet) |
| Tiedostokoko | Pieni (hyvä pakkaus) | Erittäin pieni (tehokkaampi pakkaus) |
| Kuvanlaatu | Hyvä (tasapainoinen) | Erinomainen (säilyttää yksityiskohdat) |
| Suorituskyky | Nopea (kevyt dekoodaus) | Raskaampi (videotason pakkaus) |
| WordPress-tuki | Erinomainen (laaja tuki) | Vaihteleva (palvelinriippuvainen) |
| Suositeltu käyttö | Oletusformaatti (varma valinta) | Lisäoptimointi (kun tuki varmistettu) |
Loppupäätelmät
Oikean kuvaformaatin valinta riippuu käyttötarkoituksesta: valokuville WebP tai AVIF tarjoavat parhaan tasapainon laadun ja tiedostokoon välillä, grafiikoille ja logoille SVG on ylivoimainen, ja PNG toimii silloin, kun tarvitaan häviötöntä laatua tai tarkkaa läpinäkyvyyttä. Modernit formaatit, kuten WebP ja AVIF, ovat suositeltavia WordPress-sivustoille, sillä ne parantavat sivuston suorituskykyä ja käyttäjäkokemusta merkittävästi.
| Formaatti | Läpinäkyvyys | Pakkaustyyppi | Soveltuvuus |
|---|---|---|---|
| JPEG | Ei | Häviöllinen | Valokuvat, suuret kuvat |
| PNG | Kyllä (alfakanava) | Häviötön | Grafiikat, logot, kuvakkeet |
| GIF | Rajoitettu (1-bittinen) | Häviötön | Animaatiot, yksinkertaiset grafiikat |
| SVG | Kyllä | Vektori (ei pakkausta pikselitasolla) | Logot, ikonit, kaaviot |
| WebP | Kyllä | Häviöllinen / häviötön | Valokuvat, grafiikat, animaatiot |
| AVIF | Kyllä | Häviöllinen / häviötön | Huippulaatu, modernit sivustot, HDR |
Kuvien fyysinen koko verkkokäyttöön
Kun kuvia optimoidaan verkkosivustolle, pelkkä formaatin valinta ei riitä. Kuvan fyysinen koko (mittasuhteet) ja latauskoko (bittiä) vaikuttavat suoraan sivuston suorituskykyyn ja kuvan visuaaliseen laatuun. Optimoitu kuva on mahdollisimman kevyt, mutta silti riittävän tarkka kaikilla laitteilla.
Kuvan mittasuhteet (leveys × korkeus)
Kuvan pikselimitat ovat tärkein yksittäinen tekijä tiedostokoon kannalta. Verkkosivustolle ei kannata ladata kuvaa, joka on esimerkiksi 4000 pikseliä leveä, jos se näytetään sivulla vain 1200 pikselin leveydellä. Suositeltavaa on mitoittaa kuvat suunnilleen siihen kokoon, jossa ne näytetään suurimmillaan. Suurin osa näyttölaitteista tänäkin päivänä ovat maksimissaan 1920px leveitä.
WordPress luo automaattisesti useita kuvakokoja (thumbnail, medium, large), mutta alkuperäisen kuvan tulisi silti olla järkevästi mitoitettu. Itse poistan automaattiset kuvakoon lisäystoiminnon kokonaan toiminnasta WordPressissä, sillä se tuottaa turhaa ”kuvamassaa” palvelimelle. Optimoin kaikki kuvat sopivaan kokoon, jotta ne voidaan hyödyntää optimoidusti sivustolla.Yleinen suositus on 1200–1920 pikseliä leveys koko näytön levyisille kuville ja 800–1200 pikseliä pienemmille sisältökuville, joita ei ole tarkoitus suurentaa kokonäytölle.
Resoluutio (ppi/dpi)
Verkkokäytössä resoluutiolla ei ole yhtä tärkeää merkitystä kuin painotuotteissa. Näytöt esittävät kuvat pikseleinä, joten 72 ppi ja 300 ppi näyttävät verkkosivulla täsmälleen samalta, kun pikselimitat ovat samat. Resoluutioon ei tarvitse optimoinnin aikana kiinnittää huomiota vaikkakin sääntönä on, että verkkokuvat kannattaa tallentaa 72–96 ppi -asetuksella. Tärkeintä on pikselikoko, ei resoluutioluku.
Pakkaus ja laatuasetukset
Kuva voidaan optimoida laadultaan riittäväksi kuvankäsittelyn toiminnolla. Tallennustoiminnossa fyysiseltä kooltaan optimoitu kuva optimoidaan tiedostokooltaan sopivaa kokoon pienentämällä kuvan laatua. Kuvan laatua voidaan pienentää esimerkiksi 80% alkuperäisestä laadusta ja kuvan laadun eroa alkuperäiseen ei ihmissilmä erota. Tiedostokoko pienenee silti huomattavasti.
Väriprofiilit (sRGB vs. muut)
Verkkokuvat tulisi tallentaa aina sRGB-väriprofiililla, koska se on näyttölaitteiden standardi.
Tiedostokoko (kilotavut / megatavut)
Optimoidun kuvan tiedostokoko on yleensä 30–500 kilotavua, riippuen kuvan sisällöstä ja käyttötarkoituksesta. Hero-kuvat voivat olla tätä suurempia, kunhan ne on pakattu tehokkaasti. Käytännössä tallennan kuvan ensin PNG- (häviötön) tai JPG-formaatissa (häviöllinen) kuvan fyysisestä koosta ja sisällöstä riippuen. Tämän jälkeen optimoin kuvan niin, että sen koko jää alle 500 kilotavun, ja muunnan sen lopuksi WebP-muotoon. Näin mahdollisimman suuri osa alkuperäisestä kuvainformaatiosta säilyy lopullisessa verkkoversiossa.
Jos kuvankäsittelyohjelma tukee suoraa tallennusta WebP-muotoon (kuten monet ilmaisohjelmat ja osa moderneista editoreista), kuva voidaan tallentaa suoraan WebP:nä. Kaikki ohjelmat eivät tätä kuitenkaan tue — esimerkiksi Adobe Photoshop ei tarjoa WebP-tallennusta ilman lisäosia.
Responsiivisuus ja retina-näytöt
Modernit näytöt voivat käyttää kaksinkertaista pikselitiheyttä (retina), jolloin kuvat näyttävät teräviltä vain, jos niistä on tarjolla riittävän suuri versio. WordPress hyödyntää srcset-ominaisuutta, joka tarjoaa selaimelle useita kuvakokoja ja antaa sen valita sopivimman. Tämä toimii parhaiten, kun alkuperäinen kuva on riittävän suuri ja optimoitu.
Yhteenveto kuvien optimoinnista
Tehokas kuvien optimointi perustuu oikeaan pikselikokoon, sopivaan formaattiin ja järkevään pakkausasetukseen. Kun kuvat tallennetaan sRGB-profiililla, mitoitetaan käyttöön sopiviksi ja pakataan laadukkaasti, sivusto latautuu nopeammin ja näyttää paremmalta kaikilla laitteilla. WordPressin automaattiset kuvakoot ja modernit formaatit, kuten WebP ja AVIF, täydentävät optimointiprosessin ja varmistavat parhaan mahdollisen käyttökokemuksen.
Nyrkkisäännöt kuvien koolle ja resoluutiolle
Verkkosivujen kuvia optimoitaessa käytetään usein yksinkertaista nyrkkisääntöä: kuvan maksimileveys noin HD-resoluution verran (1920 px) ja tiedostokoko alle 500 kilotavua. Tämä ei ole ehdoton sääntö, mutta se toimii hyvänä lähtökohtana suurimmalle osalle sivustoista ja käyttökohteista.
HD-leveys riittää lähes kaikkiin tilanteisiin, sillä harvoin kuvia näytetään suurempina kuin 1920 pikseliä leveinä. Tätä suuremmat kuvat kasvattavat tiedostokokoa ilman näkyvää hyötyä käyttäjälle. Pienemmille sisältökuville riittää usein 800–1200 pikselin leveys.
Alle 500 kt tiedostokoko on puolestaan tasapaino laadun ja suorituskyvyn välillä. Kevyet kuvat latautuvat nopeasti, mikä parantaa sivuston käyttökokemusta ja hakukonenäkyvyyttä. Joissakin tapauksissa — kuten hero-kuvissa tai taustakuvissa — hieman suurempi koko voi olla perusteltu, kunhan kuvan formaatti ja pakkaus ovat optimoituja.
Nämä nyrkkisäännöt eivät kuitenkaan korvaa teknistä optimointia. Oikea formaatti (kuten WebP tai AVIF), sopiva pakkaus ja järkevä pikselikoko ovat edelleen tärkeimmät tekijät laadukkaan ja kevyen kuvan tuottamisessa.
Xn-convert – Kuvien massa-ajoa
XnConvert on monipuolinen, ilmainen kuvankäsittelytyökalu, jonka avulla voit muuntaa ja optimoida suuretkin kuvamäärät kerralla verkkokäyttöön sopiviksi. Ohjelma tukee satoja eri kuvaformaatteja ja mahdollistaa muun muassa kuvien koon muuttamisen, pakkausasetusten säätämisen, vesileimojen lisäämisen sekä kuvien muuntamisen moderniin WebP-muotoon. Tämä ohje keskittyy käytännön työvaiheisiin: miten tuot kuvat XnConvertiin, asetat tarvittavat muunnos- ja optimointiasetukset ja viet lopuksi valmiit, verkkosivustolle sopivat kuvat talteen tehokkaasti ja johdonmukaisesti.
Lyhyt ohje XnConvertin käyttöön
Asenna XnConvert ja avaa ohjelma. Ohjelmassa on kuusi välilehteä, joista Ulostulo-välilehdellä tulee asettaa asetuksia.
- Aseta Ulostulo-toiminnossa haluamasi muunnetun tiedoston tallennuspaikka. Itse käytän asetusta Lähdekansio, jolloin muunnettu kuva tallentuu samaan paikkaan missä alkuperäinen kuva on.
- Tiedoston nimi kohdassa voit asettaa nimeämiskäytännön muunnetulle tiedostolle, jos haluat. Itse nimeän tiedoston jo ennen ohejlmaan tuontia, joten tämä kohta on ollut tarpeeton.
- Formaatti kohdassa on TÄRKEÄÄ valita muunnetun tiedoston tiedostomuodoksi WEBP – WebP, sillä siihen muotoon haluamme tiedostot muuntaa.
- Klikkaa Asetukset painiketta, joka avaa optimointiasetukset (Kirjoitusasetukset) ikkunan kuvalle. Ikkunassa käytän asetuksina kuvan mukaisia asetuksia. Klikkaa aktiiviseksi Tiedostokoko (kbittiä) ja aseta parametriksi 400, jolloin kuvat optimoidaan 400 kbitin mukaisesti tiedostokooltaan. Muutkin asetukset voit asettaa kuvan mukaisesti.
- Muut asetukset tällä välilehdellä voit asettaa oman valintasi ja tarpeidesi mukaisesti.
Optimoinnin työnkulku
XnConvert ohjelmistossa voidaan ajaa lukemattoman määrän kuvia kerrallaan. Kuvien massa-ajo on siis myös mahdollista. Jos on tarpeen muuntaa kerralla vaikka 500 kuvaa, se onnistuu tällä ohjelmalla suoraviivaisesti ja ongelmitta. Itse olen muuntanut verkkosivuille ohjelmalla kerralla 100-200 kuvaa. Ongelmia ei ole ilmennyt. Työn kulku on ohjelmassa seuraavanlainen
- Optimoi kuvat aluksi johonkin kansioon kuvankäsittelyohjelmistolla. Jos käytät Photopea-ohjelmaa pystyt tallentamaan sieltä suoraan webp-muotoon, joten tämä ohjelma saattaa olla tarpeeton. Jos taas käytät Adobe Photoshopia tai jotain muuta webp-tallennusta tukematonta ohjelmistoa tämä on sinulle.
- Siirry XnConvert-ohjelman Muunnettavia-välilehdelle ja raahaa muunnettavat kuvat resurssienhallinta-ikkunasta välilehdelle tai käytä +Lisää tiedostot -painiketta välilehden alalaidassa.
- Klikkaa Muunna-painiketta ja ohjelma muuntaa kuvat webp-muotoon asetuksiesi mukaisesti.
Muunna Hairy-do harjoitussivuston kuvamateriaali WebP-muotoon käyttäen Xn-convert ohjelmaa.
Kuvankäsittelyä – Photopea.com
Photopea on selaimessa toimiva, monipuolinen kuvankäsittelyohjelma, joka tarjoaa Photoshop‑tyyliset työkalut ilman asennuksia. Se soveltuu erinomaisesti kuvien muokkaamiseen, koon muuttamiseen, rajaamiseen ja optimointiin ennen verkkokäyttöä. Photopea tukee laajasti eri formaatteja, kuten PSD-, PNG-, JPG- ja WebP‑tiedostoja, ja mahdollistaa myös kerrospohjaisen työskentelyn suoraan selaimessa. Tässä ohjeessa käydään läpi keskeiset työvaiheet, joiden avulla muokkaat ja optimoit kuvan tehokkaasti WordPress‑sivustoa varten.
Avaa Photopea.com sivusto klikkaamalla oheista logoa:
- Klikkaa sivulta painike Start using Photopea
- Hyväksy kaikki evästeet, sillä ohjelmisto ei toimi muuten oikein.
- Avaa kuva ohjelmassa joko klikkaamalla painike Avaa tietokoneella tai raahaamalla ja pudottamalla kuvatiedosto resurssienhallinnasta painikkeiden alla olevaan laatikkoon.
Optimoi harjoitussivuken etusivulle tuleva kuva Photopea-ohjelmistolla sivustolle sopivaan muotoon.
Lataa etusivulle tuleva subheaderin kuva Photopea-ohjelmistoon ja optimoi se sivuston käyttöön:
- Pienennä kuva 1920px leveäksi
- Tallenna kuva webP-formaattiin
- Vähennä kuvan laatua, kunnes kuvan tiedostokoko on alle 500Kb
- Varmista, että kuvan leveys on 1920px ja korkeus 700px
- Nimeä kuva subheader-etusivu
Käyttöliittymän osat
Photopea-ohjelmiston käyttöliittymä muistuttaa paljon Abobe Photoshopin käyttöliittymää ja sen osat voidaan karkeasti jakaa seuraavasti:
- Työtila eli Canvas, jossa näkyvissä juuri lataamamme kuva.
- Työkalut eli Tools-valikko, jossa on erilaisia työkaluja kuvatasojen (4) muokkaukseen.
- Työkaluissa (2) valitun työkalun asetukset
- Tasot eli Layers: Muokatava kuva voi sisältää useita tasoja, jotka ovat ihäänkuin lasilevyjä pinossa. Näkyvässä kuvassa voisi olla esimerkiksi seuraavat tasot:
- Alin: Taustan punertava puoliympyrä oikealla (toisin sanoen kuvan taustaväri on punertava)
- Kirjava violettitekstuuri, jolle asetettu pudotusvarjo.
- Vaaleanpunainen muoto kuvan vasemmalla puolella, joka peittää puolet kuvasta (pudotusvarjo)
- Ylin: Tyttö päällimmäisenä tasona
- Ohjelman toimintovalikko, josta löytyy useita hyödyllisiä toimintoja mm. Kuva-valikosta.
Kuvan koon optimoiminen
Olemme pienentämässä kuvaa, joten tarvitsemme vain yhtä toimintoa tehtävän suorittamiseen ja se löytyy ohjelman toimintovalikosta (5) Kuva-toiminnoista.
- Klikkaa Kuva-toimintovalikko (Image) auki ja valitse toiminnoista Kuvan koko (Image Size), joka avaa toiminnon ikkunan
- Aseta kuvan leveydeksi 1920px, joka on HD-resoluution leveys. Sivustollahan kuvamme on kokoleveä kuva.
- Varmista, että kuvan korkeus muuttui automaattisesti arvoon 700px, joka on suhteellisesti oikea leveys.
- Jos muistat, DPI-arvoon ei ole tarpeen koskea, koska sillä ei ole käytännössä vaikutusta optimointiin.
- Vaihda Bilineaarinen asetuksen tilalle Kaksikuutioterävöinti (Bicubic Sharper), joka eliminoi kuvan pienentämisestä johtuvaa pikselöitymistä terävöittämällä kuvaa.
- Paina OK-painiketta ja kuva pienennetään verkkosivuille sopivan kokoiseksi.
Kuvan tallentaminen (vieminen)
Kuva tallennetaan verkko-ohjelmasta toiminnolla Vie muodossa ja kuten muistamme WEBP on paras muoto internetsivulle. Valitse siis se ja tee seuraavat toiminnot Tallenna verkkoon -ikkunassa.
- Jos haluat voit nimetä kuvan uudelleen mutta sen nimi on jo sopivassa muodossa internet-sivuille.
- Varmista kuvan leveys ja korkeus (1920×700)
- Säädä Laatu -säätimestä kuvan laatua, jotta tiedoston koko ei ole yli 400-500 Kb
- Kun olet valmis voit klikata Tallenna -painiketta mikä lataa optimoidun kuvan oletuksena Windows-käyttöjärjestelmässä Ladatut tiedostot-kansioon.
- Olet optimoinut kuvan sopivaksi harjoitussivullemme.
