Videoiden ja muun liikkuvan kuvan määrä nettisivuilla kasvaa voimakkaasti. Ciscon tekemän arvion mukaan vuonna 2019 videoiden osuus kaikesta nettiliikenteestä tulee olemaan 80-90 prosenttia. Myös nettisivuille toivotaan puhtaan videosisällön lisäksi kasvavissa määrin liikkuvaa kuvaa ja animointeja.

Yksikään tapa lisätä liikkuvaa kuvaa sivuille ei ole täysin pomminvarma, vaan videot, animaatiot sekä niiden kontrollointi on selaimesta riippuen aina hieman häiriöherkkää. Liikkuvan kuvan esittäminen tarkoittaa aina sivun pikseleiden uudelleenpiirtämistä jopa kymmeniä kertoja sekunnissa, ja isoissa videoissa piirrettäviä pikseleitä on valtava määrä. Jos sivun käyttäjän kone tai selain on vanha, häiriöherkkyys kasvaa. Tästä saattaa aiheutua ongelmia varsinkin silloin, kun ison videon toivotaan pyörivän aina sulavasti tai halutaan kontrolloida monimutkaista animaatiota.

Teimme oppaan siitä, mikä esitysmuoto toimii parhaiten eri tilanteissa.

1. Videon jakelualustat

Videon käytön yleisiä haasteita

Videotiedostojen käyttö sivun elävöittämisessä on välillä haasteellista. Videotiedostoihin ei saa läpinäkyvää taustaa, ja niiden saumatonta looppausta ei kaikilla selaimilla saa toimimaan mitenkään. Samoin varsinkin Applen mobiililaitteissa taustavideoita ym. automaattisesti pyöriviä videoita ei saa toimimaan ilman pikku kikkailua. Jos näistä on haittaa, kannattaa skipata suosiolla kaksi ensimmäistä kohtaa.

——–

Kun puhutaan videoklippien, filmien ja ohjelmien lisäämisestä nettisivuille, kannattaa videon jakelualustana käyttää isojen kansainvälisten toimijoiden ratkaisua. YouTube ja Vimeo ovat ne suosituimmat jakoalustat, ja ne tarjoavat erittäin helppokäyttöiset jako-ominaisuudet kaikille käyttäjille. Näiden lisäksi on useita isoja puhtaasti videosisällön jakoon keskittyneitä firmoja, kuten esimerkiksi Flowplayer.

Jälkimmäisten etuna on videosoittimen brändättävyys, eli jos YouTuben tai Vimeon logo videon yhteydessä häiritsee, siitä pääsee myös eroon. Liki kaikki jakelijat antavat mahdollisuuden käyttää videostreamia muutenkin kuin upotetun videosoittimen kautta, useimmiten maksua vastaan. Näin esimerkiksi koko ruudun kokoiset taustakuvavideot voi ajaa myös näiden palveluiden kautta.

+ Videoiden automaattinen konvertointi
+ Käytännössä ehtymättömät kaistat ja serveritehot
+ Nettiyhteyden nopeuteen mukautuva kuvanlaatu
+ Eri selaimissa varmatoimiset soittimet
– Videosoittimen brändäys oman brändin mukaiseksi ei aina onnistu
– Usein maksullisia (joko rahalla tai mainosten kautta)
– Videosoiton kontrollointi koodin avulla joskus hankalaa
– (Pieni) riski jakelualustan kaatumisesta/loppumisesta

2. Videotiedostot omalla serverillä

