Kuva, ääni ja video verkossa

• Linkittäminen
• Upottaminen
  • MIME-tyypit
  • img
  • picture
  • object
• Kuvat
  • JPG
  • PNG
  • GIF
  • Scalable Vector Graphics (SVG)
  • WebP
• Videot
  • Videoiden yleisiä ominaisuuksia
  • Videon pakkaus
  • Videoiden tiedostoformaatit
  • Kodekit
  • Edellytykset videon toimimiselle suoraan selaimessa
  • Videon lisääminen omalle sivulle
• Ääni
• Multimedia
• Tulostettavaksi tarkoitetut dokumentit
• Lisätietoa

Luennolla perehdytään millaisin tekniikoin kuvaa, ääntä, videota ja multimediaa voidaan liittää WWW-sivulle.

Kuvankäsittelyä ei tässä materiaalissa käsitellä vaan oletetaan, että perusteet ovat hallinnassa. Tarvittaessa voit kerrata kuvankäsittelyluennolla tai Kuvankäsittelyharjoitustehtävillä.

Median liittämisessä WWW-sivulle on otettava huomioon:

• Sivuston olennainen sisältö pitää olla saavutettavissa ilman mediaobjekteja.
• Median formaatti pitää olla sopiva kohderyhmälle.
• Median tiedostokoko on pyrittävä tiivistämään mahdollisimman pieneksi.

Linkittäminen

Animaation, kuvan, puheen pätkän tai musiikkia saa WWW-sivulle yksinkertaisimmillaan lisäämällä sivulle linkin (a-elementti), joka viittaa kyseiseen tiedostoon. Linkin avulla käyttäjä voi tallentaa tiedoston paikalliselle levylle ja käynnistää sen erillisellä ohjelmalla tai selaimella. Ohjelman on luonnollisesti tuettava kyseistä tiedostotyyppiä.

Upottaminen

Upottamisella tarkoitetaan kuvan, videon tai äänen liittämistä suoraan WWW-sivulle. Objekti ei sislly HTML-tiedostoon kuten esimerkiksi Word-dokumenttiin, vaan tarvitaan viite erilliseen tiedostoon. Selain näyttää objektin suoraan sivulla, jos osaa.

MIME-tyypit

MIME-tyypit ovat sähköpostissa ja HTTP-protokollassa käytetty tapa ilmaista mitä mediatyyppiä annettu tieto on ja millä ohjelmalla selaimen pitäisi se avata. Esimerkiksi:

Mediatyyppiä ei pidä yrittää päätellä suoraan tiedoston päätteestä, vaan ratkaisevaa on käytetyn protokollan kertoma MIME-tyyppi.

Mediatyyppiä ei voida itse HTML-koodissa määrätä vaan se täytyy asettaa WWW-palvelimen asetuksissa.

img

Pelkkiä kuvia voidaan upottaa dokumenttiin img-elementillä. Kuvia siirrettäessä WWW:hen täytyy kuva ensin muokata kuvankäsittelyohjelmalla ja muuntaa sopivaan formaattiin (JPG, PNG, GIF, WEBP tai SVG).

picture

picture-elementillä voi liittää sivulle kuvia useissa vaihtoehtoisissa muodoissa. Kuvasta voi olla erikokoisia versioita tai kuva voi olla tarjolla useassa eri kuvaformaatissa. Selain valitsee tilanteeseen parhaiten sopivan vaihtoehdon. Jos mikään vaihtoehdoista ei kelpaa niin selain käyttää viimeisenä vaihtoehtona picture-elementin sisällä olevaa img-elementtiä.

media-attribuutissa sisältää mediakyselyn, jonka perusteella selain valitsee parhaiten sopivan kuvan. Lisäksi voidaan käyttää type-attribuuttia kertomaan tarjolla olevan kuvan mime-tyyppi. Selain osaa tämän perusteella päätellä osaako se esittää kyseistä kuvaformaattia vai ei.

Kokeile kaventaa selainikkunaa niin seuraava kuva vaihtuu.

<picture>
<source srcset="puukuva400.webp" media="(max-width: 400px)" type="image/webp" />
<source srcset="puukuva800.webp" media="(max-width: 800px)" type="image/webp" />
<source srcset="puukuva1600.webp"  media="(min-width: 800px)" type="image/webp" />
<source srcset="puukuva400.jpg" media="(max-width: 400px)" type="image/jpeg" />
<source srcset="puukuva800.jpg" media="(max-width: 800px)" type="image/jpeg" />
<source srcset="puukuva1600.jpg"  media="(min-width: 800px)" type="image/jpeg" />
<img src="puukuva400.jpg" alt="Puu makaa vedessä" />
</picture>

object

object-elementillä voi liittää dokumenttiin periaatteessa mitä tahansa objekteja (kuvia, videoita, animaatioita, ohjelmasovelluksia jne.). Jos selain ei tue haluttua tiedostoa, niin object-elementin avulla voidaan määritellä vaihtoehtoisia esitystapoja. object-elementin sukulainen on embed-elementti. Tärkeimmät object-elementin ominaisuudet ovat:

