Liikkuvaa kuvaa verkkoon

Internet tarjoaa kätevän tavan välittää mielenkiintoisia multimediaesityksiä halutuille kohderyhmille. Mobiililaitteiden yhteysnopeudet ovat viime vuosien aikana nousseet merkittävästi ja kasvu tuntuu jatkuvan edelleen 5G-yhteyksien yleistyessä. Tämä parantaa tiedostojen latausnopeuksia, mikä puolestaan mahdollistaa suurempien multimediaesitysten hyödyntämisen. Laitteiden keskimääräinen suorituskyky on kehittynyt myös valtavasti, mikä puolestaan sallii monimutkaisempien ja samanaikaisten animaatioiden hyödyntämisen.

Keskitymme tässä artikkelissa animoitujen kuvien teknisiin ominaisuuksiin ja jätämme varsinaisen animaation ja videotuotannon käsittelyn myöhempiä artikkeleita varten. Näitä animoituja eli liikkuvia kuvia voidaan rakentaa monella eri tavalla. Eri tavoilla on luonnollisesti hyvät ja huonot puolensa, joita käydään pintapuolisesti läpi.

Animoidut tiedostot

Pienien animaatiopätkien ja videolooppien jakamiset verkossa on perinteisesti hoidettu GIF-kuvamuodon (Graphics Interchange Format) avulla. Nämä tiedostot ovat 8-bittisiä, mikä käytännössä rajoittaa värien määrän 256:een. Tämän lisäksi pakkausalgoritmista johtuen koot saattavat kasvaa valtaviksi erityisesti suuremmilla kuvaresoluutioilla. Kuvamuodon paras etu on kuitenkin se, että ne toistuvat lähestulkoon missä vain. Ehkä tästä syystä ne ovat olleet suosittuja myös sosiaalisessa mediassa.

Toinen vanha tekniikka on Adobe Flash, joka oli vuosituhannen alussa erittäin suosittu ja tehokas animointimuoto. Ongelmaksi muodostuivat kuitenkin formaatin tietoturvaongelmat, joihin ei tuntunut loppua tulevan lainkaan. Lopulta tekniikka päätettiin hylätä Adobenkin toimesta ja sen kehitys ja jakaminen loppuu täysin vuoden 2020 lopussa. Jos verkkosivuiltasi löytyy vielä muinaisia Flash-esityksiä, kannattaa ne poistaa pian.

GIF-animaatiot voidaan tällä hetkellä korvata APNG-kuvaformaatilla (Animated Portable Network Graphics), joka julkaistiin jo vuonna 2008. Tiedostomuoto tukee 24-bittisiä kuvia, läpinäkyvyyttä ja miltei kaikkia moderneja selaimia. Tarkemman selaintuen voit tarkastaa Caniuse-sivustolta . Viereinen animaatio Valkohattupallosta hyödyntää APNG-tekniikkaa ja se koostuu yhteensä 15 kuvasta.

APNG tarjoaa usein pienemmän tiedostomuodon verrattaessa samanlaatuisiin GIF-kuviin. Tietynlaisissa kuvissa tämä muoto on ylivoimainen myös muihin formaatteihin nähden. APNG-tiedosto rakennetaan yhdistämällä useita PNG-kuvia yhteen, lisäämällä tarvittaessa viivettä kuvien vaihtamiseen ja lopuksi pakkaamalla koko kuvasarja.

Videomuodot

Yleisin tapa liikkuvan kuvan esittämiseen on tietysti videotiedosto. Videotiedostoja voidaan hyödyntää yhtä lailla valokuvista ja tietokonegrafiikasta rakennetuista animaatiopätkistä kuin suoraan videokameroilla taltioiduista videopätkistä. Video- ja äänitiedon pakkaamisen ja purkamisen mahdollistavien algoritmien eli koodekkien ansiosta videotiedostoja saadaan pakattua entistä pienempään tilaan ja tämän vuoksi niitä voidaan hyödyntää järkevästi myös verkkosivuilla. Suuremmat videot voidaan ylläpitää videopalveluissa kuten Vimeossa ja Youtubessa, mutta pienemmät videot kannattaa tarjota suoraan omilta verkkosivuilta.

