Liikettä sivustolle

Liikkuva media — videot, animaatiot ja erilaiset visuaaliset tehosteet — on yhä tärkeämpi osa modernia verkkosivustoa. Oikein käytettynä se lisää visuaalista kiinnostavuutta, parantaa viestintää. Samalla on kuitenkin tärkeää huomioida suorituskyky, saavutettavuus ja tiedostokoot, jotta sivusto pysyy nopeana ja käyttäjäystävällisenä. Tässä osiossa käydään läpi keskeiset tavat lisätä ja optimoida liikkuvaa mediaa WordPress‑sivustolla.

Liikkuvaa mediaa voidaan hyödyntää esimerkiksi:

• tuote-esittelyissä
• taustavideoissa
• opastus- ja koulutusmateriaaleissa
• animaatioilla elävöitetyissä käyttöliittymissä
• visuaalisissa tehosteissa, kuten fade- ja slide-animaatioissa

Videot sivustolla – Youtube

Videon lisäämiseen helpoin ja käytetyin tapa on videon upottaminen sivustolle videopalvelusta, kuten Youtube, Vimeo tai vastaava. Tällöin se ei kuormita omaa palvelintilaa webhotellissa. Lisäksi videopalvelu optimoi videon laadun ja suorituskyvyn automaattisesti. On hyvä huomioida, että esimerkiksi Youtuben ilmainen ns.nocookie-versio näyttää videoiden yhteydessä mainoksia, joten jos välttää ne, täytyy video tarjota omalta palvelimelta.

Videon upottaminen sivustolle on helppoa miltei kaikista editoreista löytyvällä elementillä. Vaihtoehtoinen lisäämistapa on kopioida Youtubesta upotuskoodi (embed). Katsotaan seuraavaksi käytännössä, kuinka video lisätään sivustolle editorin avulla tai koodilla ja tutustutaan Youtuben jakamisen toimintoihin.

Etsi Youtubesta jokin video, jonka haluat lisätä sivustollesi näkyviin.

Youtubesta voidaan jakaa videoita erilaisiin SOME-kanaviin mutta niiden URL-osoitetta, voidaan hyödyntää videon upottamisessa sivustolle.

1. Jos olet lisäämässä videoa sivuntolle esimerkiksi Elementorin videoelementillä, voit vain kopioida videon URL-osoitteen (1) leikepöydälle ja liittää sen videoelementin Link-kenttään.
2. Jos haluat liittää videon koodimuodossa tekstielementtiin tai esimerkiksi Elementorin HTML-elementillä, kopioi Youtuben Embed-koodi leikepöydälle ja liitä se tekstielementtiin.

Videon lataaminen omalle palvelimelle

Jos video halutaan pitää täysin omassa hallinnassa, se voidaan ladata WordPressin mediakirjastoon. Tämä menettelytaopa sopii lyhyisiin taustavideoihin, sisäisiin koulutusmateriaaleihin tai tilanteisiin, joissa ei haluta mainoksien sotkevan videon vaikutelmaa.

Haittapuolena tälle metodille on, että video joudutaan optimoimaan sivustolle ja käytännössä se usein vaatii osaamista videoeditoinin perusteista. Lisäksi videot vievät ainakin tällä hetkellä melko paljon tilaa palvelintilasta. Videoiden skaalaaminen sivun sisältöön saattaa myös olla hankalaa.

Editointi ja editorit

Jos video ladataan palvelimelle ja näytetään sivustolla se täytyy optimoida videoeditointiohjelmassa. Videoiden editointiin on olemassa myös ilmaisia ohjelmia:

1. Davinci Resolve (ilmainen versio)
   • Erittäin vahva väri- ja äänen käsittely
   • Sopii sekä yksinkertaiseen että ammattimaisempaan editointiin
   • Toimii Windowsissa, macOS:ssa ja Linuxissa
   • Monipuolisten ominaisuuksien vuoksi käyttäminen vaatii opettelua.
2. Shotcut
   • Avoimen lähdekoodin ohjelma
   • Yksinkertaisempi kuin Resolve
   • Tukee monia videoformaatteja ja Codec-asetuksia
   • Kevyt ja erinomainen aloittelijoille, jotka haluavat helpon käyttöliittymän
3. OpenShot
   • Tosi helppo käyttöliittymä, joten loistava perusprojektiin, jossa ei tarvita ammattimaisia työkaluja
   • Leikkeiden leikkaus, siirtymät, tekstitykset
   • Rajallinen edistyneissä efekteissä

Videon tallentaminen

Kun video on editoitu kuntoon on tarpeen tallentaa video. Tallennettaessa tulee muistaa seuraavat ominaisuudet:

