1.4. Kuvat ja media sivustolla
Median muokkaus ja lisääminen
WordPressissä kuvat, logot, ladatut fontit, videotiedostot, grafiikat jne.. sijaitsevat mediakirjastossa, josta ne haetaan sivuston elementtien käyttöön. Ennenkuin kuvia ladataan mediakirjastoon, ne täytyy kuitenkin käsitellä sivuille sopivaan muotoon ja optimoida ne webkäyttöön.
Tiedostomuodot webissä
Webissä käytettäviä tiedostomuotoja ovat .jpg (jpeg), .png sekä lähinnä kuvakkeissa ja animoiduissa elementeissä käytetty .gif. Uusia tulokkaita formaattien joukossa ovat Googlen julkaisema WebP ja JPEG 2000 sekä JPEG XR.
jpg (jpeg)
Kun julkaiset tavallisia kuvia esimerkiksi sivujen kuvagalleriassa, ne kannattaa tallentaa .jpg-muodossa. Jpg-muoto ei tue läpinäkyvyyttä. Se on pakattu kuvaformaatti ja ehkä käytetyin kuvatiedostomuoto webissä.
png
Jos lataamasi kuva sisältää läpinäkyvyyttä, kuvaformaatiksi tulee valita png. Png-kuvasta tulee suurikokoinen, joten sitä kannattaa käyttää vain, jos on tarpeen esittää läpinäkyvyyttä kuvissa. Usein myös erilaisissa pienissä kuvakkeissa saattaa tulla png-kuvaformaatti kyseeseen, jos kuvilta vaaditaan tarkkuutta. Png kun on tarkempi kuvaformaatti kuin jpg.
Kuvien optimointi?
Miksi kännykällä tai järjestelmäkameralla otettu kuva on tarve muokata verkkoon soveltuvaan kokoon?
- Mobiililaitteella otetusta kuvasta tulee tavallisesti 3-4Mb kokoinen tiedosto ja sen ulkoiset mitat ovat noin 3-4 kertaa HD-resoluution näyttöjen (1920×1080) kokoa suurempia. Järjestelmäkameroiden tiedostot ovat vielä tätäkin suurempia.
- Suuret kuvat kuluttavat palvelintilan tallennuskapasiteettia.
- Sivustojen latausnopeus kärsii radikaalisti suurien kuvien ansiosta ja sivut latautuvat hitaasti. Selaaja hermostuu ja poistuu sivustolta.
Kuvan fyysiset mitat kannattaa asettaa sopivaksi kohteeseen, johon kuvaa aiotaan käyttää. Maksimissaan kuvan mitat noudattavat HD-näytön kokoa (1920×1080). Tämä siksi, että suurin osa tietokoneen näytöistä eivät ole yli HD-resoluution. 4K-näyttöjäkin tosin on mutta niiden käyttö on edelleen melko marginaalista.
HD-resoluution mukaisesti vaakakuvan maksimi leveys tulisi olla 1920px ja pystykuvan korkeus maksimissaan 1080px. Kuvan mitat voivat toki olla pienemmätkin, jos kuvan käyttötarkoitus sen sallii.
Kuvan koko (kovalevyllä) kannattaa optimoida alle 500KB:n (0,5Mb), jotta se aukeaa kohtalaisen nopeasti myös heikommilla verkkoyhteyksillä.
Tarjoa kuvat WebP-muodossa. Esimerkiksi Adobe Photoshop ei salli kuvan optimoointitallennuksessa (save for WEB) kuvamuotoon WebP-muotoa (vuonna 2025) vaan kuvan muuntamiseen WebP-muotoon on käytettävä jotain kolmannen osapuolen sovellusta, kuten XnConvert.
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.
Moderni WebP-formaatti
Google avasi vuonna 2010 käytettäväksi tiedostomuodon WebP. Verkossa toimivien sivuston optimointityökalujen tavallinen virheilmoitus on, että testattu sivusto ei tarjoa kuvia WebP -formaatissa.
WebP on Googlen kehittämä moderni kuvamuoto, joka tarjoaa korkealaatuista pakkausta ja pienempiä tiedostokokoja verrattuna jpg- ja png-formaatteihin. Se tukee sekä häviötöntä että häviöllistä kuvien pakkausta.
WebP:n edut:
- Tiedostokoon pieneneminen: WebP-kuvilla on yleensä pienemmät tiedostokoot verrattuna JPEG- ja PNG-formaatteihin säilyttäen samalla hyvän laadun. Tämä voi johtaa nopeampiin latausaikoihin verkkosivustollasi, parantaen kokonaiskäyttäjäkokemusta.
- Pakkaustehokkuus: WebP käyttää edistyneitä pakkaustekniikoita, mikä voi johtaa parempaan kuvanlaatuun pienemmillä tiedostokoilla verrattuna muihin formaatteihin.
- Tuki läpinäkyvyydelle: WebP tukee sekä menetettyä että menetetöntä läpinäkyvyyttä, tarjoten hyvän vaihtoehdon PNG:lle kuvissa, joissa tarvitaan läpinäkyvää taustaa.
WebP:n käytössä on toki huomioitava:
- Selausyhteensopivuus: Vaikka useimmat nykyaikaiset selaimet tukevat WebP:tä, jotkut vanhemmat selaimet eivät välttämättä tue sitä. Varmista WebP:n yhteensopivuus kohdeyleisösi kanssa ja sovita sen mukaisesti.
- Kuvaeditoriohjelmisto: Jos muokkaat kuvia säännöllisesti, varmista, että käyttämäsi kuvankäsittelyohjelmisto tukee WebP:tä. Vaikka tuki on lisääntynyt, kaikki ohjelmat eivät ehkä tue formaattia täysin.
- Häviöllinen- vs. häviötön-pakkaus: Riippuen tarpeistasi, valitse menetetyn ja menetettömän pakkaamisen välillä. Menetetty pakkaus uhraa hieman kuvanlaatua pienemmille tiedostokoille, kun taas menetetön pakkaus säilyttää alkuperäisen laadun mutta saattaa johtaa suurempiin tiedostokokoihin.
- Varmuuskopiointi ja yhteensopivuus: Ennen jpg- ja png-kuvien kokonaisvaltaisesta hylkäämisestä sivustolla, varmista, että sinulla on varmuuskopiot alkuperäisistä kuvista. Harkitse myös mahdollista tarvetta yhteensopivuudelle alustojen tai palveluiden kanssa, jotka eivät välttämättä tue WebP:tä 100%.
Yhteenvetona voidaan todeta, että WebP:n käyttö verkkosivustojen kuvissa on yleisesti ottaen hyvä idea. Useimmat käyttäjät, jotka päivittävät selaimensa säännöllisesti, eivät kohtaa ongelmia WebP-kuvien kanssa, joten kuvat voidaan periaatteessa tarjota nykyään jo pelkästään WebP-formaatissa. WebP-formaattia tukemattomat selaimet rajoittuvat vanhempiin versioihin Internet Explorerista tai joihinkin harvinaisempiin selaimiin, joilla selaavat saattavat kohdata haasteita WebP-kuvien näkemisessä.
Itse käytän nykyään vain webp-kuvaformaattia, enkä tarjoa sivustoillani lainkaan jpg- tai png-kuvia.
Photopea
Photopea on verkkosovellus, joka muistuttaa jonkin verran käytöltään Adoben Photoshop kuvankäsittelyohjelmaa mutta on luonnollisestikin huomattavasti vaatimattomampi toiminnoiltaan ja käyttäjäystävällisyydeltään. Sovelluksesta voidaan tallentaa kuvat myös .webp-muotoon mikä on erinomainen ominaisuus.
Photopea -ohjelmiston vasemmassa laidassa olevasta pystypalkista löytyvät ikonit ovat kuvankäsittelyohjelman eri toimintoja. Valikosta löytyy esimerkiksi teksti-ikoni ”T”, valikon alimpana (kuvassa punainen ja musta neliö) ovat työkalun värin asettamisen painikkeet. Musta on reunan väri ja punainen täytteen väri. eri toimintoihin voi tutustua tarkemmin omatoimisesti.
Ylälaidassa ovat ohjelmistoille standardit pudotusvalikot, joiden kautta pääsee myös ohjelmiston erilaisiin toimintoihin käsiksi.
Kuvan muokkausharjoitus
Klikkaa File -valikosta Open… -vaihtoehto ja valitse aiemmin lataamasi järvimaisema Photopeaan.
Kuvassa on hieno järvimaisema mutta kokonaisuudessa häiritsee horisontti, joka on vinossa. Kuvissa kannattaa aina kiinnittää huomio horisonttiin ja tarvittaessa korjata se kuvankäsittelyohjelmalla. Horisontin jättäminen vinoon on perinteinen virhe, jota ei kannata kuvaan jättää. Joskus toki vinoutta voidaan käyttää myös tehokeinona mutta tavallisesti se pyritään asettamaan suoraan.
Kuvan suoristamiseen käytetään viivaintyökalua, joka löytyy työkaluvalikosta vasemmalta pipettityökalun (eyedropper) alta. Työkalun saa näkyviin painamalla pipettityökalun päällä hiiren vasemmalla painikkeella noin 4 sekunnin ajan, jolloin työkalulisävalikko avautuu.
Klikkaa työkalu aktiiviseksi ja piirrä kursorilla viiva järven takana näkyvän horisontin mukaisesti.
Suoristus tehdään klikkaamalla työkalun toiminnoista ikkunan ylälaidassa painiketta Straighten layer.
Kuva suoristuu horisontin mukaisesti suoraan ja voimme siirtyä kuvan leikkausvaiheeseen.
Tässä tapauksessa kuva on tarkoitus tulla sivuston kuvagalleriaan ja haluamme kuvasta HD-resoluutioon sopivan kuvan 1920×1080 pikseliä.
Kuvan rajaamiseen käytetään Crop-toimintoa, joka löytyy monesta kuvankäsittelyohjelmasta tutun ikonin alta (kts. kuva). Asetamme kohderesoluutioksi 1920×1080 sivun ylälaitaan ilmestyvistä määrittelyistä, joista W tarkoittaa leveyttä (width) ja H korkeutta (height).
Voit siirrellä rajattavaa aluetta raahaamalla hiiren ykköspainikkeella kuvassa olevaa rajauskehikkoa. Kehikon kokoa voi myös muokata kehikon kulmissa olevista neliön muotoisista kahvoista. muotoile rajaus neliön avulla miellyttäväksi. Kun olet asettanut asetukset voit painaa yläosassa olevaa täppää ja hyväksyä rajauksen, jonka jälkeen kuvan fyysiset mittasuhteet on asetettu ja kuva leikkaantuu oikeaan suhteeseen.
Alkuperäinen kuva on otettu järjestelmäkameralla ja sen resoluutio on 5760×3840 (pikseliä, px), joka on aivan liian suuri käytettäväksi verkkosivuilla. Tiedosto on kooltaan yli 6 megabittiä, kun suurin suositeltu verkkosivuilla on noin 400 KB. Seuraavaksi muutamme kuvan fyysistä kokoa pienemmäksi.
Valitse ylävalikosta Image -pudotusvalikosta Image size… -valinta, josta avautuu kuvan koon muutoksen ikkuna.
Ikkunassa asetetaan kuvalle uudet mitat. Mittojen oikealla puolella oleva ketjuikoni kertoo, että kuvan kuvasuhde pysyy samana muutettaessa toista arvoa. Valitse myös Interpolation asetukseksi Bicubic Sharper, joka terävöittää kuvaa pienennettäessä (toiminto tulisi aina tehdä pienennettäessä kuvaa). Paina lopuksi ok.
Kuvan terävöitys kannattaa aina tehdä kuvan kokoa muutettaessa sillä pienennettäessä esiintyy usein pientä laadun heikentymistä. Lisäksi kuvia suositellaan muutettavaksi aina pienemmäksi. Kuvien suurentaminen aiheuttaa pikselöitymistä ja kuvan laatu samenee. Tämä johtuu siitä, että kuvan pikselit (laajenevat) tai kuvankäsittelyohjelma luo uusia pikseleitä kuvaan, jolloin laatu heikkenee. Samoin, jos kuva ensin pienennetään ja uudelleen suurennetaan, kuvan laadu huononee sillä kuvankäsittelyohjelma muuntaa kuvan pikseleitä aina muokattaessa. Pienennettäessä pikselien määrä pienenee ja kun kuva suurennetaan pikseleitä ei ilmaannu mistään lisää vaan niiden kuvansisällöllinen määrä kuvassa pysyy samana. Siksi kuvan tarkkuus kärsii suurennettaessa kuvaa.
Kun olet tehnyt muokkaukset voit tallentaa kuvan kovalevyllesi valinnasta File/Export as. Tiedostomuodoksi valitsemme webp-tiedoston, koska se on verkkosivuille paras vaihtoehto.
Save for web -ikkunasta voimme muokata minkä kokoiseksi kuva tulee eli optimoimme kuvan verkkosivuille. Optimoinnin määrä asetetaan Quality -liukusäätimestä.
Huomaa kuvan alapuolella ikkunan vasemmassa alalaidassa näkyy tallennetun kuvan koko. Alkuperäisen kuvan (6 megaa) koosta olemme pudottaneet kuvan kokoa 197,3:n kilotavuun, joten raskaasta kuvasta on tullut silmämääräisesti häviöttömästi todella paljon ketterämmän kokoinen.
Säädä tarkkuuden määrä Quality-säätimestä niin, että kooksi tulee noin 400 KB ja tallenna kuva.