Ulkopuolisten videoalustojen käyttöön verrattuna tiedostojen pitäminen omalla serverillä kannattaa vain joissain tapauksissa. Omalla serverillä videot pysyvät tallessa, ja videon toistamiseen voi käyttää vapaasti mitä tekniikkaa tai koodia tahansa. Videoiden lataus offline-käyttöä varten on myös helpompi sallia oman serverin kautta. Samalla pitää kuitenkin varautua lisääntyneeseen kaistankulutukseen sekä ennen kaikkea siihen, että lokaalien videoiden lisääminen nettisivuille vaatii jonkun verran teknistä taitoa sekä ohjelmia videoiden konvertointiin. Oppikirjan mukaan tehtäessä jokainen video pitäisi konvertoida kolmeen eri formaattiin (mp4, ogv sekä webm), vaikkakin pelkällä mp4-formaatilla pärjää aika pitkälle.

+ Kontrolli
+ Koodin avulla kontrollointi helpompaa
+ Offline-käytön salliminen
– Kaistankulutus
– Videosoittimen ohjelmointi
– Konvertointijumppa

3. Animoidut GIFfit

Animoidut giffit ovat vanhin edelleen laajemmin web-käytössä oleva liikkuvan kuvan formaatti. Vaikka se on teknisesti kömpelö ja rajoittunut formaatti, sillä on edelleen käyttökohteita. Huumoripätkien ja taiteellisten kokeilujen lisäksi giffeillä saa piristystä sivuille esimerkiksi ns. cinemagraphien avulla. Näissä vain osa kuvasta on animoitu, ja tuloksena voi olla erinomaisen hienoja kuvia. Ajatuksen kanssa tehdyt cinemagraphit toimivat erinomaisen hienosti esimerkiksi journalistisen sisällön kanssa.

Giffit ovat kuitenkin raskaita, useammallakin tavalla. 700×400 pikselin kokoinen cinemagraph voi olla kooltaan yli megatavun, kun vastaava jpg-kuva painaa useimmiten kymmenyksen tästä. Isommat animoidut giffit ovat myös raskaita pyörittää, ja voivat hidastaa merkittävästi selaimen toimintaa. Fullscreen-giffit eivät ole tästä syystä hyvä idea. Gif-animaatioita ei voi myöskään kontrolloida muuten kuin aloittamalla toiston alusta.

+ Toimivat käytännössä kaikkialla 
+ Oikein käytettynä todella vaikuttavia
– Raskaita
Vain 256 väriä
– Hyvin rajalliset mahdollisuudet animaation kontrollointiin

4. CSS-animoinnit

Selkeä valtaosa nykyisin käytössä olevista selaimista tukee melko hyvin sivun elementtien animointia css-tyylitiedostojen avulla. Niitä käytetään yleisimmin nappien ja muiden käyttöliittymäelementtien piristykseen, mutta niiden avulla voi toteuttaa myös koko ruudun kokoisia animointeja. CSS-animointiin pätee moni sama kaava kuin giffeissä: sillä saa hienoa jälkeä, jos tietää mitä tekee, mutta sen avulla on mahdollista saada sivusta vilkkuva ja välkkyvä painajainen, joka kuumentaa koneen ja kaataa selaimen. Myös css-animointien kontrollointi on hankalaa ja tietyissä tapauksissa mahdotonta. CSS-animointien luominen vaatii myös kohtalaisen hyvää css-kielen osaamista.

CSS-animoinnit toimivat hyvällä prosentilla myös mobiilissa. Osa käyttöjärjestelmistä ei tosin näytä animointeja nettisivun skrollauksen aikana.

+ Oikein käytettynä helppo ja kevyt tapa lisätä liikettä sivulle
+ Hyvä ja koko ajan parantuva selaintuki
– Vaatii css-osaamista
– Liikaa käytettynä raskas selaimille

5. Javascript-animoinnit / GSAP

Javascript-animoinnilla kannattaa tehdä sivuelementtien animointeja, jotka ovat css:n avulla turhan monimutkaisia, tai jotka vaativat kontrollointia. Selkeästi paras koodipaketti js-animointiin on aikoinaan Flash-puolella aloittanut GreenSockin GSAP-kirjasto. Sen etuna css:ään verrattuna on yksiselitteisempi syntaksi ja tarkempi kontrolli – javascriptin avulla animoinnit voi esimerkiksi keskeyttää, niiden nopeutta voi muuttaa tai niissä voi siirtyä suoraan tiettyyn kohtaan. Meillä on tapana ottaa GSAP suoraan käyttöön, jos tarkoituksena on luoda yhtään monimutkaisempia animaatioita.