• Koodekki: H.264 (laajimmin tuettu)
• Tiedostomuodoksi aina MP4
• Resoluutiona verkkosivuilla 1080p eli HD 1920×1080 tai 720p (pienempi)
• Bitrate -arvoksi 8-12Mbps (1080p) tai noin 5Mbps (720p)
• FPS arvona käytetään tavallisimmin 24-30 fsps arvoa

Miksi video vie tilaa?

Jotta ymmärtää, miksi videotiedostot voivat olla suuria, on hyvä hahmottaa mitä video oikeastaan on. Video muodostuu yksittäisistä kuvista, joita näytetään peräkkäin niin nopeasti, että katsojalle syntyy vaikutelma liikkuvasta kuvasta. Tätä kuvien määrää sekunnissa kutsutaan FPS-arvoksi (Frames Per Second) Käytännössä FPS kertoo kuinka monta kuvaa yhdessä sekunnissa näytetään. Jos FPS-arvo on liian pieni, videosta tulee nykivä, sillä silmä alkaa erottaa kuvien vaihtumisen.(esim. <article>, <nav>, <header>)..

Mitä enemmän kuvia sekunnissa ja mitä suurempia nämä kuvat ovat (esimerkiksi Full HD, 4K), sitä enemmän dataa videon tallentaminen vaatii. Videoeditoinnissa voidaan pienentää tiedostokokoa esimerkiksi laskemalla FPS-arvoa tai optimoimalla kuvien laatua ja pakkausta. Näillä keinoilla videosta saadaan kevyempi ilman, että katselukokemus kärsii merkittävästi.

Videon pakkaus ja suositellut koodekit

Videot sisältävät erittäin paljon dataa, minkä vuoksi ne täytyy pakata, jotta tiedostokoko pysyy hallittavana ja videoita voidaan toistaa sujuvasti eri laitteilla ja verkkoyhteyksillä. Pakkaus perustuu siihen, että videosta poistetaan tai tiivistetään tietoa tavalla, joka ei merkittävästi heikennä katselukokemusta.

Videopakkauksia on kahta päätyyppiä:

• Häviöllinen pakkaus – Poistaa osan kuvainformaatiosta. Tiedostokoko pienenee huomattavasti, mutta pieniä yksityiskohtia voi kadota. Lähes kaikki verkkovideot käyttävät tätä.
• Häviötön pakkaus – Säilyttää kaiken alkuperäisen datan. Laatu on täydellinen, mutta tiedostokoko erittäin suuri. Käytetään lähinnä arkistointiin ja ammattituotannon välivaiheisiin.

Videon pakkaus tehdään koodekilla (codec), joka määrittää, miten kuva ja ääni pakataan ja puretaan. Koodekki vaikuttaa suoraan videon laatuun, tiedostokokoon, suorituskykyyn ja yhteensopivuuteen eri laitteilla.

Yleisesti suositeltuja koodekkeja ovat:

• H.264 (AVC) – Yleisin ja laajimmin tuettu koodekki. Tarjoaa hyvän kuvanlaadun kohtuullisella tiedostokoolla ja toimii lähes kaikilla laitteilla. Turvallinen perusvalinta verkkovideoihin.
• H.265 (HEVC) – Tehokkaampi kuin H.264 ja tuottaa pienemmän tiedostokoon samalla laadulla. Vaatii enemmän laskentatehoa ja laitetukea, mutta soveltuu hyvin 4K-videoihin.
• VP9 – Googlen avoin koodekki, jota YouTube käyttää laajasti. Tarjoaa hyvän pakkaustehon ilman lisenssimaksuja, mutta ei ole yhtä yleisesti tuettu kuin H.264.
• AV1 – Uusin avoin koodekki, joka hyödyntää videotason pakkaustekniikkaa. Tarjoaa selvästi paremman pakkaustehon kuin H.264 ja VP9, mutta vaatii enemmän laskentaa ja uudemmat laitteet. Tuki kasvaa nopeasti ja sitä pidetään tulevaisuuden standardina.

Käytännön suositus YouTubeen: Video kannattaa renderöidä editointiohjelmasta H.264-koodekilla, korkealla laadulla ja riittävällä bitratella Bitrate on ikäänkuin FPS, mutta se ei kerro kuvien määrää vaan kuinka paljon dataa (bits) sekunnin aikana näytettävät kuvat (FPS) sisältää. (esim. 1080p- tai 4K-esiasetuksella). YouTube pakkaa videon aina uudelleen omiin formaatteihinsa (VP9 tai AV1), joten tärkeintä on toimittaa palvelulle mahdollisimman laadukas lähdemateriaali.

Koodekin lisäksi bitrate eli datavirta vaikuttaa ratkaisevasti kuvanlaatuun ja tiedostokokoon. Liian matala bitrate heikentää kuvaa, kun taas tarpeettoman korkea kasvattaa tiedostoa ilman näkyvää hyötyä. Useimpien editointiohjelmien valmiit YouTube-esiasetukset tarjoavat tähän hyvän lähtökohdan.