Nykyiset verkkoselaimet tukevat standardiksi muodostunutta HTML5 video -elementtiä, joka osaltaan tarjoaa korvaavan vaihtoehdon selainlisäosan vaativille Flash-esityksille. Animaation tai videon luomisen jälkeen se koodataan koodekilla ja kääritään johonkin esityksen mahdollistavaan multimediasäiliömuotoon. Tämä säiliömuoto eli tiedostokääre määrittää myös pakatun videon lopullisen tiedostopäätteen (esimerkiksi .mp4 tai .webm).

Tiedostokääreen ja käytettävän koodekin valitseminen on kuitenkin tärkeä vaihe, koska eri selaimet tukevat eri videokoodaus- ja videosäiliömuotoja. Nämä videomuodot tukevat myös vain tiettyjä videokoodausmuotoja, mikä rajoittaa osaltaan valintaa. Tämän lisäksi toiset koodekit ovat tehokkaampia pakkaamaan videokuvaa, mikä on tärkeää tiedostokokojen pienentämisessä. Onneksi HTML5 video -elementissä voidaan määrittää useita eri tiedostoja, mikä mahdollistaa useiden koodekkien käytön eri laitteita varten.

Verkkosivujen käyttöä ajatellen merkittävimmät videokoodausmuodot ovat Theora, AVC/H.264, HEVC/H.265, VP8, VP9 sekä AV1. Videosäiliömuodoista puolestaan ogg, mkv, mp4 ja webm ovat tähän tarkoitukseen hyödyllisimmät. Googlen jatkokehittämä WebM-mediaformaatti on usein hyvä valinta tehokkaan pakkauksen ja hyvän laadun vuoksi, ja tällöin voidaan hyödyntää VP8, VP9 ja AV1 -videopakkausmuotoja. Vastaavan selaintuen tarjoaa Theora, mutta näiden molempien huono puoli on se, että Applen laitteet eivät tue niitä. Ja puolestaan HEVC (High Efficiency Video Coding) eli H.265-videokoodausmuodolle tuki löytyy tällä hetkellä vain Applelta. Parhaiten eri selaimilla toistuva muoto on kuitenkin AVC (Advanced Video Coding) eli H.264-pakkausstandardi.

Yhteenvetona voitaisiin todeta, että AVC on turvallinen valinta, kun voidaan käyttää ainoastaan yhtä tiedostoa. Muussa tapauksessa on järkevää tarjota useita tiedostoja eri laitteita varten. Esimerkiksi tämän artikkelin pääkuva on ilotulituksen näyttävä videotiedosto, joka tarjotaan kolmessa eri muodossa (VP9/WebM, HEVC/mp4 ja Theora/mkv). Näistä selaimesi valitsee tuetun muodon, ja jos tukea ei ole lainkaan, näytetään tilalla kuva esityksestä. Toinen esimerkki on yläpuolella oleva Valkohatun logotekstin animaatio, joka myös tarjotaan kolmessa eri muodossa (VP9/WebM, AV1/MKV ja AVC/mp4). Sivun latausnopeus ja animaatioiden laatu riippuu näin ollen selaintuesta.

Animointi koodin avulla

Normaaleja kuvatiedostoja voidaan animoida selainten ymmärtämän koodin avulla. Esimerkiksi vektorigraafisia SVG-kuvia (Scalable Vector Graphics) voidaan animoida upottamalla SMIL-kieltä (Synchronized Multimedia Integration Language) tiedoston sekaan. Tämä ei kuitenkaan nykyisin ole enää suositeltava tapa, vaan sen sijaan tulisi käyttää samoja kieliä, joita verkkoselaimet purkavat näyttääkseen käyttäjälle sivuston sisällön. Tämä helpottaa animaation muuttamista ja jatkokehittämistä.