Javascript-animoinnin avulla saadaan aikaiseksi myös visuaalisesti vaikuttavat, sivun skrollauksen mukaan vaihtuvat parallax-animaatiot.

Mobiilikäyttöön pätee samat säännöt kuin css-animaatioiden kohdalla.

+ Tarkka keino animointiin
+ Laaja selaintuki
+ Selkeä syntaksi
– Vaatii aina javascript-tuen selaimessa
– Monimutkaiset animaatiot raskaita selaimelle
– Vaatii ohjelmointitaitoa

6. Canvas-animointi

Canvas on nettisivujen elementti, jota voi ohjelmoida hyvin monipuolisesti. Canvas on kuin tyhjä taulu, johon voi javascript-koodin avulla piirtää jos jonkinlaista animaatiota. Esimerkiksi upean forecast.io -sivuston sääkartat on animoitu canvasin avulla. Canvasin heikkous on se, että vaikka käytössä olisi animointia helpottavia koodikirjastoja, monimutkaisemmat animoinnit ovat aina vaativia toteuttaa. Taitavissa käsissä canvasilla voi kuitenkin tehdä melkeinpä kaiken minkä aikoinaan Flashin avulla.

+ Liki rajattomat mahdollisuudet animointiin
+ Hyvä selaintuki
– Monimutkaiset animaatiot raskaita selaimelle
– Vaativia toteuttaa

7. Muita vaihtoehtoja

Sivuille saa liikkuvaa kuvaa myös muilla keinoilla. Yksi keino on tehdä animaation frameista yksittäisiä kuvia ja näyttää/piilottaa niitä koodin avulla, vähän kuin ennen vanhaan pläräysvihkoja. Näissä ongelmana on ladattavan datan määrä sekä animoinnin sulavuus, jos käytössä on paljon isoja kuvia. Tekniikka soveltuu parhaiten esim. tuotekuvien tai vastaavien pyörittelyyn.

Tätäkin tekniikkaa on kehitelty pidemmälle, mutta käytännössä se vaatii kohtalaisen paljon teknistä taitoa ja aikaa.

Animoidun giffin korvaajaksi kehitellään myös APNG-formaattia eli animoitua png-kuvaa, mutta sen selaintuki on vaatimatonta ja animaatiot ovat tiedostokooltaan isoja.

Kovassa nosteessa olevaa kuvaformaatti SVG:tä voi myöskin animoida, mutta varsinkin Internet Explorerin selaintuki ei ole vielä riittävällä tasolla monipuolisten animointien tekoon. Tilastokäppyröiden ja graafien animointiin svg on kuitenkin jo varteenotettava vaihtoehto.

Yksi vaihtoehto, tosin koko ajan heikkenevä, on edelleen Flash, joka mahdollistaa erittäin monimutkaiset animaatiot. Ne eivät vain toimi mobiilissa, ja ennen liki täydellinen selaintuki heikkenee koko ajan. Näin ollen Flash-animaatioita ei kannata miettiä muihin kuin suljettuihin ympäristöihin.

—————

Oli animaatio ja tekniikka mikä tahansa, sen lisäämisessä kannattaa olla aina tarkkana. ”Mitä vähemmän ja pienempää” on usein hyvä nyrkkisääntö. Varsinkin käyttöliittymäelementtien animoinnissa ylimääräiset ja varsinkin sivun toimintoja hidastavat liikkeet ovat pitemmän päälle vain käyttöä haittaavia. Hyvällä maulla käytettynä animoinnit ja videot voivat kuitenkin nostaa sivun profiilia huomattavasti.

– Aapo