• data - viite objektiin
• type - objektin tyyppi

Muuta huomioitavaa:

• object-elementin sisään pitää laittaa vaihtoehtoinen esitystapa, esim. tekstiä tai kuva.

<p>
<object type="image/svg+xml" data="hazor1e.xml" title="SVG-kuva">
<img src="hazor1e.gif" alt="SVG-kuva (GIF)" title="SVG-kuva (GIF)" />
</object>
</p>

object-elementtiä tarvitsee harvoin. Yleensä paras on käyttää picture-, video-, audio- tai iframe-elementtejä.

• object

Kuvat

• Kuvat on pienennettävä kuvankäsittelyohjelmalla riittävän pieneksi.
• Kaaviokuvista voi kokeilla vähentää värejä, jolloin tiedoston koko usein pienenee
• Kuvan muokkaus on tehtävä aina alkuperäiskuvasta lähtien.

Valitse sopiva pakkaustapa, pakkaamattomat bittikarttaformaatit kuten TIFF tai BMP eivät sovi nettiin. Selaimet tukevat ainakin jpg, png, svg ja gif-formaatteja.

JPG

• Käytetään valokuvien näyttämiseen WWW:ssä.
• Pakkausaste voidaan määritellä. (Pakkausasteiden vertailu).
• 16 miljoonaa väriä (24-bittinen).
• Tukee lomitusta (progressive jpeg).
• Ei tue läpinäkyvyyttä.
• Häviöllinen (lossy), joten informaation palauttaminen ei onnistu.

PNG

• Käytetään viivapiirroksien ja kaavioiden esittämiseen WWW:ssä.
• Käytetään myös kuvaoriginaalien säilyttämiseen.
• Jopa 48-bittinen kuva (2⁴⁸ väriä).
• Tukee lomitusta.
• Tukee läpinäkyvyyttä (alpha channel).
• Lisenssivapaa pakkausalgoritmi, jossa ei menetetä tietoa.
• GIF-formaattia parempi pakkaustapa. Korvaa vanhemman GIF-formaatin muuten paitsi animaatioiden osalta.

GIF

• Käytetään viivapiirroksissa ja kaavioissa.
• On hyvä vaihtoehto kuville, joissa on paljon samaa väriä sisältäviä alueita.
• Tukee lomitusta (interlaced gif).
• Tukee "taustavärin" läpinäkyvyyttä.
• Tukee animaatioita.
• Maksimissaan 256 väriä (8-bittinen).

Scalable Vector Graphics (SVG)

SVG on vektorigrafiikan määrittelyyn tarkoitettu kieli. SVG perustuu myös XML:ään.

Esimerkkejä:

• hazor1e.xml Kokeile suurentaa kuvaa (CTRL-+)
• SVG Tutorial

SVG-kuvia (tai muita vektorigrafiikkakuvia) voi konvertoida joistakin bittikarttakuvista Vector Magic -ohjelmalla.

Vektorigrafiikkaa voi piirtää Inkscapella. Inkscapella voi myös muuntaa kuvia eri vektorigrafiikkaformaattien välillä. Esim. wmf-kuvan voi muuntaa svg-kuvaksi.

WebP

• Uusin formaatti
• Sekä häviöllinen että häviötön pakkaus. Pakkaa häviöllisesti paremmin kuin JPG-formaatti ja häviöttömästi paremmin kuin PNG- tai GIF-formaatti
• Pyrkii korvaamaan JPG-formaatin, PNG-formaatin ja GIF-formaatin
• Tukee animaatioita

Videot

• Videoita voidaan välittää joko verkkovideona (stream, suoratoisto) tai kokonaisina tiedostoina (download).
• Videoon voi liittyä jokin erillinen ääniformaatti tai äänen pakkaus liittyy kiinteästi videoformaattiin.

Videoiden yleisiä ominaisuuksia

• Resoluutio: kuvan tarkkuus, eli korkeus ja leveys pikseleinä.
• Kuvasuhde: kuvan leveyden suhde korkeuteen.
  • Yleensä laskettavissa resoluutiosta.
  • Ei kuitenkaan aina, esim. DVD-resoluutio 720x576, mutta kuvasuhde voi olla esim. 4:3 tai 16:9. Tällöin kuvaa venytetään toistavan laitteen toimesta.
• Kuvanopeus:
  • Montako kuvaa näytetään sekunnissa.
  • PAL-standardissa 25 kuvaa sekunnissa. Lomitettuja kenttiä on tällöin 50.
  • Staattisessa kuvassa (esim. luentovideo) riittää vähempikin (esim. 15 kuvaa sekunnissa).

Videon pakkaus

• Video täytyy pakata (kompressoida) häviöllisesti, sillä liikkuva kuva vie todella paljon levytilaa.
• Internetissä välitettävä video on pakattava vielä tiiviimmin, sillä verkkoyhteyden kaistanleveys on rajoittava tekijä.
• Videon laatu riippuu pakkaustavasta ja tiedoston koosta.
• Tiedoston kokoon vaikuttaa datavirta (engl. bitrate). Tätä mitataan bitteinä sekunnissa (bits/s).
• CBR (Constant Bitrate) tai VBR (Variable Bitrate).