Grafiikkatiedostoja voidaan siis liikutella myös CSS-tyylien ja JavaScriptin avulla. Tyyleillä rakennettu animaatio löytyy tämänkin sivun oikeasta alareunasta, kun vie hiiren osoittimen Valkohattu-tekstin päälle tai mobiililaitteella näpäyttää kyseistä tekstiä. Tässä tapauksessa animaatio suoritetaan vasta käyttäjän aloitteesta, ja näin ollen se ei ole yhtä häiritsevä kuin suoraan toistuva video tai jatkuvaan pyörivä animaatio. Esimerkki tyyleillä luodusta toistuvasta animaatiosta löytyy mm. artikkelin lopusta, jossa nuolenpäät liikkuvat ylöspäin ja houkuttelevat kävijää painamaan nappia. Massiivisemman hattusade-esimerkin löydät vuoden takaisesta jouluartikkelista. Suurin etu tässä tavassa on se, että tiedostokoot saadaan pidettyä huomattavasti pienempinä kuin tavallisen videon kanssa olisi mahdollista.

Tyylitiedostoilla animointi on kuitenkin hyvin rajallista, ja tähän lisämaustetta tarjoaa JavaScript + HTML5 canvas -pohjainen animointi. Esimerkkejä tällaisesta animoinnista löydät mm. verkkokaupan perustaminen ja verkkoselainten tuki -artikkeleista, joissa hyödynnetyt tilastot on animoitu. Nykypäivän selaimet tukevat myös JavaScriptin verkkoanimoinnin rajapintaa (Web Animations API), jonka avulla voidaan helpommin animoida verkkosivun elementtejä pelkästään JavaScriptillä. Alla olevassa animaatiossa hyödynnetään kyseistä rajapintaa. Mikäli alla oleva Valkohatun logo ei ponnahtele ja kimpoile edestakaisin, ei selaimesi tue verkkoanimoinnin rajapintaa. Tähän ongelmaan olisi mahdollista tarjota tuen antava polyfill eli JavaScript-kirjasto, jolloin animaatiot toimisivat myös vanhoilla selaimilla.

Monimutkaisemman JS-pohjaisen animoinnin mahdollistavat puolestaan tätä varten kehitetyt Javascript-kirjastot GSAP , Anime.js ja Three.js . Nämä ovat kuitenkin suhteellisen suuria paketteja ja siksi omalta osaltaan hidastavat verkkosivujen käyttöä. Tämän lisäksi ne saattavat toimia hitaasti vanhemmilla laitteilla, joiden tehot ovat vähäisempiä.

Käyttönopeus ja suorituskyky

Animaatioita hyödyntäessä on tarkkailtava niistä aiheutuvia tiedostokokojen kasvamisia ja käyttäjien laitteiden resurssien kulutusta. Vaikka animaatiot lisäävät oikein käytettynä interaktiivisuutta ja mielenkiintoa, saattavat ne pahimmassa tapauksessa lamaannuttaa koko verkkosivun. Pitkät latausajat karkottavat herkästi kävijät ja sivun nopeusoptimoinnit saattavat helposti mennä täysin puihin, kun raskaita animaatioita lisätään mukaan.

Animaatioiden liiallinen tai muutoin häiritsevä käyttö tuhoaa myös sivujen hyvän saavutettavuuden. Osa käyttäjistä saattaa häiriintyä animaatioista ja tällöin sivujen käyttäminen voi muodostua vakavaksikin ongelmaksi. Animaatioita on siis hyvä käyttää harkiten. Pahoitteluni siitä, että tässäkin artikkelissa on liikaa animaatioita, mutta katsoin näiden olevan hyödyllisiä esimerkkien vuoksi.

Useimmiten kuvien ja tekstien pienemmät animoinnit on tehokasta toteuttaa suoraan koodilla joko tyylien tai JavaScriptin avulla. Suuremmat animaatiot ja videopätkät on kuitenkin helpompia ja useimmiten järkevämpiä toteuttaa videomuodoissa. Tulevaisuudessa AV1- ja HEIC-videokoodausmuodot tulevat luultavasti saamaan enemmän suosiota paremman pakkaus/laatu-suhteen vuoksi. Videot eivät myöskään ole häviämässä verkosta, vaan ennemminkin ne tulevat lisääntymään nopeampien verkkoyhteyksien myötä.

Saattaisit kiinnostua myös näistä