4.7 Kuvat
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?
Kun meillä on kännykällä tai järjestelmäkameralla otettu kuva, meidän tulee muokata kuva verkkoon soveltuvaan kokoon.
Kuvan fyysiset mitat kannattaa asettaa sopivaksi kohteeseen, johon kuvaa aiotaan käyttää. Maksimissaan kuvan mitat noudattavat kuitenkin 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 yleisellä tasolla melko marginaalista tällä hetkellä.
HD-resoluution mukaisesti siis vaakakuvan maksimi leveys tulisi olla 1920px ja pystykuvan korkeus maksimissaan 1080px. Kuten mainittu kuvan mitat voivat toki olla pienemmätkin, jos kuvan kohteen mitat ovat pienemmät.
Kuvan koko (kovalevyllä) kannattaa optimoida alle 500KB:n (0,5Mb), jotta se aukeaa kohtalaisen nopeasti myös heikommilla verkkoyhteyksillä. Normaalisti kameralla tai kännykällä otetun kuvan koko on useita megabittejä, joten se on armotta liian suuri suoraan käytettäväksi verkossa.
Jos käytät kuvia WebP-muodossa, esimerkiksi Adobe Photoshop ei salli kuvan optimoointitallennuksessa (save for WEB) kuvamuotoon WebP-muotoa (vuonna 2023) vaan kuvan muuntamiseen WebP-muotoon on käytettävä jotain kolmannen osapuolen sovellusta, kuten XnConvert.
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 kuitenkin 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ä.
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.
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.
Nyt voit jatkaa parantelemalla kuvan kontrastia ja lisätä kuvaan muita muotoiluja, jos haluat.
Kun olet tehnyt muokkaukset voit tallentaa kuvan kovalevyllesi valinnasta File/Export as. Tiedostomuodoksi valitsemme JPG -tiedoston koska on kyseessä tavallinen, ei läpinäkyvyyttä sisältävä, kuva.
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.