Videoiden tiedostoformaatit

Tiedostokääre/säiliömuoto (engl. container) määrää, millä tavalla video/audio-data ja näihin liittyvä metatieto pakataan tiedostoon.

• Matroska
• MPEG-PS/TS, MP4 (*.mpg, *.m2v *.mp4) - MPEG-standardien tiedostomuodot.
• Container-formaattien vertailua (Wikipedia).

Kodekit

Kodekki (engl. codec) määrää ohjelmamodulin, jolla videodata pakataan ja puretaan.

• Yleensä kodekki tulee videota toistavan ohjelman mukana, mutta joskus se on haettava erikseen.

  Esim. Windows Media Player osaa esittää mitä tahansa videoita, jos videot ovat sen ymmärtämässä tiedostokääressa ja videossa käytetty kodekki on asennettuna.

• VLC Media player sisältää valmiiksi useimmat kodekit, joten pelkästään sen asentamalla pärjää.

Yleisesti käytettyjä kodekkeja

• MPEG-1 on vanha, mutta hyvin tuettu videoformaatti. Haittapuolina iso tiedostokoko ja artifaktikuviot.
• MPEG-2-pakkausta käytetään DVD-videoissa ja suomalaisissa DigiTV-lähetyksissä, soveltuu harvoin Internet-jakeluun.
• MPEG-4 - standardi lähes DVD-tasoiselle videolle.
• H.264 / MPEG-4 AVC. Käytetään yleisesti QuickTime-videoissa kuten elokuvatrailereissa ja youtubessa.
• High Efficiency Video Coding (HEVC, H.265)
• WebM

Edellytykset videon toimimiselle suoraan selaimessa

• Selaimessa valmis tuki käytetylle videomuodolle tai selaimeen sopiva plugin, joka mahdollistaa videon esittämisen suoraan selaimessa.
• Videossa käytetyn videokoodauksen ja audiokoodauksen purkamiseen sopivat kodekit.

Videon lisääminen omalle sivulle

• Youtube-videoita voi liittää omalle sivulle iframe-elementin avulla. Tarvittavan html-koodin saa aina youtubesta videon omalta sivulta, kun valitsee Share ja edelleen embed. Koodi on seuraavaa muotoa:

  <iframe width="560" height="315" src="https://www.youtube.com/embed/3u1S8VBlMAA" frameborder="0" allowfullscreen></iframe>
  

  Huomaathan, että iframessa käytetty osoite ei ole sama kuin youtube-videon suora osoite.

  Youtuben antama koodi ei ole aivan suositusten mukainen. Parempi versio olisi:

  <iframe width="560" height="315" src="https://www.youtube.com/embed/3u1S8VBlMAA"  allow="fullscreen"></iframe>

  Vielä parempi olisi jättää pois myös width- ja height-attribuutit, joilla määrätään videon koko. Olisi parempi asettaa koko CSS-koodissa seuraavaan tapaan:

  <iframe class="youtube" src="https://www.youtube.com/embed/3u1S8VBlMAA"  allow="fullscreen"></iframe>

  CSS-koodi:

  .youtube {
  /* Jos on pakko voi käyttää absoluuttisia kokoja kuten html-koodissa: */
  /*   width: 560px;
     height: 315px; */
  /* Parempi on käyttää suhteellisia skaalautuvia mittoja. Täytyy myös säilyttää
    oikea kuvasuhde. Videoissa yleisin kuvasuhde on 16:9 eli 16/9 = 0.5625  
     width: 90vw;
     height: calc(90vw*0.5625); 
  */
  
  /* uusimmissa selaimissa toimii aspect-ratio-ominaisuus, 
     joka laskee automaattisesti halutun suhteen. Käytä tätä tapaa */
     width: 100%;
     height: 100%;
     aspect-ratio: 16/9;
  }

  Lisätietoa aiheesta: Responsive iframes with the CSS aspect-ratio property

• Omia videotiedostoja voi myös suoraan liittää sivulleen. Yleensä parempi vaihtoehto on uploadata videonsa youtubeen ja liittää sitä kautta. Jos video kuitenkin on säilytettävä omalla palvelimella niin sen voi liittää sivulleen video-elementin avulla aivan samaan tapaan kuin img-elementillä liitetään kuvia:

  itkp1011_testi.mp4-mallivideotiedosto

  
  <video controls="controls" src="itkp1011_testi.mp4"></video>
  

Ääni

• WMA - Windows Media Audio
• MP3 - MPEG-1 Audio Layer 3
• OGG - OGG Vorbis
• AC3 - Dolby Digital
• AAC - Advanced Audio Coding
• MID - Musical Instrument Digital Interface

Musiikki upotetaan sivulla samaan tapaan kuin videokin mutta käytetään audio-elementtiä.

<audio controls="controls" src="musa.mp3"></audio>