Kuvien muokkaaminen kotisivuja varten

Kuvankäsittely kätevästi nettiselaimessa

Verkkosivuilla käytetään tänä päivänä yhä enemmän kuvia niin tunnelman luomiseen kuin informaation välittämiseen. Huolimaton suurikokoisten kuvien käyttö voi kuitenkin hidastaa sivuston käyttökelvottomaksi ja syödä kaiken tallennustilan webhotellista.

Suurikokoiset kuvat, esimerkiksi digikamerasta ladatut kuvat, on hyvä käsitellä sopivan kokoisiksi ennen sivustolle lataamista. Kuvankäsittelyyn voi käyttää joko omalla tietokoneella tai verkkoselaimessa käytettäviä käsittelyohjelmia.

Yksinkertainen netistä löytyvä kuvankäsittelyohjelma on Canva Photo Editor, jonka käyttö käydään läpi tässä artikkelissa.

Kuvan lataaminen Canva Photo Editoriin

Photo Editoriin saa ladattua oman kuvan joko klikkaamalla aloitusnäkymän vihreää Upload-painiketta tai raahaamalla tietokoneen kansiosta kuvan aloitusnäkymään.

Eri muokkaustyökalut ovat keskellä näkymän yläosaa. Valmiin kuvan latauspainike löytyy oikeasta yläkulmasta.

Kuvasuodattimet ovat värien esiasetuksia

Kuvasuodattimet (Filter) ovat valmiita esiasetuksia, joilla saa muutettua kuvan väritystä yhdellä klikkauksella. Grayscale-toiminnolla kuvasta saa kätevästi tehtyä mustavalkoisen.

Kuvan värien säätäminen itse

Kuvan värejä voi myös säätää itse (Adjust). Liukuvalitsimilla voi muuttaa

• kuvan kirkkautta (brightness),
• kontrastia (contrast) eli tummia tummemmiksi ja kirkkaita kirkkaammiksi,
• ja värikylläisyyttä (saturation) eli värien välistä eroa.

Kuvan rajaaminen

Kuvan rajauksella (Crop) voi kuvasta karsia ylimääräisen pois. Rajaaminen tapahtuu raahaamalla kulmien pisteitä hiirellä. Rajausruudukkoa voi myös siirtää klikkaamalla siitä kiinni hiirellä.

Rajauksessa voi käyttää apunaan esiasetettuja kuvasuhteita. Esimerkiksi laajakuvan saa tehtyä käyttämällä 16:9 esivalintaa.

Tehtävä rajaus hyväksytään vihreällä Apply-panikkeella. Jos rajaus meni vinksalleen, niin alkuperäisen kuvan saa palautettua Reset-painiketta painamalla.

Kuvakoon muuttaminen

Kuvakoon muuttaminen (Resize) onnistuu raahamalla kulmien pisteitä keskemmälle (pienennys) tai ulospäin (suurennus). Kuvakoon saa muutettua myös asettamalla tarkat arvot joko leveys (W) tai korkeus (H) valintoihin.

Kuvakokoa muutettaessa Lock aspect ratio –valinta on hyvä pitää käytössä. Tämä säilyttää kuvasuhteen ja kuva pysyy samanmuotoisena pienennyksestä tai suurennuksesta riippumatta. Ilman valintaa kuva litistyy tai venyy sen mukaan, miten kulmapisteitä liikuttelee.

Koon muutos hyväksytään Apply-painikkeella ja Reset palauttaa kuvan alkuperäiseen kokoon.

Kuvan kääntäminen

Otetut kuvat saattavat toisinaan olla kyljellään tai ylösalaisin riippuen, missä asennossa kamera on ollut kuvaa otettaessa. Tällöin kuvan voi kääntää (Rotate) oikeinpäin kuvankäsittelyn yhteydessä.

Kuvaa voi kääntää joko vastapäivään (counter-clockwise) tai myötäpäivään (clockwise).

Peilikuvan tekeminen

Kuvan voi halutessaan muuttaa myös peilikuvaksi (Flip) joko vaaka- (horizontal) tai pystysuunnassa (vertical).

Kuvan lataaminen omalle tietokoneelle

Kun kuvankäsittely on valmis, niin kuvan voi ladata omalle tietokoneelleen klikkaamalla oikean yläkulman vihreää Download-painiketta. Tämä avaa popup-ikkunan, jonka alalaidassa olevaa ”Download your photo by itself” linkkiä klikkaamalla avautuu tallennusvalinta.

Kuvan pakkaaminen ennen kotisivuille lisäämistä

Ennen käsitellyn kuvan lataamista omille kotisivuilleen, se kannattaa vielä pakata. Esimerkkikuvan tiedostokoko on 2,1 megatavua eli se on aivan liian suuri kotisivuilla käytettäväksi. Tällaiset isot kuvat nimittäin syövät kotisivujen tallennustilan melko nopeasti ja hidastavat kotisivujen latautumista.

Kuvan pakkaamiseen voi käyttää tinypng.com palvelua. Pakkaus hoituu automaattisesti, kun vain raahaa pakattavan kuvan tai kuvat katkoviivalla rajatulle alueelle.

Kun pakkaustoimenpide on valmis, palvelu kertoo kuinka paljon tavuja säästyi kuvakohtaisesti ja yhteensä. Kuvat voi sen jälkeen ladata joko yksittäin tai kaikki kerrallaan.

Kuvan optimointi hakukoneita varten

Jos vielä ennen kuvan lataamista kotisivuille haluaa optimoida kuvaa hakukoneita varten, niin sen tiedostonimen voi muuttaa kuvavaaksi. Jos kuvassa on saari Saimaalla ja kuvatiedoston nimi on DSC12345.jpg, niin sen voi muuttaa muotoon saari-saimaalla.jpg. Nimen muuttaminen auttaa hakukoneita ymmärtämään, mitä kuva esittää.

WordPressissä optimointia voi myös parantaa lisäämällä Mediakirjastossa kuvalle kuvaavan otsikon ja vaihtoehtoisen tekstin (alt). Alt-tieto näkyy kuvan tilalla silloin, kun kuva ei syystä tai toisesta lataudukaan.